/* ==========================================================================
   motion.css — the one set of motion tokens, and the keyframes built on them.

   Shared by the console, the sign-in pages and the caller's call page, so it
   reads no variable of anyone else's: every value it needs is defined here.
   Load it right after echo-tokens.css.

   The rules every animation follows:
   - Decoration only. An animation never delays the action it decorates: the
     click handler, the request and the navigation run at once.
   - Transform and opacity only (and a colour fade where a colour changes), so
     a low-end phone composites it without laying the page out again.
   - Fast: 120 ms for a press or a hover, 180 ms for menus, switches and small
     swaps, 220 ms for whatever enters or leaves (dialogs, drawers, toasts,
     a tab's content).
   - Reduced motion turns it off. Durations become 0.01ms rather than 0, so
     `transitionend` and `animationend` still fire for code that waits on them,
     and the distances and the press scale go neutral, so nothing jumps either.
   ========================================================================== */
:root {
  --motion-fast: 120ms;   /* a press, a hover, a chevron */
  --motion-base: 180ms;   /* menus, switches, checks, copy feedback, a sliding highlight */
  --motion-slow: 220ms;   /* dialogs, drawers, sheets, toasts, a tab's content */

  --motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);       /* something appearing */
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);            /* something leaving */
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* something moving from one place to another */
  --motion-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* a release that springs back; a switch's knob */

  --motion-press-scale: 0.97;  /* a pressed control */
  --motion-rise: 6px;          /* how far an entering surface rises */
  --motion-slide: 16px;        /* how far a drawer or a toast slides in from the side */
  --motion-shake: 4px;         /* how far a refused action shakes */

  /* +1 when the inline end is on the right, -1 when it is on the left (Arabic). Set on every
     element that states its direction, so a left-to-right island inside an Arabic page (an
     English staff panel, a phone number) slides the way its own text runs. */
  --motion-inline-dir: 1;
}
[dir="rtl"] { --motion-inline-dir: -1; }
[dir="ltr"] { --motion-inline-dir: 1; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
    --motion-press-scale: 1;
    --motion-rise: 0px;
    --motion-slide: 0px;
    --motion-shake: 0px;
  }
}

/* ---- keyframes. Each names what it does, so a rule reads as a sentence:
   `animation: motion-fade-rise-in var(--motion-slow) var(--motion-ease-out) both`. */
@keyframes motion-fade-in { from { opacity: 0; } }
@keyframes motion-fade-out { to { opacity: 0; } }
@keyframes motion-fade-rise-in { from { opacity: 0; transform: translateY(var(--motion-rise)); } }
@keyframes motion-fade-sink-out { to { opacity: 0; transform: translateY(var(--motion-rise)); } }
/* A dialog: a small scale from just under its size, never a zoom. */
@keyframes motion-scale-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes motion-scale-out { to { opacity: 0; transform: scale(0.98); } }
/* A drawer or a toast that lives at the inline end comes in from that side and leaves the same way. */
@keyframes motion-slide-in-from-inline-end {
  from { opacity: 0; transform: translateX(calc(var(--motion-inline-dir) * var(--motion-slide))); }
}
@keyframes motion-slide-out-to-inline-end {
  to { opacity: 0; transform: translateX(calc(var(--motion-inline-dir) * var(--motion-slide))); }
}
/* A refused action: two and a half gentle shakes, ending where it started. */
@keyframes motion-shake {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(calc(-1 * var(--motion-shake))); }
  40%, 80% { transform: translateX(var(--motion-shake)); }
}
/* A tick or an icon that arrives: it grows into place from a little smaller. */
@keyframes motion-pop-in { from { opacity: 0; transform: scale(0.6); } }
/* A stroke that draws itself in. Give the path `pathLength="1"` and `stroke-dasharray: 1`; the
   resting state is drawn, so with every animation stopped the stroke is simply there. */
@keyframes motion-draw-in { from { stroke-dashoffset: 1; } }