/* ============================================================
   scroll-driven.css — native scroll-driven animations (S-tier).
   Empty scaffold for landing-v2 motion layer.

   Loaded after styles.css and seo-pages.css so author rules
   here take precedence for animation properties.

   Browser support (mid-2026):
     ✓ Chrome 115+, Edge 115+
     ✓ Safari 26+
     ⚠ Firefox — behind layout.css.scroll-driven-animations flag
   Fallback: IntersectionObserver-driven .reveal classes already exist
   in seo-pages.js. New no-build sections should add data-anim hooks
   and JS will set .in when fallback kicks in.

   Performance rule (S-tier):
     ONLY animate compositor properties — transform, opacity, filter,
     clip-path. Never width/height/margin/top/left/font-size in here.
   ============================================================ */

/* ----- prefers-reduced-motion: hard off for all data-anim hooks ----- */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim] * {
    animation: none !important;
    transition: none !important;
  }
}

@supports (animation-timeline: view()) {
  /* ----- Reveal on enter: opacity + translateY ----- */
  /* Apply to any element with `data-anim="reveal"` for a standard
     fade-up effect tied to the element entering the viewport. */
  [data-anim="reveal"] {
    animation: avp-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  /* ----- Sticky-section progress (S-tier baseline) ----- */
  /* Apply to an element inside a tall section; it tracks scroll
     progress of its nearest scroll container. Used by the pipeline
     storytelling section in phase 3. */
  [data-anim="scroll-progress"] {
    animation: avp-scroll-progress linear;
    animation-timeline: scroll(nearest);
  }
}

@supports not (animation-timeline: view()) {
  /* JS fallback hook: landing.js (or section-specific JS in phases 2-5)
     will add `.in` to elements with data-anim when IntersectionObserver
     fires. CSS here handles the visual transition. */
  [data-anim="reveal"] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--motion-duration-slow, 420ms) var(--motion-easing-decel, ease-out),
      transform var(--motion-duration-slow, 420ms) var(--motion-easing-decel, ease-out);
  }
  [data-anim="reveal"].in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- Keyframes (compositor-only properties) ----- */
@keyframes avp-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes avp-scroll-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}