/* Motion, loaded last. Only opacity, transform, colour, shadow and stroke are
 * animated; end states are the resting layout; the first screen does not fade in
 * (LCP). Everything below respects prefers-reduced-motion. */

@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-error) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes pulse-ok { 0% { box-shadow: 0 0 0 0 rgb(53 196 139 / .6); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes draw-in { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes bump { 40% { transform: scale(1.35); } }
@keyframes picked { 40% { transform: scale(1.06); } }
@keyframes odd-up { 0%, 45% { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-tint); } }
@keyframes odd-down { 0%, 45% { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-tint); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(16px) scale(.97); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash-score { 0%, 30% { color: var(--color-brand); text-shadow: 0 0 24px rgb(216 243 92 / .5); } }
@keyframes belt { to { transform: translateX(-50%); } }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes bar { from { width: 0; } to { width: 100%; } }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* scroll reveal: content is visible without JS; JS opts sections in */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }

/* Height is never animated: a row expands through grid-template-rows. */
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
.collapsible.is-open { grid-template-rows: 1fr; }
.collapsible > * { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-base); }
.collapsible.is-open > * { visibility: visible; transition-delay: 0s; }
/* closed content leaves the focus order and the accessibility tree entirely */
.collapsible:not(.is-open) > * > * { display: none; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .wire__belt { animation: none !important; }
}