/* Page transitions — one oversized panel with a 3-stop gradient.
   The panel is 120vw wide with a 10vw yellow strip baked into each edge
   of the gradient. As the panel translates L→R, the leading-edge yellow
   strip flashes through; at full cover (translateX(0)) the yellow strips
   sit off-screen on both sides so you see pure black; on the new page
   the panel continues right, flashing the trailing yellow on its way out. */

.page-curtain {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -10vw;
  width: 120vw;
  z-index: 1000;
  pointer-events: none;
  background: linear-gradient(90deg,
    #DBFF00 0%,
    #DBFF00 8.33%,
    #0A0A0A 8.33%,
    #0A0A0A 91.67%,
    #DBFF00 91.67%,
    #DBFF00 100%);
  transform: translateX(-100%);
  will-change: transform;
}
.page-curtain__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(120px, 22vw, 320px);
  height: auto;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
}

/* Incoming page — head script set pt-incoming so the panel sits at full cover */
html.pt-incoming .page-curtain { transform: translateX(0); }

/* Incoming-active — panel slides off-right, trailing yellow flashes through */
html.pt-incoming-active .page-curtain {
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Outgoing — panel enters from left to cover, leading yellow flashes through */
html.pt-outgoing .page-curtain {
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.pt-incoming-active .page-curtain,
  html.pt-outgoing .page-curtain {
    transition-duration: 0.18s;
  }
}