/* The wipe from About to Contents: both hold still while a 1px rule rises from the bottom of the screen to the
   top. Above it, About; below it, Contents, clipped to the rule (scripts/scenes/wipe.js). */

.stage__pin > .about { position: sticky; top: var(--about-pin, 0px); }

.wipe {
  position: relative;
  z-index: 2;
  height: calc(100svh + var(--wipe-run, 100svh));
  margin-top: -100svh; /* starts over About's last screen */
}

.wipe__inner {
  position: sticky;
  top: 0;
  height: 100svh;
}

.wipe .contents {
  height: 100svh;
  clip-path: inset(var(--cut, 100%) 0 0 0);
}

/* The rule, and a thin band of scanlines that flickers along it while it moves. */
.wipe__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cut, 100%);
  height: 1px;
  background: #1d1b18;
  pointer-events: none;
  opacity: var(--rule-on, 0);
}

.wipe__glitch {
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(29, 27, 24, 0.55) 0 var(--seg, 18px), transparent var(--seg, 18px) calc(var(--seg, 18px) * 2.6)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 2px);
  mix-blend-mode: difference;
  transform: translateX(var(--jit, 0px));
  opacity: var(--glitch, 0);
}

.wipe__label {
  position: absolute;
  top: -18px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1d1b18;
  background: rgba(244, 242, 236, 0.85);
  padding: 2px 6px;
}

.wipe__label--l { left: max(12px, 2vw); }
.wipe__label--r { right: max(12px, 2vw); top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .stage__pin > .about { position: static; }
  .wipe { height: auto; margin-top: 0; }
  .wipe__inner { position: static; height: auto; }
  .wipe .contents { clip-path: none; }
  .wipe__rule { display: none; }
}