/* ═══════════════════════════════════════════════════════════════════════════
   motion-tokens.css — 2030 foundation motion system.
   Added 2026-04-17 as part of Foundation Rebuild WS-1 Commit 1.

   Purpose:
     1. Define motion tokens (durations, easing, spring curves) as CSS vars.
     2. Ship the `.motion-reveal` class using native animation-timeline: view()
        with @supports guard. Elements fade + slide on scroll into viewport,
        reverse on scroll out. Scrubbable. No JS required on supporting browsers.
     3. Provide `prefers-reduced-motion` override that disables transforms
        and instant-shows content.

   Load order in app.blade.php: AFTER mobile-first-baseline, BEFORE site.css.
   Rationale: tokens must resolve before any stylesheet references them.

   Browser support:
     - animation-timeline: view(): Chrome 115+, Edge 115+, Safari 17.5+ (native)
     - Firefox: behind flag as of 2026-04; falls back via JS shim (motion.js in WS-2)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Motion durations — mobile-first, never sluggish */
  --dur-instant: 90ms;
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;
  --dur-reveal: 700ms;

  /* Easing curves — named by feel, not by math */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring-snappy: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --ease-spring-soft: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --ease-linear: linear;

  /* Reveal distances — how far elements travel on entrance */
  --reveal-y: 24px;
  --reveal-y-sm: 12px;

  /* Scroll-timeline view ranges */
  --reveal-entry: entry 10%;
  --reveal-cover: cover 30%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   .motion-reveal — canonical scroll-driven entrance animation.

   Usage: add `motion-reveal` to any element. Native browsers animate on
   scroll automatically. Non-supporting browsers get instant visibility
   (no hidden content), and WS-2 ships motion.js IntersectionObserver
   fallback that adds `.is-in` for parity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fallback default: element visible. Prevents "hidden forever" on Safari <17.5
   if motion.js fails to load. Aligns with the failure-mode mitigation in the
   CEO plan: worst case is everything fades in at once, not invisible. */
.motion-reveal {
  opacity: 1;
  transform: none;
}

/* Native path: scroll-driven via animation-timeline. Chrome 115+, Safari 17.5+. */
@supports (animation-timeline: view()) {
  .motion-reveal {
    opacity: 0;
    transform: translateY(var(--reveal-y));
    animation: motion-reveal-fade both;
    animation-timeline: view();
    animation-range: var(--reveal-entry) var(--reveal-cover);
    will-change: opacity, transform;
  }

  @keyframes motion-reveal-fade {
    from { opacity: 0; transform: translateY(var(--reveal-y)); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Staggered delay variants for siblings — match the legacy reveal-d1..d6 API. */
  .motion-reveal.delay-1 { animation-delay: calc(var(--dur-fast) * 0.5); }
  .motion-reveal.delay-2 { animation-delay: calc(var(--dur-fast) * 1); }
  .motion-reveal.delay-3 { animation-delay: calc(var(--dur-fast) * 1.5); }
  .motion-reveal.delay-4 { animation-delay: calc(var(--dur-fast) * 2); }
  .motion-reveal.delay-5 { animation-delay: calc(var(--dur-fast) * 2.5); }
  .motion-reveal.delay-6 { animation-delay: calc(var(--dur-fast) * 3); }
}

/* JS fallback path (for Firefox + Safari <17.5): motion.js adds `.is-in`. */
.motion-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility: respect the OS motion preference.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}