/* ==========================================================================
   scroll-fx.css — scroll-linked motion for the Option C homepage.

   Exploration outcome (GSAP ScrollTrigger ~38 KB gz vs motion.dev ~6–18 KB
   vs native): native CSS scroll-driven animations won — 0 KB of library and
   the animation runs off the main thread, so scrolling cannot jank and INP
   is untouched. scroll-fx.js (~1 KB) reproduces the same effects through two
   custom properties (--sfx-exit, --sfx-cover) for engines without
   animation-timeline (Firefox stable); append ?sfx=js to force that path in
   any browser for review.

   Ground rules, per the brief:
   - lightweight: no library, one tiny fallback script;
   - CLS-safe: transform/opacity only — every animated image sits inside an
     overflow:hidden frame with a fixed height or aspect-ratio;
   - INP-safe: compositor-driven natively; the fallback writes style props
     from a single rAF-throttled passive scroll listener;
   - mobile-first: values are tuned at 390px and simply inherit upward —
     travel distances are percentages of the (smaller) mobile frames.
   Everything is gated behind prefers-reduced-motion: no-preference; reduced
   motion and legacy engines get the static page unchanged.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Shared geometry (both paths): the chapter rule draws from its left end */
  .folio::after { transform-origin: left center; }

  /* ---- Native path: CSS scroll-driven animations --------------------------
     :root:not(.sfx-js) stands the native path down when the JS fallback is
     forced (?sfx=js), so the two never fight over transform. */
  @supports (animation-timeline: view()) {

    /* Hero: as the cover scrolls out, the photograph lags a touch behind the
       page and the "trichology" ornament drifts off and dims — typographic
       depth. .hero{overflow:hidden} contains both. */
    :root:not(.sfx-js) .hero[data-hero] { view-timeline: --sfx-hero block; }
    :root:not(.sfx-js) :is(.hero-img, .hero-collage__main img) {
      animation: sfx-hero-lag linear both;
      animation-timeline: --sfx-hero;
      animation-range: exit;
    }
    :root:not(.sfx-js) .hero-ornament {
      animation: sfx-ornament-drift linear both;
      animation-timeline: --sfx-hero;
      animation-range: exit;
    }

    /* Texture / divider panels: the image travels slower than the page
       inside its clipped frame (scale gives the overdraw the travel needs,
       so no edge is ever revealed). */
    :root:not(.sfx-js) :is(.texture-panel, .divider-panel) {
      view-timeline: --sfx-panel block;
    }
    :root:not(.sfx-js) :is(.texture-panel, .divider-panel) > img {
      animation: sfx-parallax linear both;
      animation-timeline: --sfx-panel;
      animation-range: cover;
    }
    /* The 150px full-width divider strip reads best with deeper travel */
    :root:not(.sfx-js) .divider-panel > img { animation-name: sfx-parallax-deep; }

    /* Chapter rules: the folio's hairline draws in as the heading arrives,
       finishing ~45% up the viewport */
    :root:not(.sfx-js) .folio { view-timeline: --sfx-folio block; }
    :root:not(.sfx-js) .folio::after {
      animation: sfx-rule-draw linear both;
      animation-timeline: --sfx-folio;
      animation-range: entry 0% cover 45%;
    }
  }

  /* ---- Fallback path: scroll-fx.js sets --sfx-exit / --sfx-cover ------- */
  .sfx-js :is(.hero-img, .hero-collage__main img) {
    transform: translateY(calc(var(--sfx-exit, 0) * 22px));
  }
  .sfx-js .hero-ornament {
    transform: translateX(calc(var(--sfx-exit, 0) * -5%));
    opacity: calc(0.16 - var(--sfx-exit, 0) * 0.11);
  }
  .sfx-js :is(.texture-panel, .divider-panel) > img {
    transform: translateY(calc((var(--sfx-cover, 0.5) - 0.5) * 10%)) scale(1.14);
  }
  .sfx-js .divider-panel > img {
    transform: translateY(calc((var(--sfx-cover, 0.5) - 0.5) * 22%)) scale(1.3);
  }
  .sfx-js .folio::after {
    transform: scaleX(clamp(0, calc(var(--sfx-cover, 1) * 2.2), 1));
  }
}

@keyframes sfx-hero-lag {
  to { transform: translateY(22px); }
}
@keyframes sfx-ornament-drift {
  to { transform: translateX(-5%); opacity: 0.05; }
}
@keyframes sfx-parallax {
  from { transform: translateY(-5%) scale(1.14); }
  to   { transform: translateY(5%)  scale(1.14); }
}
@keyframes sfx-parallax-deep {
  from { transform: translateY(-11%) scale(1.3); }
  to   { transform: translateY(11%)  scale(1.3); }
}
@keyframes sfx-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}