/* =========================================================================
   What-A-Toy! — Page Transition Overlay
   #transition-overlay: fixed, full-screen, above everything, non-interactive.
   Three stacked panels (red / gold / navy) sweep up to cover the viewport
   during a GreenSock-style wipe, then retract. JS (transitions.js) drives the
   actual clip-path / translateY animation; this file defines layout + the
   default hidden (retracted) resting state.
   ========================================================================= */

#transition-overlay.transition {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);     /* 1100 — above lightbox/nav/everything */
  pointer-events: none;             /* never blocks clicks */
  display: block;
  overflow: hidden;
}

/* Each colored panel fills the viewport and is stacked on top of the others.
   Resting (hidden) state: pushed fully below the viewport via translateY(100%)
   so nothing is visible. JS animates translateY 100% -> 0% (cover) -> -100%
   (retract upward) with a per-panel stagger for the layered wipe look. */
#transition-overlay .transition__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  will-change: transform;
  backface-visibility: hidden;
}

#transition-overlay .transition__panel--red  { background: var(--red); }
#transition-overlay .transition__panel--gold { background: var(--gold); }
#transition-overlay .transition__panel--navy { background: var(--navy); }

/* When reduced motion is preferred, the overlay never animates — keep it
   parked off-screen and fully out of the way. */
@media (prefers-reduced-motion: reduce) {
  #transition-overlay .transition__panel {
    transform: translateY(100%);
    transition: none;
  }
}