/* Two cuts of the same band. The viewport stays untouched outside this overlay. */
#impact-wipe .chapter-wipe-number { display: none; }
#impact-wipe.chapter-wipe i {
  inset: 0;
  transform: none;
  translate: none;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
#impact-wipe.chapter-wipe .impact-wipe-red { animation-name: chapter-wipe-red; }
#impact-wipe.chapter-wipe .impact-wipe-ink { animation-name: chapter-wipe-ink; }
#impact-wipe.chapter-wipe .chapter-wipe-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--paper);
  font: italic 1000 clamp(110px, 28vmin, 360px)/1 system-ui, sans-serif;
  letter-spacing: -.11em;
  text-shadow: .045em .04em var(--red);
  animation: chapter-wipe-number 500ms linear both;
  pointer-events: none;
}
@keyframes chapter-wipe-red {
  0% { clip-path: polygon(126% 0,155% 0,129% 100%,100% 100%); }
  39%, 58% { clip-path: polygon(-12% 0,136% 0,110% 100%,-38% 100%); }
  100% { clip-path: polygon(-70% 0,-1% 0,-27% 100%,-96% 100%); }
}
@keyframes chapter-wipe-ink {
  0%, 8% { clip-path: polygon(127% 0,151% 0,125% 100%,101% 100%); }
  43%, 55% { clip-path: polygon(-2% 0,127% 0,101% 100%,-28% 100%); }
  93%, 100% { clip-path: polygon(-71% 0,-2% 0,-28% 100%,-97% 100%); }
}
@keyframes chapter-wipe-number {
  0%, 35%, 70%, 100% { visibility: hidden; transform: translateX(8%) skewX(-9deg) scale(1.15); }
  36% { visibility: visible; transform: translateX(8%) skewX(-9deg) scale(1.15); }
  47%, 57% { visibility: visible; transform: translateX(-2%) skewX(-9deg) scale(1); }
  69% { visibility: visible; transform: translateX(-19%) skewX(-9deg) scale(.98); }
}
body.reduced #impact-wipe.chapter-wipe { display: none; }
@media (prefers-reduced-motion: reduce) { #impact-wipe.chapter-wipe { display: none; } }