/* ════════════════════════════════════════════════════════════════════════════
   motion.css — WDS 2.0 Motion Tokens
   Shared easing curves, durations, stagger values, and keyframe animations.
   Derived from the seamlessTransition prototype (pages/jon/seamlessTransition).

   Usage:
     <link rel="stylesheet" href="../../shared/styles/motion.css">

   Then use tokens in CSS:
     .panel  { transition: transform var(--transition-enter); }
     .badge  { animation: wds-pop-in var(--duration-fast) var(--ease-spring) both; }
     .sheet  { transition: transform var(--duration-slow) var(--ease-out); }
   ════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Easing curves ───────────────────────────────────────────────────────
     --ease-out           The primary curve. Fast start, gentle finish.
                          Use for most enter/move transitions.

     --ease-in            Accelerating exit. Use when elements leave the screen.

     --ease-standard      Balanced curve for looping and repeating animations
                          (shimmer, nudge, pulse).

     --ease-spring        Overshoot spring. Use for interactive confirmations,
                          tab press feedback, and celebration moments.

     --ease-spring-gentle Softer overshoot. Use for toasts sliding in,
                          badges popping, and content settling.
  ── */
  --ease-out:             cubic-bezier(0.4, 0, 0, 1);
  --ease-in:              cubic-bezier(0.4, 0, 1, 1);
  --ease-standard:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-gentle:   cubic-bezier(0.34, 1.2, 0.64, 1);

  /* ── Duration scale ──────────────────────────────────────────────────────
     --duration-micro     80ms   Press/lift feedback. Instant feel.
     --duration-fast      150ms  Toggles, hover states, quick UI responses.
     --duration-normal    250ms  General exit/return transitions.
     --duration-enter     300ms  Screen and panel enter transitions.
     --duration-slow      400ms  Deliberate layout changes, sheet slides.
     --duration-spring    500ms  Spring-curve animations needing room to settle.
     --duration-ambient   3000ms Idle loops: shimmer, float, breathe.
  ── */
  --duration-micro:       80ms;
  --duration-fast:        150ms;
  --duration-normal:      250ms;
  --duration-enter:       300ms;
  --duration-slow:        400ms;
  --duration-spring:      500ms;
  --duration-ambient:     3000ms;

  /* ── Stagger offsets ─────────────────────────────────────────────────────
     Use with transition-delay to cascade list items or UI sections in.
     Multiply by element index for proportional stagger.
  ── */
  --stagger-xs:           40ms;
  --stagger-sm:           80ms;
  --stagger-md:           120ms;
  --stagger-lg:           200ms;

  /* ── Composite shorthands ────────────────────────────────────────────────
     Ready-to-use transition values for the most common cases.
  ── */
  --transition-enter:     var(--duration-enter)  var(--ease-out);
  --transition-exit:      var(--duration-normal) var(--ease-in);
  --transition-spring:    var(--duration-spring) var(--ease-spring);
  --transition-fast:      var(--duration-fast)   var(--ease-out);
  --transition-slow:      var(--duration-slow)   var(--ease-out);
}


/* ════════════════════════════════════════════════════════════════════════════
   Keyframe library
   All names prefixed wds- to avoid collisions with prototype keyframes.
   ════════════════════════════════════════════════════════════════════════════ */

/* Opacity */
@keyframes wds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wds-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Slide + fade */
@keyframes wds-slide-up-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wds-slide-up-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes wds-slide-down-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wds-slide-down-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* Scale */
@keyframes wds-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes wds-pop-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.85); }
}

/* Spring settle — for elements that need to breathe in */
@keyframes wds-spring-in {
  0%   { opacity: 0; transform: scale(0.92); }
  50%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Confirm settle — brief scale pulse after an action */
@keyframes wds-spring-settle {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Ambient float — idle hover/float loop */
@keyframes wds-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Shimmer — loading skeleton gradient sweep */
@keyframes wds-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Pulse — urgency / countdown */
@keyframes wds-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

/* Attention nudge — draws eye to interactive element */
@keyframes wds-nudge-x {
  0%, 75%, 100% { transform: translateX(0); }
  82%            { transform: translateX(-4px); }
  91%            { transform: translateX(2px); }
}

/* Spin — loaders */
@keyframes wds-spin {
  to { transform: rotate(360deg); }
}