/* ==========================================================================
   cs2stats — motion layer (loaded after style.css)
   Language: a Geiger counter. Quick, clicky, discrete ticks; nothing floats.
   - Almost all motion answers something the visitor did (press, sort, pick, ban).
   - One moment on page open: the hero score ticks up (motion.js).
   - The trefoil is the one "alive" element: dial-click on hover, spins while a page loads.
   Everything here is switched off by the reduced-motion block in style.css
   (and motion.js checks prefers-reduced-motion before animating anything).
   ========================================================================== */

:root {
    --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);      /* snappy settle */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* small overshoot for "pops" */
    --t-tap: 90ms;
    --t-fast: 160ms;
    --t-med: 260ms;
}

/* --- Page to page: cross-document view transitions (Chrome/Edge 126+, Safari 18.2+) ---
   The top bar holds still, the page swaps quickly, and active indicators slide to their new spot. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.mainnav a.is-active { view-transition-name: nav-active; }
nav.tabs a.is-active { view-transition-name: tab-active; }
.seg[aria-label="Match type"] a.is-active { view-transition-name: seg-type; }
.seg[aria-label="Time period"] a.is-active { view-transition-name: seg-period; }
.seg[aria-label="Stats view"] a.is-active { view-transition-name: seg-view; }
.map-strip .map-tile.is-active { view-transition-name: map-active; }

::view-transition-group(*) { animation-duration: var(--t-med); animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: 120ms ease-in both vt-out; }
::view-transition-new(root) { animation: 200ms var(--ease-out) both vt-in; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* --- The trefoil --- */
.wordmark-mark { transition: transform 520ms var(--ease-spring), filter var(--t-med) ease; }
/* A third of a turn looks identical on a trefoil: it reads as a dial clicking over */
.wordmark:hover .wordmark-mark, .wordmark:focus-visible .wordmark-mark { transform: rotate(120deg); filter: drop-shadow(0 0 10px var(--tox-glow)); }
/* Spins while the next page is loading (motion.js adds .is-leaving on link clicks and form submits) */
body.is-leaving .wordmark-mark { animation: tf-spin 700ms linear infinite; filter: drop-shadow(0 0 12px var(--tox-glow)); }
@keyframes tf-spin { to { transform: rotate(360deg); } }
/* Hidden: poke the logo on the home page five times */
body.is-meltdown .wordmark-mark { animation: tf-spin 180ms linear infinite; filter: drop-shadow(0 0 18px var(--tox)); }
body.is-meltdown::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 300;
    background: radial-gradient(circle at 50% 40%, transparent 30%, rgba(166, 242, 58, 0.22) 100%);
    animation: meltdown 1.4s ease-out both;
}
@keyframes meltdown { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 0.4; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* --- Press feedback: things give a little when you press them --- */
.btn { transition: transform var(--t-tap) var(--ease-out), box-shadow 0.15s ease, background-color 0.15s ease; }
.chip-btn, .pchip, .pcard, .vmap, .seg a, .map-tile, .team-tile-main, .choice .btn, .slot button, .sel button {
    transition: transform var(--t-tap) var(--ease-out), border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.15s ease;
}
.btn:active, .chip-btn:active, .seg a:active, .slot button:active { transform: scale(0.95); }
.pchip:active, .pcard:active:not(:disabled), .vmap:active:not(:disabled), .map-tile:active, .team-tile-main:active { transform: scale(0.97); }
.result { transition: background-color 0.12s ease, box-shadow var(--t-fast) ease, transform var(--t-tap) var(--ease-out); }
.result:not(.is-live):hover { box-shadow: inset 3px 0 0 var(--tox); }
.result:active { transform: scale(0.996); }

/* Search widens when you're using it */
@media (min-width: 900px) {
    .site-search input { transition: width var(--t-med) var(--ease-out), border-color 0.12s ease; }
    .site-search input:focus { width: 320px; }
}

/* Toast springs up instead of sliding */
.toast { transition: opacity 0.16s ease, transform 360ms var(--ease-spring); }

/* Copy buttons confirm in place */
.is-copied { border-color: var(--tox) !important; color: var(--tox-hi) !important; }

/* Advanced stats: the new columns flash in so you can see what appeared */
body.adv-anim.show-adv .adv { animation: adv-in 420ms var(--ease-out) both; }
@keyframes adv-in { from { opacity: 0; background-color: var(--tox-dim); } 40% { opacity: 1; background-color: var(--tox-dim); } }

/* Sorting: rows slide to their new place (FLIP in motion.js); the sorted column blinks once */
.sort-flash { animation: sort-flash 600ms ease-out; }
@keyframes sort-flash { from { background-color: var(--tox-dim); } }

/* --- The one page-open moment: hero score (motion.js ticks the digits) --- */
.hero.m-count .roundbar.wide { animation: bar-fill 620ms var(--ease-out) 80ms both; }
@keyframes bar-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero.m-count .spot-mvp, .hero.m-count .hero-caption { animation: settle-in 300ms var(--ease-out) 560ms both; }
.hero-digits .d.m-tick { animation: tick 90ms ease-out; }
@keyframes tick { from { transform: translateY(-3px); } }
@keyframes settle-in { from { opacity: 0; transform: translateY(4px); } }

/* --- Shared one-shot classes used by motion.js / tools.js --- */
.m-pop { animation: pop 320ms var(--ease-spring); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
.m-bump { animation: bump 300ms var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ========================== 10-mans ========================== */
/* A player taking a seat */
.slot.m-in { animation: seat-in 340ms var(--ease-spring) both, seat-glow 900ms ease-out; }
@keyframes seat-in { from { opacity: 0; transform: translateX(14px) scale(0.97); } }
@keyframes seat-glow { from { border-color: var(--tox); background-color: var(--tox-dim); } }

/* Ten in: the lobby goes critical, once */
@media (max-width: 900px) { .lobby-box { position: relative; } } /* style.css makes it static on narrow screens; the ring needs an anchor */
.lobby-box.m-critical::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 2px solid var(--tox); animation: critical 1100ms ease-out both;
}
@keyframes critical {
    0% { box-shadow: 0 0 0 0 var(--tox-glow), inset 0 0 0 0 var(--tox-glow); opacity: 1; }
    60% { opacity: 1; }
    100% { box-shadow: 0 0 0 26px rgba(166, 242, 58, 0), inset 0 0 40px 0 rgba(166, 242, 58, 0); opacity: 0; }
}
.lobby-box.m-critical .count-big .js-count { animation: bump 420ms var(--ease-spring); }

/* Whose turn it is: the banner slides in from that captain's side */
.turn.m-turn-a { animation: turn-in-a 300ms var(--ease-out); }
.turn.m-turn-b { animation: turn-in-b 300ms var(--ease-out); }
@keyframes turn-in-a { from { opacity: 0.4; transform: translateX(-16px); } }
@keyframes turn-in-b { from { opacity: 0.4; transform: translateX(16px); } }
.turn.is-done.m-done { animation: pop 420ms var(--ease-spring); }

/* A drafted player flying to their team */
.fly-ghost {
    position: fixed; z-index: 250; pointer-events: none; margin: 0;
    padding: 8px 12px; border-radius: var(--r-md); background: var(--raised); border: 1px solid var(--tox);
    color: var(--text); font-weight: 700; font-size: 0.95rem; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.fly-ghost.side-b { border-color: var(--ct); }
.team-col li.m-land { animation: land 520ms ease-out; }
@keyframes land { from { background-color: var(--tox-dim); } }
.team-col.side-b li.m-land { animation-name: land-b; }
@keyframes land-b { from { background-color: var(--ct-dim); } }

/* Veto: bans get stamped out, picks light up, the decider hums */
.vmap { transition: filter 360ms ease, border-color 0.12s ease, box-shadow 0.2s ease, transform var(--t-tap) var(--ease-out); }
.vmap.m-ban { animation: stamp 380ms var(--ease-out); }
@keyframes stamp { 0% { transform: scale(1.06); filter: none; } 35% { transform: scale(0.96); } 100% { transform: scale(1); } }
.vmap.m-pick { animation: picked 700ms var(--ease-out); }
@keyframes picked { 0% { transform: scale(0.97); box-shadow: inset 0 0 0 2px var(--tox), 0 0 0 0 var(--tox-glow); } 60% { transform: scale(1.02); } 100% { transform: scale(1); box-shadow: inset 0 0 0 2px var(--tox), 0 0 0 16px rgba(166, 242, 58, 0); } }
.vmap.m-decider { animation: hum 1200ms ease-in-out 2; }
@keyframes hum { 50% { box-shadow: inset 0 0 0 2px var(--hazard), 0 0 26px rgba(245, 217, 10, 0.35); } }

/* The coin flip */
.coin-stage {
    position: fixed; inset: 0; z-index: 260; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    background: rgba(8, 12, 9, 0.62); backdrop-filter: blur(2px); cursor: pointer;
    animation: settle-in 160ms ease-out both;
}
.coin-stage.is-out { animation: vt-out 200ms ease-in both; }
.coin { width: 148px; height: 148px; position: relative; transform-style: preserve-3d; perspective: 600px; }
.coin-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: coin-flip 1150ms cubic-bezier(0.25, 0.7, 0.3, 1) both; }
@keyframes coin-flip {
    0% { transform: translateY(0) rotateY(0deg); }
    45% { transform: translateY(-90px) rotateY(calc(var(--turn) * 0.55)); }
    100% { transform: translateY(0) rotateY(var(--turn)); }
}
.coin-face {
    position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--f-num); font-weight: 800; text-align: center; padding: 14px; line-height: 1.05;
    border: 4px solid rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.12), 0 12px 40px rgba(0, 0, 0, 0.5);
}
.coin-face b { font-size: 2.6rem; }
.coin-face small { font-size: 0.85rem; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-face.face-a { background: radial-gradient(circle at 35% 30%, var(--tox-hi), var(--tox) 55%, var(--tox-deep)); color: var(--on-tox); }
.coin-face.face-b { background: radial-gradient(circle at 35% 30%, #a9e6f7, var(--ct) 55%, #2f7f9a); color: #062029; transform: rotateY(180deg); }
.coin-caption { font-family: var(--f-num); font-weight: 700; font-size: 1.6rem; color: var(--text); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); animation: settle-in 240ms var(--ease-out) 1050ms both; }
.coin-hint { font-size: 0.8rem; color: var(--muted); animation: settle-in 200ms ease-out 1200ms both; }