/* ============================================================
   Creativity DS — Motion Tokens
   ============================================================ */

:root {

  /* ── Easing curves ──────────────────────────────────────── */

  /* Standard material — most UI transitions */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* Out: fast settle, used for appearing elements */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */

  /* In: disappearing elements */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);     /* @kind other */

  /* Spring: used for modals, popups, scale interactions */
  --ease-spring: cubic-bezier(0.2, 0.8, 0.3, 1.2); /* @kind other */

  /* Bounce: Lifey cards, Bloom theme */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* STARK / MySpec smooth reveal */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */

  /* ── Duration tokens ────────────────────────────────────── */

  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    150ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    350ms;  /* @kind other */
  --dur-xslow:  500ms;   /* @kind other */
  --dur-film:   800ms;   /* @kind other */

  /* ── Common transition shorthands ──────────────────────── */

  --tx-colors:    color var(--dur-fast) var(--ease-default),
                  background var(--dur-fast) var(--ease-default),
                  border-color var(--dur-fast) var(--ease-default); /* @kind other */

  --tx-transform: transform var(--dur-base) var(--ease-out);  /* @kind other */

  --tx-ui:        color var(--dur-fast) var(--ease-default),
                  background var(--dur-fast) var(--ease-default),
                  border-color var(--dur-fast) var(--ease-default),
                  transform var(--dur-base) var(--ease-out),
                  box-shadow var(--dur-base) var(--ease-default); /* @kind other */

  /* ── Scroll-driven animation defaults (GSAP / CSS) ─────── */
  /* Used as data-d attributes on STARK's .reveal elements */
  --reveal-y:        32px;   /* @kind other */
  --reveal-dur:      0.85s;  /* @kind other */
  --reveal-stagger:  0.08s;  /* @kind other */

  /* ── @media prefers-reduced-motion handled at app level ─── */
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}