/* SF Narrative · Animation Layer
   Timing tokens + keyframes + [data-animate] base/active states.
   Drop in alongside tokens.css — no changes to existing CSS required.
   ──────────────────────────────────────────────────────────────────── */

:root {
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    200ms;
  --dur-base:    300ms;
  --dur-slow:    480ms;
}

/* Reduced motion: keep opacity state change, kill all movement */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transform: none !important;
    transition-duration: 1ms !important;
  }
}

/* ── Hidden initial states ──────────────────────────────────────── */

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

[data-animate="fade-up-sm"] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

[data-animate="fade-in"] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity;
}

[data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.93);
  transform-origin: center bottom;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-spring);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

/* ── Triggered (visible) state — all types land here ─────────────── */

[data-animate].anim-in {
  opacity: 1;
  transform: none !important;
}