/* ============================================================
   Catapulte — transition.css
   Page transition overlay: blind panel system, gate state,
   responsive panel count, safety timeout, reduced motion
   ============================================================ */

/* ── Overlay Container ──
   Fixed full-viewport overlay with vertical blind panels.
   Hidden by default — activated by html.page-transition-active
   class (set by JS before navigation, removed after arrival).
   z-index 10000 sits above theme-crossfade (9999) and header (1000).
   ──────────────────────────────────────────────────────────────── */

.page-transition {
  position: fixed;
  inset: 0;
  display: flex;
  gap: 3px;
  background: var(--bg);
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
}

/* ── Blind Panels ──
   Equal-width vertical panels using theme accent color.
   Collapsed (scaleX 0) by default — expanded when gate active.
   transform-origin: center center gives venetian blind feel.
   ──────────────────────────────────────────────────────────────── */

.blind-panel {
  flex: 1;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center center;
}

/* ── Navigated Load Gate State ──
   When html has page-transition-active class, overlay becomes
   visible with all panels fully expanded (closed state).
   JS sets this class before navigation and removes it after
   the arrival animation completes.
   ──────────────────────────────────────────────────────────────── */

html.page-transition-active .page-transition {
  visibility: visible;
  pointer-events: all;
  animation: safety-fade-out 0s ease 5s forwards; /* CSS safety timeout — see below */
}

html.page-transition-active .blind-panel {
  transform: scaleX(1);
}

/* ── Responsive Panel Count ──
   10 panels in markup, visible count adapts by breakpoint:
   - Desktop (default): 8 panels (hide 9th and 10th)
   - Tablet (max-width: 990px): 6 panels (hide 7th through 10th)
   - Mobile (max-width: 767px): 4 panels (hide 5th through 10th)
   Breakpoints match existing gsap.matchMedia tiers (991/768/767).
   ──────────────────────────────────────────────────────────────── */

/* Desktop: hide panels 9 and 10 */
.blind-panel:nth-child(n+9) {
  display: none;
}

/* Tablet: hide panels 7 through 10 */
@media (max-width: 990px) {
  .blind-panel:nth-child(n+7) {
    display: none;
  }
}

/* Mobile: hide panels 5 through 10 */
@media (max-width: 767px) {
  .blind-panel:nth-child(n+5) {
    display: none;
  }
}

/* ── Safety Timeout (CSS Animation Fallback) ──
   If JS never loads or fails to remove page-transition-active,
   this CSS animation hides the overlay after 5 seconds.
   When JS DOES load and removes the class, the animation
   is cancelled naturally since the selector no longer matches.
   Animation property is set above on .page-transition-active rule.
   ──────────────────────────────────────────────────────────────── */

@keyframes safety-fade-out {
  to {
    visibility: hidden;
  }
}

/* ── Reduced Motion ──
   Remove overlay entirely for users who prefer reduced motion.
   No transition animation will play — navigation is instant.
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    display: none;
  }
}