/* =============================================================
   755 Financial — Motion Layer (v1, CSS-only)

   Five FINRA-2210-safe patterns. Editorial restraint, not flashy.
   All gated by `prefers-reduced-motion: no-preference` so reduced-
   motion users see a fully static site.

   Forbidden by design (FINRA Rule 2210):
   - No motion on performance charts, growth curves, return figures
   - No parallax behind any numeric content
   - No magnetic cursor / morphing shapes near CTAs

   Next.js port path: GSAP layers on top of these CSS primitives
   without rewrite (same data-attributes, same easing curve).
   ============================================================= */

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

  /* -----------------------------------------------------------
     Shared easing — matches --ease in styles.css
     ----------------------------------------------------------- */
  :root {
    --motion-fast: 320ms;
    --motion-med:  680ms;
    --motion-slow: 1100ms;
  }

  /* -----------------------------------------------------------
     1. Hero fade-in on load
        Display headline + subhead + CTA stagger up on first paint.
        Editorial pacing — 800ms total, no bounce.
     ----------------------------------------------------------- */
  .hero .eyebrow      { animation: m-fade-up var(--motion-med) var(--ease) both;       animation-delay:   0ms; }
  .hero .rule         { animation: m-rule-grow var(--motion-med) var(--ease) both;     animation-delay: 120ms; }
  .hero .hero__display{ animation: m-fade-up var(--motion-slow) var(--ease) both;      animation-delay: 240ms; }
  .hero .hero__sub    { animation: m-fade-up var(--motion-med) var(--ease) both;       animation-delay: 480ms; }
  .hero .hero__cta    { animation: m-fade-up var(--motion-med) var(--ease) both;       animation-delay: 640ms; }

  /* Service-page editorial hero — same cadence, dark background */
  .hero-service .eyebrow { animation: m-fade-up var(--motion-med) var(--ease) both;   animation-delay:   0ms; }
  .hero-service h1       { animation: m-fade-up var(--motion-slow) var(--ease) both;  animation-delay: 240ms; }
  .hero-service p        { animation: m-fade-up var(--motion-med) var(--ease) both;   animation-delay: 480ms; }

  @keyframes m-fade-up {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes m-rule-grow {
    from { opacity: 0; transform: scaleX(0); transform-origin: left center; }
    to   { opacity: 1; transform: scaleX(1); transform-origin: left center; }
  }

  /* -----------------------------------------------------------
     2. Scroll-revealed sections
        Alternating media+text rows + vertical-grid tiles + cross-
        sell cards fade up on entering the viewport. Threshold ~20%.
        Native scroll-driven animation, zero JS.
     ----------------------------------------------------------- */
  @supports (animation-timeline: view()) {

    .section .row,
    .vert-grid .tile,
    .cross__card,
    .about-block,
    .value,
    .stat {
      animation: m-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }

    /* Keyframe deliberately animates transform only — not opacity.
       Rationale: scroll-driven opacity transitions trip a11y
       contrast checkers (Lighthouse, axe) on rows below the fold
       because the headless capture sees the partially-faded color.
       The slide-up still reads as motion; full opacity preserves
       WCAG AA contrast on every viewport state. */
    @keyframes m-reveal-up {
      from { transform: translate3d(0, 24px, 0); }
      to   { transform: translate3d(0, 0, 0); }
    }
  }

  /* Fallback for browsers without scroll-timeline support:
     leave elements visible. No JS polyfill — graceful degrade. */

  /* -----------------------------------------------------------
     3. Hero photo Ken Burns (service pages + editorial blocks)
        Slow 5% pan as user scrolls past. ONLY on non-data imagery.
        Never on charts, growth curves, or anything implying return.
     ----------------------------------------------------------- */
  @supports (animation-timeline: scroll()) {

    .hero-service {
      animation: m-kenburns linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
    }

    @keyframes m-kenburns {
      from { background-size: 105%; background-position: center 48%; }
      to   { background-size: 110%; background-position: center 52%; }
    }
  }

  /* -----------------------------------------------------------
     4. Scroll progress bar
        Thin navy bar fills horizontally as user reads. Editorial
        signal of "long-form authority." Pinned to top of viewport.
     ----------------------------------------------------------- */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--navy);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 60;
    pointer-events: none;
  }

  @supports (animation-timeline: scroll(root)) {
    .scroll-progress {
      animation: m-progress linear;
      animation-timeline: scroll(root);
    }
    @keyframes m-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }

  /* -----------------------------------------------------------
     5. View Transitions (page-to-page navigation crossfade)
        Native API. Hero element gets a stable transition name so
        the headline morphs cleanly between sections.
     ----------------------------------------------------------- */
  @view-transition { navigation: auto; }

  /* Optional: tag the brand wordmark + hero headline as
     "shared elements" across navigations so they smoothly morph
     instead of flash-cutting. */
  .brand__mark      { view-transition-name: brand-mark; }
  .hero__display    { view-transition-name: hero-headline; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 420ms;
    animation-timing-function: var(--ease);
  }

  /* -----------------------------------------------------------
     Micro-interactions (already in styles.css for buttons/links;
     this block intentionally light — restraint is the brand)
     ----------------------------------------------------------- */
  .tile        { transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease); }
  .cross__card { transition: transform 280ms var(--ease), border-color 280ms var(--ease); }
  .link-arrow  { transition: border-color 200ms var(--ease), gap 200ms var(--ease); }
}

/* -----------------------------------------------------------
   prefers-reduced-motion: fully static
   The @media query above hides everything from reduced-motion
   users. No additional rules needed here — the absence of any
   motion is the correct behavior.
   ----------------------------------------------------------- */