/* ================================================================
 * Oymyakon Design System — Motion Tokens (motion.css)
 * AUTO-GENERATED by build-dtcg.js — DO NOT EDIT MANUALLY
 * Source: tokens/src/motion/*.json
 * ================================================================ */

:root {

  /* ── Curves primitives — consumed only through a preset below ── */
  /* Starts slow, ends fast. Exits and dismissals — the element is leaving, so it accelerates away. */
  --curve-accelerated-ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  /* The default. Symmetric ease for presses, enters and scale changes. */
  --curve-standard-ease-in-out: cubic-bezier(0.25, 1, 0.5, 1);
  /* Starts fast, settles slowly. State changes and position moves. */
  --curve-slow-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* Constant rate. Loops and colour-only changes, where acceleration would read as a stutter. */
  --curve-linear: cubic-bezier(0.25, 0.25, 0.75, 0.75);

  /* ── Duration primitives ── */
  --duration-short1: 100ms;
  --duration-short2: 150ms;
  --duration-short3: 200ms;
  --duration-medium1: 250ms;
  --duration-medium2: 300ms;
  --duration-long1: 400ms;
  --duration-long2: 500ms;
  --duration-long3: 600ms;

  /* ── Transforming presets — state, enter, exit ── */
  /* Transforming/Instant — the moment of contact. */
  --transforming-pressed: 100ms cubic-bezier(0.5, 0, 0.75, 0);
  /* Transforming/Instant — contact ends. */
  --transforming-released: 150ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Transforming/State — a state change that must feel immediate. */
  --transforming-state-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Transforming/State — the default state change: colour, border, shadow. */
  --transforming-state-default: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Transforming/State — a state change on a large surface. */
  --transforming-state-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Transforming/Enter — a small element appears. */
  --transforming-enter-fast: 150ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Transforming/Enter — the default appearance. */
  --transforming-enter-default: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Transforming/Enter — a large overlay appears. */
  --transforming-enter-slow: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Transforming/Exit — a small element leaves. */
  --transforming-exit-fast: 100ms cubic-bezier(0.5, 0, 0.75, 0);
  /* Transforming/Exit — the default dismissal. */
  --transforming-exit-default: 200ms cubic-bezier(0.5, 0, 0.75, 0);
  /* Transforming/Exit — a large overlay leaves. */
  --transforming-exit-slow: 300ms cubic-bezier(0.5, 0, 0.75, 0);

  /* ── Pattern presets — appear / hide ── */
  /* Patterns/Scale Short — appear. */
  --pattern-scale-short-appear: 100ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Patterns/Scale Short — hide. */
  --pattern-scale-short-hide: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Patterns/Position — appear. */
  --pattern-position-appear: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Patterns/Position — disappear. */
  --pattern-position-disappear: 400ms cubic-bezier(0.5, 0, 0.75, 0);
  /* Patterns/Position Short — appear. */
  --pattern-position-short-appear: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Patterns/Position Short — hide. */
  --pattern-position-short-hide: 150ms cubic-bezier(0.5, 0, 0.75, 0);
  /* Patterns/Mask — appear. */
  --pattern-mask-appear: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Patterns/Mask — hide. */
  --pattern-mask-hide: 250ms cubic-bezier(0.5, 0, 0.75, 0);
  /* Patterns/Scale and Opacity — appear. */
  --pattern-scale-opacity-appear: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Patterns/Scale and Opacity — hide. */
  --pattern-scale-opacity-hide: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Patterns/Color — a colour-only change, linear so it reads as even. */
  --pattern-color: 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
  /* Patterns/Scale Medium — appear. */
  --pattern-scale-medium-appear: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Patterns/Scale Medium — hide. */
  --pattern-scale-medium-hide: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Patterns/Position Medium — appear. */
  --pattern-position-medium-appear: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  /* Patterns/Position Medium — hide. */
  --pattern-position-medium-hide: 400ms cubic-bezier(0.25, 1, 0.5, 1);

  /* ── Component recipes — §6 ── */
  /* pushHighlight — background only, no scale. Cell, list rows. */
  --component-push-highlight: 150ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
  /* pushItem — scale 100% → 95%. Rating slots, cards. */
  --component-push-item-press: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* pushItem — scale 95% → 100%. */
  --component-push-item-release: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* pushButton — scale and fill together, 100% → 95%. Button, all variants. */
  --component-push-button-press: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* pushButton — scale and fill together, 95% → 100%. */
  --component-push-button-release: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* scaleS — a small element scales in from 0. */
  --component-scale-s-appear: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* scaleS — scales back out. */
  --component-scale-s-hide: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  /* fadeM — opacity with a 50% → 100% scale. */
  --component-fade-m-appear: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  /* fadeM — hide. */
  --component-fade-m-hide: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  /* moveM — a large surface moves in. */
  --component-move-m-appear: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  /* moveM — moves out. */
  --component-move-m-hide: 400ms cubic-bezier(0.5, 0, 0.75, 0);
  /* bounceWave — per-slot stagger. A duration on its own: the curves are fixed inside the recipe (§6.3). */
  --component-bounce-wave-step: 70ms;
  /* bounceWave — one slot's scale 1 → 1.28 → 1, peak at 110ms. */
  --component-bounce-wave-bounce: 380ms;
  /* bounceWave — the clip-path reveal, fired at the peak. */
  --component-bounce-wave-fill: 160ms;

  /* ── Loop patterns — animation shorthands, keyframes below ── */
  /* Patterns/Shimmer — the Skeleton sweep. Tied to Skeleton/Wave in color-rules.md. */
  --pattern-shimmer: shimmer 1200ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
  /* Patterns/Pulse — badge indicators, online statuses, notification dots. */
  --pattern-pulse: pulse 1500ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  /* Patterns/Spin — loading indicators. Consumed by Loader, and through it by Button's Loading state. */
  --pattern-spin: spin 800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
  /* Patterns/FadeIn — overlays and backdrops. */
  --pattern-fade-in: fadeIn 200ms cubic-bezier(0.25, 1, 0.5, 1) both;
  /* Patterns/FadeOut — overlays and backdrops. */
  --pattern-fade-out: fadeOut 150ms cubic-bezier(0.5, 0, 0.75, 0) both;
}

