/* motion.css: the site's one motion vocabulary (2026-10-12). Pieces step, containers ease, words never move.
   Loads after page styles. New motion uses these tokens; check-design.py blocks animating layout
   properties and warns on endless loops and overshoot curves. Plan and sources: docs/HANDOFF.md, 2026-10-12. */
:root {
  --m-tap: 90ms; --m-step: 120ms;
  --m-lock: 240ms; --m-flash: 160ms; --m-clear: 320ms;
  --m-in: 200ms; --m-out: 140ms;
  --m-drawer-in: 300ms; --m-drawer-out: 200ms;
  --m-sheet-in: 420ms; --m-sheet-out: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);       /* Material 3 standard: things that enter or respond */
  --ease-in: cubic-bezier(0.3, 0, 1, 1);        /* Material 3 standard-accelerate: exits */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* Vaul's drawer curve: panels and sheets */
  --drop: 24px;                                  /* three 8px cells */
}

/* Lock-in, the signature: a piece drops three cells in steps, settles one frame, and flashes once.
   Only on pieces (blocks, rank tiles, counters), never on words. menu.js adds .lock. */
@media (prefers-reduced-motion: no-preference) {
  .lock { position: relative; animation: lock-drop var(--m-lock) steps(4, end) both; }
  .lock::after { content: ""; position: absolute; inset: 0; background: var(--bone, #f3efe6); border-radius: inherit;
    pointer-events: none; opacity: 0; animation: lock-flash var(--m-flash) steps(2, end) var(--m-lock) both; }
  @keyframes lock-drop { 0% { transform: translateY(calc(var(--drop) * -1)); } 75% { transform: translateY(2px); } 100% { transform: none; } }
  @keyframes lock-flash { 0% { opacity: .7; } 100% { opacity: 0; } }
}

/* Press: every control sinks 2px at once and comes back over one tap. */
:is(.btn, .bella-launch, .board-piece, .sys-tile, .cap, .rcpt-row a, .ent-tiles a) {
  transition: transform var(--m-tap) var(--ease-out), background-color var(--m-tap) var(--ease-out);
}
:is(.btn, .bella-launch, .board-piece, .sys-tile, .cap, .rcpt-row a, .ent-tiles a):active { transform: translateY(2px); transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .bella-launch, .board-piece, .sys-tile, .cap, .rcpt-row a, .ent-tiles a, .pad-btn) { transition: none; }
  :is(.btn, .bella-launch, .board-piece, .sys-tile, .cap, .rcpt-row a, .ent-tiles a, .pad-btn):active { transform: none; }
}

/* Hover, mouse only (calmed 2026-10-12, Hayden: "the hover looks clunky on a lot of elements"): cards stay put
   and take a soft tint or a solid ring, never a dashed ghost. Nothing lifts. The small piece inside drops half a
   cell in two steps. */
@media (hover: hover) {
  :is(.cap, .rcpt-row a):hover { box-shadow: 0 0 0 2px var(--ink, #1d2027); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hub-doors a:hover .hub-piece { transform: translateY(4px); transition: transform var(--m-step) steps(2, end); }
}
@media (prefers-reduced-motion: no-preference) {
  .hub-doors a:focus-visible .hub-piece { transform: translateY(4px); transition: transform var(--m-step) steps(2, end); }
}