/* The motion scale.
 *
 * The transitions.dev token set, verbatim, so every duration, easing, distance,
 * scale and blur on the site comes from one place. The rule that matters when
 * reaching for one of these is the doctrine behind the scale: match on what the
 * motion *does*, never on the nearest number. A 300ms modal close belongs to
 * --duration-quick (150ms) because both are "modal close" — the numbers being
 * far apart is the point, not an objection.
 *
 * Load this before any other stylesheet.
 *
 * Two of these names already existed in world.css and pages.css with different
 * values: --duration-fast was 150ms there, and --ease-out was the smooth-out
 * curve. Both were used for what the scale calls "quick" and "smooth-out", so
 * the old uses moved to --duration-quick and --ease-smooth-out — same values on
 * screen, correct names — and the two scale tokens are now free to mean what
 * they mean everywhere else.
 */

:root {
  /* Durations */
  --duration-stagger: 40ms;       /* per-item stagger offset */
  --duration-micro: 80ms;         /* tooltip/path delay, shake segment, large stagger */
  --duration-quick: 150ms;        /* modal/dropdown close, text swap, tooltip appear */
  --duration-fast: 250ms;         /* icon swap, dropdown/modal open, tabs sliding, page slide */
  --duration-medium: 350ms;       /* panel close, toast close */
  --duration-slow: 400ms;         /* panel open, skeleton content reveal, input clear */
  --duration-very-slow: 500ms;    /* emphasis moments, badge appear, text reveal, success check */

  /* Easings */
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);   /* modal/dropdown/panel open + close, page slide, resize */
  --ease-in-out: ease-in-out;                          /* icon swap, text swap, text reveal */
  --ease-out: ease-out;                                /* tooltip open / close */
  --ease-linear: linear;                               /* shimmer, skeleton pulse, spinner */
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);    /* badge pop open */
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1); /* bouncy hover-out */

  /* Distances */
  --distance-micro: 4px;          /* text swap */
  --distance-small: 6px;          /* error shake (small segment) */
  --distance-base: 8px;           /* badge diagonal reveal, page slide */
  --distance-medium: 12px;        /* text reveal */
  --distance-large: 30px;         /* check badge appear */

  /* Scales — the "pre" scale a surface animates from; always settles to 1 */
  --scale-large: 0.96;            /* modal open / close */
  --scale-medium: 0.97;           /* dropdown open */
  --scale-small: 0.98;            /* tooltip open */
  --scale-tiny: 0.99;             /* dropdown close */

  /* Blur — the "pre" blur, settling to 0 */
  --blur-small: 2px;              /* panel reveal, icon swap, text swap */
  --blur-medium: 3px;             /* page slide, text reveal */
  --blur-large: 8px;              /* success check open */

  /* Off-scale, and staying that way: no token usage matches a generic 200ms
     opacity/transform settle, which is what most of this site's hover work
     does. Left named rather than inlined 16 times. */
  --duration-normal: 200ms;
}