/* ── Keyframes named by the loop patterns above ── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(0.88); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Reduced motion — every preset to zero, every loop to none.
      A component never needs its own override: zeroing happens at the token,
      which is the whole point of naming the motion instead of inlining it. ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transforming-pressed: 0ms linear;
    --transforming-released: 0ms linear;
    --transforming-state-fast: 0ms linear;
    --transforming-state-default: 0ms linear;
    --transforming-state-slow: 0ms linear;
    --transforming-enter-fast: 0ms linear;
    --transforming-enter-default: 0ms linear;
    --transforming-enter-slow: 0ms linear;
    --transforming-exit-fast: 0ms linear;
    --transforming-exit-default: 0ms linear;
    --transforming-exit-slow: 0ms linear;
    --pattern-scale-short-appear: 0ms linear;
    --pattern-scale-short-hide: 0ms linear;
    --pattern-position-appear: 0ms linear;
    --pattern-position-disappear: 0ms linear;
    --pattern-position-short-appear: 0ms linear;
    --pattern-position-short-hide: 0ms linear;
    --pattern-mask-appear: 0ms linear;
    --pattern-mask-hide: 0ms linear;
    --pattern-scale-opacity-appear: 0ms linear;
    --pattern-scale-opacity-hide: 0ms linear;
    --pattern-color: 0ms linear;
    --pattern-scale-medium-appear: 0ms linear;
    --pattern-scale-medium-hide: 0ms linear;
    --pattern-position-medium-appear: 0ms linear;
    --pattern-position-medium-hide: 0ms linear;
    --component-push-highlight: 0ms linear;
    --component-push-item-press: 0ms linear;
    --component-push-item-release: 0ms linear;
    --component-push-button-press: 0ms linear;
    --component-push-button-release: 0ms linear;
    --component-scale-s-appear: 0ms linear;
    --component-scale-s-hide: 0ms linear;
    --component-fade-m-appear: 0ms linear;
    --component-fade-m-hide: 0ms linear;
    --component-move-m-appear: 0ms linear;
    --component-move-m-hide: 0ms linear;
    --component-bounce-wave-step: 0ms;
    --component-bounce-wave-bounce: 0ms;
    --component-bounce-wave-fill: 0ms;
    --pattern-shimmer: none;
    --pattern-pulse: none;
    --pattern-spin: none;
    --pattern-fade-in: none;
    --pattern-fade-out: none;
  }
}