/* ============================================================
   The Board — motion system drop-in
   Pairs with board-motion.js. Load after style.css.
   One easing, three durations. Motion is drift and bloom —
   fades, glow swells, small rises. Never bounce, never slide
   from offscreen.
   ============================================================ */
:root {
  --ease-drift: cubic-bezier(.22, .8, .24, 1);
  --dur-quick: 160ms;   /* state changes: hover, press, focus, toggles */
  --dur-drift: 480ms;   /* entrances: panes, overlays, route swaps */
  --dur-pulse: 2400ms;  /* live pulses: clock, live dots */
  --stagger-step: 45ms; /* per-item delay in lists and board rows */
}

/* ---- 1 · Pane / card entrance ------------------------------
   Add .bm-enter when a pane first appears (BoardMotion.enter). */
@keyframes bm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.bm-enter { animation: bm-rise var(--dur-drift) var(--ease-drift) backwards; }

/* ---- 2 · List & board stagger ------------------------------
   Add .bm-stagger to a container (#board-table tbody, #history,
   #home-tiles, #scarcity-cards); children rise in sequence. */
.bm-stagger > * { animation: bm-rise var(--dur-drift) var(--ease-drift) backwards; }
.bm-stagger > :nth-child(1)  { animation-delay: calc(0 * var(--stagger-step)); }
.bm-stagger > :nth-child(2)  { animation-delay: calc(1 * var(--stagger-step)); }
.bm-stagger > :nth-child(3)  { animation-delay: calc(2 * var(--stagger-step)); }
.bm-stagger > :nth-child(4)  { animation-delay: calc(3 * var(--stagger-step)); }
.bm-stagger > :nth-child(5)  { animation-delay: calc(4 * var(--stagger-step)); }
.bm-stagger > :nth-child(6)  { animation-delay: calc(5 * var(--stagger-step)); }
.bm-stagger > :nth-child(7)  { animation-delay: calc(6 * var(--stagger-step)); }
.bm-stagger > :nth-child(8)  { animation-delay: calc(7 * var(--stagger-step)); }
.bm-stagger > :nth-child(9)  { animation-delay: calc(8 * var(--stagger-step)); }
.bm-stagger > :nth-child(10) { animation-delay: calc(9 * var(--stagger-step)); }
.bm-stagger > :nth-child(11) { animation-delay: calc(10 * var(--stagger-step)); }
.bm-stagger > :nth-child(12) { animation-delay: calc(11 * var(--stagger-step)); }
.bm-stagger > :nth-child(n+13) { animation-delay: calc(12 * var(--stagger-step)); }

/* ---- 3 · Pick clock / live pulse ---------------------------
   .bm-pulse on #clock while the user is on the clock;
   .bm-live-dot is the 8px status dot. Slow glow swell, no scale. */
@keyframes bm-glow-swell {
  0%, 100% { box-shadow: 0 0 32px -8px oklch(0.66 0.24 295 / .35), inset 0 1px 0 rgba(255,255,255,.22); }
  50%      { box-shadow: 0 0 52px -4px oklch(0.66 0.24 295 / .70), inset 0 1px 0 rgba(255,255,255,.22); }
}
.bm-pulse { animation: bm-glow-swell var(--dur-pulse) var(--ease-drift) infinite; }
@keyframes bm-dot-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.bm-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: oklch(0.79 0.16 295);
  box-shadow: 0 0 12px 0 oklch(0.66 0.24 295 / .8);
  animation: bm-dot-pulse var(--dur-pulse) ease-in-out infinite;
}

/* ---- 4 · Overlay & modal in / out --------------------------
   BoardMotion.showOverlay / hideOverlay toggle these on #modal,
   #report-overlay, #player-overlay, #confirm, #toast. */
@keyframes bm-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-float-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.bm-overlay-in { animation: bm-scrim-in var(--dur-drift) var(--ease-drift) backwards; }
.bm-overlay-in > * { animation: bm-float-in var(--dur-drift) var(--ease-drift) backwards; }
.bm-overlay-out { animation: bm-scrim-in var(--dur-quick) var(--ease-drift) reverse forwards; }

/* ---- 5 · Hover / press states ------------------------------
   Surface steps up one glass level + one shadow tier; press
   settles back into the plane (no shrink). Focal elements only
   get the violet glow. */
.bm-interactive {
  transition: background var(--dur-quick) var(--ease-drift),
              border-color var(--dur-quick) var(--ease-drift),
              box-shadow var(--dur-quick) var(--ease-drift);
}
.bm-interactive:hover {
  background: oklch(0.85 0.05 295 / .14);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 24px 48px -12px oklch(0.05 0.03 295 / .55), inset 0 1px 0 rgba(255,255,255,.22);
}
.bm-interactive.bm-focal:hover {
  border-color: oklch(0.66 0.24 295 / .45);
  box-shadow: 0 24px 48px -12px oklch(0.05 0.03 295 / .55),
              0 0 52px -4px oklch(0.66 0.24 295 / .5), inset 0 1px 0 rgba(255,255,255,.22);
}
.bm-interactive:active {
  box-shadow: 0 10px 30px -10px oklch(0.05 0.03 295 / .5), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- 6 · Number & stat ticks -------------------------------
   BoardMotion.tick(el, text) swaps the value with a short roll
   and a one-shot glow flash. Mono numerals only. */
@keyframes bm-tick-roll {
  0%   { opacity: 0; transform: translateY(.55em); }
  100% { opacity: 1; transform: none; }
}
@keyframes bm-tick-flash {
  0%   { color: oklch(0.79 0.16 295); text-shadow: 0 0 18px oklch(0.66 0.24 295 / .8); }
  100% { color: inherit; text-shadow: none; }
}
.bm-tick {
  display: inline-block;
  animation: bm-tick-roll var(--dur-quick) var(--ease-drift),
             bm-tick-flash 900ms var(--ease-drift);
}

/* ---- 7 · Page / route transitions --------------------------
   BoardMotion.showSection(next): old section fades quick, new
   section rises on drift. Sections keep their [hidden] contract. */
.bm-route-out { animation: bm-scrim-in var(--dur-quick) var(--ease-drift) reverse forwards; }
.bm-route-in  { animation: bm-rise var(--dur-drift) var(--ease-drift) backwards; }

/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bm-enter, .bm-stagger > *, .bm-pulse, .bm-live-dot,
  .bm-overlay-in, .bm-overlay-in > *, .bm-overlay-out,
  .bm-tick, .bm-route-out, .bm-route-in { animation: none !important; }
}