/**
 * MSN26 R6: Luxury scroll effects for 5 background sections
 * ========================================================
 *
 * ARCHITECTURE:
 * - Primary: CSS scroll-driven animations (Chrome/Edge 115+, Safari 17.5+, ~85% global)
 * - Fallback: Continuous rAF loop (no idle gaps, eased accumulator) — DESKTOP ONLY
 * - Mobile <768px: reduced-magnitude CSS effects (R6.5, Alex go 2026-06-12);
 *   browsers without view() support stay static (no JS fallback on mobile)
 * - prefers-reduced-motion: ALL OFF
 *
 * Five distinct effects:
 * E1 #concept - Deep depth parallax (vertical drift -18%→+18%)
 * E2 #agenda - Panoramic Ken Burns (time-based scale+pan, no scroll dependency)
 * E3 #venue - Cinematic scale-settle reveal (scale 1.18→1.0, brightness 0.75→1)
 * E4 .performance - Parallax + golden light pulse (drift + brightness arc)
 * E5 .mma - Fixed-window curtain depth (near-stationary bg, strong depth)
 */

/* ============================================================
   REDUCED-MOTION: DISABLE ALL ANIMATIONS
   (R6.5: the former <768px blanket kill is removed — mobile now
   gets reduced-magnitude effects in the @supports block below)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #concept .section-bg,
  .agenda-prog-bg,
  #venue .section-bg,
  .performance .section-bg,
  .mma .section-bg {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ============================================================
   CSS SCROLL-DRIVEN ANIMATIONS (Primary path)
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {

    /* TIMELINE UNFREEZE (SAR-2026-06-12): overflow:hidden boxes ARE scroll
       containers, so view() resolved against the never-scrolling section and
       every animation below sat frozen at a fixed progress. overflow:clip
       clips identically but creates NO scroll container -> view() tracks the
       viewport. Scoped to this @supports block so JS-fallback browsers keep
       the original overflow:hidden. */
    #concept.section-image,
    #venue.section-image,
    section.performance.section-image,
    section.mma.section-image,
    #agenda.agenda-prog {
      overflow: clip;
    }

    /* E1: #concept - Deep depth parallax
       -24% → +24% vertical travel + subtle scale 1.0→1.07 for compound depth */

    #concept .section-bg {
      inset: -48% 0;
      will-change: transform;
      animation: concept-parallax linear both;
      animation-timeline: view();
    }

    @keyframes concept-parallax {
      0% { transform: translate3d(0, -24%, 0) scale(1.0); }
      100% { transform: translate3d(0, 24%, 0) scale(1.07); }
    }

    /* E2: #agenda - Panoramic Ken Burns (TIME-based, NOT scroll)
       Scale 1.10→1.26 + lateral pan over 22s, infinite alternate
       Plus stronger scroll-linked vertical offset + wider brightness arc
       OVERSCAN: top/bottom -45% for scroll travel, left/right -10% for pan */

    .agenda-prog-bg {
      top: -45%;
      bottom: -45%;
      left: -10%;
      right: -10%;
      will-change: transform, filter;
      animation:
        agenda-ken-burns 22s ease-in-out infinite alternate,
        agenda-scroll-offset linear both;
      animation-timeline: auto, view();
      /* scroll-offset ADDS its translate on top of ken-burns' scale/pan
         instead of overwriting it — gives scroll-linked depth + time-based
         panorama simultaneously (Chrome 112+/Safari 16.4+, inside this gate) */
      animation-composition: replace, add;
    }

    @keyframes agenda-ken-burns {
      0% {
        transform: scale(1.10) translateX(-6%);
      }
      100% {
        transform: scale(1.26) translateX(6%);
      }
    }

    @keyframes agenda-scroll-offset {
      0% { transform: translate3d(0, -11%, 0); filter: brightness(0.88); }
      50% { transform: translate3d(0, 0, 0); filter: brightness(1.10); }
      100% { transform: translate3d(0, 11%, 0); filter: brightness(0.95); }
    }

    /* E3: #venue - Cinematic scale-settle reveal
       Enters at scale(1.30) brightness(0.65), settles to 1.0/1.0
       Longer settle range for extended on-screen presence */

    #venue .section-bg {
      inset: -35% 0;
      will-change: transform, filter;
      animation: venue-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 75%;
    }

    @keyframes venue-reveal {
      0% {
        transform: scale(1.30);
        filter: brightness(0.65);
      }
      100% {
        transform: scale(1.0);
        filter: brightness(1.0);
      }
    }

    /* E4: .performance - Parallax + golden light pulse
       Stronger vertical drift + wider brightness arc 0.80→1.15→0.92 */

    .performance .section-bg {
      inset: -45% 0;
      will-change: transform, filter;
      animation: performance-glow linear both;
      animation-timeline: view();
    }

    @keyframes performance-glow {
      0% {
        transform: translate3d(0, -20%, 0);
        filter: brightness(0.80);
      }
      50% {
        transform: translate3d(0, 0%, 0);
        filter: brightness(1.15);
      }
      100% {
        transform: translate3d(0, 20%, 0);
        filter: brightness(0.92);
      }
    }

    /* E5: .mma - Fixed-window curtain depth
       Near-stationary bg via counter-translation (deep parallax factor ~0.60) */

    .mma .section-bg {
      inset: -45% 0;
      will-change: transform;
      animation: mma-curtain linear both;
      animation-timeline: view();
    }

    @keyframes mma-curtain {
      0% { transform: translate3d(0, -22%, 0); }
      100% { transform: translate3d(0, 22%, 0); }
    }
  }

  /* ==========================================================
     MOBILE <768px — REDUCED-MAGNITUDE EFFECTS (R6.5)
     Same five effects at ~55-60% travel, tighter overscan so
     paint areas stay small. Pure compositor work (transform +
     filter only). No JS fallback on mobile — non-supporting
     browsers simply render static images.
     ========================================================== */
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {

    #concept.section-image,
    #venue.section-image,
    section.performance.section-image,
    section.mma.section-image,
    #agenda.agenda-prog {
      overflow: clip; /* view() must resolve to the viewport (SAR-2026-06-12) */
    }

    /* E1m: #concept — depth parallax, ±13% */
    #concept .section-bg {
      inset: -30% 0;
      will-change: transform;
      animation: concept-parallax-m linear both;
      animation-timeline: view();
    }
    @keyframes concept-parallax-m {
      0% { transform: translate3d(0, -13%, 0) scale(1.0); }
      100% { transform: translate3d(0, 13%, 0) scale(1.04); }
    }

    /* E2m: #agenda — milder Ken Burns + scroll offset */
    .agenda-prog-bg {
      top: -28%;
      bottom: -28%;
      left: -8%;
      right: -8%;
      will-change: transform, filter;
      animation:
        agenda-ken-burns-m 22s ease-in-out infinite alternate,
        agenda-scroll-offset-m linear both;
      animation-timeline: auto, view();
      animation-composition: replace, add;
    }
    @keyframes agenda-ken-burns-m {
      0% { transform: scale(1.08) translateX(-4%); }
      100% { transform: scale(1.18) translateX(4%); }
    }
    @keyframes agenda-scroll-offset-m {
      0% { transform: translate3d(0, -7%, 0); filter: brightness(0.92); }
      50% { transform: translate3d(0, 0, 0); filter: brightness(1.06); }
      100% { transform: translate3d(0, 7%, 0); filter: brightness(0.96); }
    }

    /* E3m: #venue — scale-settle reveal */
    #venue .section-bg {
      inset: -22% 0;
      will-change: transform, filter;
      animation: venue-reveal-m linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 75%;
    }
    @keyframes venue-reveal-m {
      0% { transform: scale(1.18); filter: brightness(0.78); }
      100% { transform: scale(1.0); filter: brightness(1.0); }
    }

    /* E4m: .performance — parallax + light pulse, ±11% */
    .performance .section-bg {
      inset: -28% 0;
      will-change: transform, filter;
      animation: performance-glow-m linear both;
      animation-timeline: view();
    }
    @keyframes performance-glow-m {
      0% { transform: translate3d(0, -11%, 0); filter: brightness(0.86); }
      50% { transform: translate3d(0, 0%, 0); filter: brightness(1.10); }
      100% { transform: translate3d(0, 11%, 0); filter: brightness(0.94); }
    }

    /* E5m: .mma — curtain depth, ±12% */
    .mma .section-bg {
      inset: -28% 0;
      will-change: transform;
      animation: mma-curtain-m linear both;
      animation-timeline: view();
    }
    @keyframes mma-curtain-m {
      0% { transform: translate3d(0, -12%, 0); }
      100% { transform: translate3d(0, 12%, 0); }
    }
  }
}

/* ============================================================
   FALLBACK: JS will handle if @supports fails OR timelines freeze
   (Applied via js/parallax.js when CSS.supports returns false
   or runtime detector finds frozen timelines)
   ============================================================ */

/* Kill CSS animations when JS fallback engages (frozen timelines detected) */
html.css-timeline-dead .section-bg,
html.css-timeline-dead .agenda-prog-bg {
  animation: none !important;
}