/* =============================================================================
   TauDesignWorks — showcase motion (motion.css)
   -----------------------------------------------------------------------------
   Loaded LAST by every page. Pure enhancement: everything here lives inside
   @media (prefers-reduced-motion: no-preference), and the scroll-driven parts
   sit additionally inside @supports (animation-timeline: view()) and are scoped
   to html.sda (added by tdw.js only when the browser supports view timelines and
   the reader hasn't asked for reduced motion). So:
   - reduced motion  -> none of this applies (and the base.css kill switch backs it up);
   - JS off          -> no html.sda, so no scroll-driven state; content stays put;
   - no view-timeline support -> tdw.js falls back to the IntersectionObserver reveal.
   Nothing here paints content — only transforms, opacity and view-transition names —
   so forced-colors mode is unaffected. Restraint is the brand.
   ============================================================================= */

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

  /* ---------- Cross-page View Transitions (MPA) ---------------------------- */
  /* A same-origin navigation cross-fades; the sticky header and its brand mark
     are named so they persist smoothly instead of blinking. The name is scoped
     to .site-header, so the footer's .brand-mark (no .site-header ancestor) is
     never captured — one uniquely-named element per page, as required. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: tdw-header; }
  .site-header .brand-mark { view-transition-name: tdw-brand; }
  ::view-transition-group(*) { animation-duration: 320ms; }

  /* ---------- Hero underline — load-time draw-in -------------------------- */
  /* The .hear underline is an ::after bar (home.css). Draw it in from the left
     once, on load. Time-based, so it needs no scroll-timeline support. */
  .hero h1 .hear::after { transform-origin: left; animation: tdw-underline .7s var(--ease) .15s both; }

  /* ---------- Scroll-driven animations (view timelines) ------------------- */
  @supports (animation-timeline: view()) {

    /* Reveal: replicate the IO reveal — 12px rise + fade as the element enters. */
    html.sda .reveal {
      animation: tdw-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
      will-change: opacity, transform;
    }

    /* Signature rules draw across as they enter — the spectrum crossbar motif. */
    html.sda .spectrum-rule,
    html.sda .footer-top::before,
    html.sda .suite-band::before {
      transform-origin: left;
      animation: tdw-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 50%;
    }

    /* Hub voice panel: the spoken lines cascade in (stagger via range offsets —
       scroll timelines ignore animation-delay, so we shift the entry window). */
    html.sda .voice-panel .spoken-line {
      animation: tdw-rise linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 40%;
    }
    html.sda .voice-panel .spoken-line:nth-child(2) { animation-range: entry 12% entry 46%; }
    html.sda .voice-panel .spoken-line:nth-child(3) { animation-range: entry 18% entry 52%; }
    html.sda .voice-panel .spoken-line:nth-child(4) { animation-range: entry 24% entry 58%; }

    /* Demo panels drift a hair against the scroll — a quiet parallax, ≤12px. */
    html.sda .demo-panel {
      animation: tdw-parallax linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes tdw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tdw-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tdw-parallax { from { transform: translateY(6px); } to { transform: translateY(-6px); } }
@keyframes tdw-underline { from { transform: scaleX(0); } }