/* Scroll-driven motion. Uses native CSS scroll timelines (Safari 26+ / iOS 26+, Chrome 115+).
   scroll-fx.js adds an IntersectionObserver fallback (.in class) where unsupported. */

/* 1. Reveal: blur + rise + "scan line" wipe */
.fx-reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); }
.fx-reveal.in { opacity: 1; transform: none; filter: none; }

.fx-scan { position: relative; clip-path: inset(0 0 calc(100% - 1px) 0); transition: clip-path .9s var(--ease-out); }
.fx-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--holo-linear); opacity: 0; }
.fx-scan.in { clip-path: inset(0 0 0 0); }
.fx-scan.in::after { animation: scanline .9s var(--ease-out); }
@keyframes scanline { from { top: 0; opacity: 1; } to { top: 100%; opacity: 0; } }

@supports (animation-timeline: view()) {
  .fx-reveal { opacity: 1; transform: none; filter: none; transition: none;
    animation: fx-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes fx-rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

  /* 2. Brain stage shrinks + drifts up as you scroll away (home) */
  .fx-stage { animation: fx-stage linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
  @keyframes fx-stage { to { transform: translateY(-40px) scale(.78); opacity: .35; } }

  /* 3. Timeline progress line draws with scroll */
  .timeline .progress-line { animation: fx-draw linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; }
  @keyframes fx-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* 4. Big numbers count-tilt in */
  .fx-tilt { animation: fx-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: left bottom; }
  @keyframes fx-tilt { from { transform: perspective(600px) rotateX(55deg); opacity: 0; } to { transform: none; opacity: 1; } }

  /* 5. Holo sheen sweeps across foil cards while they cross the viewport */
  .fx-sheen { background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 45%, transparent 60%); background-size: 250% 100%;
    animation: fx-sheen linear both; animation-timeline: view(); }
  @keyframes fx-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
}