/* Motion — everything that moves: press feedback, ripples, page and modal
   transitions, the draft board's pick animations, tile flips, confetti.
   Loaded last on every page; all of it switches off under reduced motion. */

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, 1.35, .4, 1);
}
html { scroll-behavior: smooth; }

/* ------------------------------------------------------------ pages */
body { animation: pageIn .38s var(--ease-out) both; }
body.leaving { opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ press + ripple */
.btn, .tb, .seg button, .res, .roomrow, .pcard, .mcard, .tile, .cell.filled, .cell.now,
.top nav a, .brand, .jumbo, .acard, .srow, .brow, .throw {
  transition: transform .18s var(--ease-out), box-shadow .2s ease, background-color .2s ease,
              border-color .2s ease, color .2s ease, opacity .2s ease, filter .2s ease;
}
.btn, .tb, .seg button, .res, .roomrow, .pcard, .mcard, .tile, .cell.filled, .cell.now { position: relative; overflow: hidden; }
.btn:active:not(:disabled), .tb:active:not(:disabled), .seg button:active:not(:disabled),
.res:active:not(:disabled), .roomrow:active, .mcard:active, .tile:active:not(:disabled),
.cell.filled:active, .cell.now:active, button.pcard:active { transform: scale(.965); transition-duration: .08s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:not(.ghost):hover:not(:disabled) { box-shadow: 0 8px 24px -6px rgba(255, 122, 0, .6); }
.btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .03); }
.tb:hover:not(:disabled) .ic { transform: scale(1.08); }
.tb .ic { transition: transform .2s var(--ease-spring); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
.brand .mark { transition: transform .3s var(--ease-spring); }
.top nav a { position: relative; }
.top nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.top nav a:hover::after { transform: scaleX(1); }
.top nav a.on::after { display: none; }
.seg button.on { animation: segOn .3s var(--ease-spring); }
@keyframes segOn { from { transform: scale(.92); } to { transform: none; } }
.res:hover:not(:disabled) { transform: translateX(3px); }
.cell.filled:hover { transform: translateY(-1px); }

.rpl { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .32;
  background: currentColor; animation: ripple .6s var(--ease-out) forwards; }
.btn:not(.ghost) .rpl { background: #fff; opacity: .4; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ------------------------------------------------------------ modals + toast */
.modal-bg.open { animation: fadeIn .2s ease both; }
.modal-bg.closing { animation: fadeOut .18s ease both; }
.modal.open { animation: modalIn .32s var(--ease-spring) both; }
.modal.closing { display: flex; animation: modalOut .17s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes modalOut { from { opacity: 1; transform: translateX(-50%); } to { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.97); } }
.toast { transition: transform .35s var(--ease-spring), opacity .2s ease; }

/* staggered lists: results, standings, best picks */
.stag { animation: stagIn .32s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.srow.stag { animation-duration: .5s; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes stagIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.srow:first-child .rk.g { animation: crown 1.2s var(--ease-spring) .5s both; }
@keyframes crown { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }

/* ------------------------------------------------------------ draft board */
.cell.now { animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 rgba(255,122,0,0); }
                     50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 26px -4px rgba(255,122,0,.55); } }
.cell.flash { animation: drop .7s var(--ease-spring) both; }
.cell.flash .pic { animation: picIn .6s var(--ease-spring) .05s both; }
.cell.flash .pts { animation: ptsGlow 1.4s ease .2s both; }
@keyframes drop { 0% { transform: scale(1.12); background: rgba(255,176,0,.35); box-shadow: 0 0 0 2px var(--led); }
                  60% { transform: scale(.98); } 100% { transform: none; background: var(--cell); box-shadow: none; } }
@keyframes picIn { from { transform: translateY(-14px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ptsGlow { 0% { text-shadow: 0 0 18px rgba(255,176,0,.9); } 100% { text-shadow: none; } }
.rlabel .ck { animation: ckPop .4s var(--ease-spring) both; }
@keyframes ckPop { from { transform: scale(0); } to { transform: none; } }
.hplayer .sc.bump { animation: bump .5s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.18); color: #fff; } }
.hplayer.turn .av { animation: avTurn 1.6s ease-in-out infinite; }
@keyframes avTurn { 50% { transform: translateY(-2px); box-shadow: 0 6px 14px -4px var(--pc); } }
.cell.bad { animation: shake .5s; }

/* ------------------------------------------------------------ tiles, darts */
.tile.flip { animation: flip .55s var(--ease-out) both; }
@keyframes flip { 0% { transform: perspective(600px) rotateY(90deg); opacity: .4; } 100% { transform: none; opacity: 1; } }
.itile:hover:not(:disabled) { transform: translateY(-3px) rotate(-.6deg); }
.tile.imp { animation: impHit .7s var(--ease-out) both; }
@keyframes impHit { 0% { transform: scale(1.12); box-shadow: 0 0 0 4px var(--bad), 0 0 40px rgba(255,74,74,.7); } 100% { transform: none; } }
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
                   30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.redflash { animation: redflash .7s ease both; }
@keyframes redflash { 0% { box-shadow: inset 0 0 0 9999px rgba(255,74,74,.18); } 100% { box-shadow: none; } }
.dart { transition: background .3s ease, transform .3s var(--ease-spring); }
.dart.thrown { animation: dartFly .5s var(--ease-out) both; }
@keyframes dartFly { 0% { transform: translateY(0); } 40% { transform: translateY(-26px) rotate(12deg); opacity: .3; } 100% { transform: none; } }
.throw.pop { animation: throwIn .5s var(--ease-spring) both; }
@keyframes throwIn { from { opacity: 0; transform: translateX(-24px) scale(.96); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ lobby cards */
.pcard.pop { animation: popIn .5s var(--ease-spring) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.7) translateY(10px); } to { opacity: 1; transform: none; } }
.codeboard .code span { animation: flick .9s steps(3) both; }
.codeboard .code span:nth-child(2) { animation-delay: .08s } .codeboard .code span:nth-child(3) { animation-delay: .16s }
.codeboard .code span:nth-child(4) { animation-delay: .24s }
@keyframes flick { 0% { opacity: 0; } 33% { opacity: .8; } 50% { opacity: .2; } 100% { opacity: 1; } }
.ledcode span.pulse { animation: ledIn .3s var(--ease-spring); }
@keyframes ledIn { from { transform: scale(.85); } to { transform: none; } }

/* ------------------------------------------------------------ confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .confetti { display: none; }
}

/* ------------------------------------------------------------ type weights
   Teko for every number, Barlow Condensed for small labels (see --digits and
   --label in app.css). Weights live here so the font swap is one place. */
.led, .clock, .hplayer .sc, .cell .pts, .cell.pencell, .statgrid b, .fbreak b, .srow .pt, .brow .pt,
.howto td:last-child, .counter, .tile .v, .codebig, .roomcode, .roomrow .rc, input.code, .dartscore .big,
.throw .tv, .quickjoin input, .ledcode span, .codeboard .code span {
  font-weight: 600; letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.pill, .mode .tag, .cell.now, .tile .tag, .ticker .tk, .home-hero .kick, .jumbo .jl, .sechead span,
.mcard .mtag, .mcard .today b, .namebar .nl, .roomrow .st, .codeboard .k, .panel h3.ph small {
  font-weight: 700; text-transform: uppercase;
}