/* ═══════════════════════════════════════════════════════════════════════════
   leagues.sh · Motion tokens
   ─────────────────────────
   Authoritative spec: DESIGN.md § Motion system.
   Durations grounded in Material Design 3 buckets; easings are Emil Kowalski's
   published curves. All motion is delivered via CSS — the stack has no JS
   animation libraries and no JS build step. Cite a token, never a magic value.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Durations — semantic names, not raw values ───────────────────────── */
  --dur-instant:     80ms;   /* hover tint, focus-ring appear, button press   */
  --dur-micro:      120ms;   /* checkbox check, label↔spinner cross-fade      */
  --dur-quick:      180ms;   /* input border on focus, error appear           */
  --dur-base:       220ms;   /* dropdown open, conditional field reveal       */
  --dur-considered: 320ms;   /* multi-step forward, loading→success           */
  --dur-narrative:  480ms;   /* sheet / drawer slide                          */
  --dur-deliberate: 640ms;   /* celebratory success moment                    */

  /* ── Easings — Emil Kowalski ──────────────────────────────────────────── */
  --ease-out-strong:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:        cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Easings — Material Design 3 ──────────────────────────────────────── */
  --ease-emphasized:            cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-standard:              cubic-bezier(0.2, 0, 0, 1);
  --ease-standard-decelerate:   cubic-bezier(0, 0, 0, 1);
  --ease-standard-accelerate:   cubic-bezier(0.3, 0, 1, 1);
}

/* ── Keyframes ────────────────────────────────────────────────────────────
   Each is short-circuited by the prefers-reduced-motion block below. */

/* Invalid-submit feedback — one shake, never infinite. */
@keyframes lx-error-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

/* Loading spinner — the one place an infinite animation is allowed. */
@keyframes lx-spin { to { transform: rotate(360deg); } }

/* Validation error message entrance. */
@keyframes lx-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Multi-step wizard transitions. */
@keyframes lx-step-in-forward {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lx-step-in-back {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Initial page / form mount — once per mount only. */
@keyframes lx-mount {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Overlay entrance — autocomplete results, popover surfaces. Pairs with
   --dur-base + --ease-emphasized-decelerate (DESIGN.md §5: dropdown open). */
@keyframes lx-overlay-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Conditional-field reveal ─────────────────────────────────────────────
   Animates grid-template-rows + opacity — never max-height/height/padding. */
.lx-field-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--dur-base) var(--ease-emphasized-decelerate),
    opacity var(--dur-quick) var(--ease-emphasized-accelerate);
}
.lx-field-reveal[data-visible="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--dur-base) var(--ease-emphasized-decelerate),
    opacity var(--dur-base) var(--ease-emphasized-decelerate);
}
.lx-field-reveal > * { overflow: hidden; }

/* ── prefers-reduced-motion — universal short-circuit ─────────────────────
   Honored once here for the whole platform. Every animated surface inherits
   this; no component re-declares it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}