/* Motion: transitions and effects for the public site. Loaded after site.css. */

/* Race change: three slanted slabs sweep across, hold while the next race loads, then sweep off. */
.wipe { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.wipe i { position: absolute; top: -5%; bottom: -5%; left: -20%; width: 140%; transform: translateX(-135%) skewX(-14deg); }
.wipe i:nth-child(1) { background: var(--accent); }
.wipe i:nth-child(2) { background: var(--ink); }
.wipe i:nth-child(3) { background: #07080d; }
.wipe.on i, .wipe.out i { transition: transform 0.55s cubic-bezier(0.75, 0, 0.2, 1); }
.wipe.on i { transform: translateX(0) skewX(-14deg); }
.wipe.on i:nth-child(2) { transition-delay: 0.07s; }
.wipe.on i:nth-child(3) { transition-delay: 0.14s; }
.wipe.out i { transform: translateX(135%) skewX(-14deg); }
.wipe.out i:nth-child(2) { transition-delay: 0.07s; }
.wipe.out i:nth-child(1) { transition-delay: 0.14s; }
.wipe b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(34px, 6vw, 84px) var(--cond); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0; transition: opacity 0.2s; }
.wipe.on b { opacity: 1; transition-delay: 0.35s; }
.wipe b::after { content: ""; position: absolute; left: 50%; top: calc(50% + 0.75em); width: 120px; height: 5px; margin-left: -60px; background: var(--accent); animation: load 0.9s ease-in-out infinite alternate; }
@keyframes load { from { transform: scaleX(0.15); } to { transform: scaleX(1); } }

/* GO and the winning moment: the edges of the screen flare in the course colour. */
.flash { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, var(--accent) 130%); }
.flash.fire { animation: flare 0.8s ease-out; }
.flash.win { background: radial-gradient(ellipse at center, transparent 30%, var(--gold) 125%); animation: flare 1.4s ease-out; }
@keyframes flare { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Camera cut: a quick whip. */
.stage.whip canvas:first-child { animation: whip 0.3s ease-out; }
@keyframes whip { 0% { filter: blur(16px) brightness(1.35); transform: scale(1.07); } 100% { filter: none; transform: none; } }

/* Title card builds piece by piece every time a race loads. */
.opener.in .kicker { animation: reveal 0.5s 0.15s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.opener.in h1 { animation: rise 0.75s 0.25s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.opener.in .facts li { animation: rise 0.5s backwards; }
.opener.in .facts li:nth-child(1) { animation-delay: 0.6s; }
.opener.in .facts li:nth-child(2) { animation-delay: 0.68s; }
.opener.in .facts li:nth-child(3) { animation-delay: 0.76s; }
.opener.in .actions > * { animation: slide 0.45s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.opener.in .actions > :nth-child(1) { animation-delay: 0.85s; }
.opener.in .actions > :nth-child(2) { animation-delay: 0.93s; }
.opener.in .actions > :nth-child(3) { animation-delay: 1.01s; }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }

/* Timing tower: rows deal in at GO, and a row flashes green when it gains a place. */
body[data-state=racing] .tower li { animation: reveal 0.4s calc(var(--i, 0) * 45ms + 0.15s) backwards; }
.tower li b { transition: background 0.4s, color 0.4s; }
.tower li.gain b { background: #2fd27e; color: #04140b; transition: none; }
.tower li.gain { box-shadow: inset 0 0 0 1px #2fd27e; }

/* "New leader" plate. */
.toast { position: fixed; left: 18px; bottom: calc(var(--tape) + var(--tabbar) + 74px); z-index: 4; display: flex; align-items: center; gap: 9px; padding-right: 26px; background: var(--ink); color: var(--accent-ink);
  font: 800 22px var(--cond); text-transform: uppercase; letter-spacing: 0.04em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transform: translateX(-115%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toast.show { transform: none; }
.toast b { background: var(--accent); align-self: stretch; display: flex; align-items: center; gap: 4px; padding: 7px 12px; }
.toast span { text-transform: none; }

/* Panel: arrives as a solid slab of the course colour that peels back; contents deal in; title rolls on a tab change. */
.panel::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--accent); transform: scaleX(0); transform-origin: right; pointer-events: none; }
.panel.open::before { animation: peel 0.6s cubic-bezier(0.75, 0, 0.2, 1); }
.panel.swap::before { animation: peel2 0.45s cubic-bezier(0.75, 0, 0.2, 1); }
@keyframes peel { 0%, 35% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes peel2 { 0% { transform: scaleX(0); transform-origin: left; } 45% { transform: scaleX(1); transform-origin: left; } 46% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.panel section.on > * { animation: rise 0.45s backwards cubic-bezier(0.2, 0.8, 0.2, 1); animation-delay: 0.3s; }
.panel section.on > :nth-child(2) { animation-delay: 0.36s; }
.panel section.on > :nth-child(3) { animation-delay: 0.42s; }
.panel section.on > :nth-child(4) { animation-delay: 0.48s; }
.panel section.on > :nth-child(5) { animation-delay: 0.54s; }
.panel section.on > :nth-child(n+6) { animation-delay: 0.6s; }
.sheet tbody tr { animation: slide 0.35s backwards; }
.sheet tbody tr:nth-child(1) { animation-delay: 0.04s; }
.sheet tbody tr:nth-child(2) { animation-delay: 0.08s; }
.sheet tbody tr:nth-child(3) { animation-delay: 0.12s; }
.sheet tbody tr:nth-child(4) { animation-delay: 0.16s; }
.sheet tbody tr:nth-child(5) { animation-delay: 0.2s; }
.sheet tbody tr:nth-child(6) { animation-delay: 0.24s; }
.sheet tbody tr:nth-child(7) { animation-delay: 0.28s; }
.sheet tbody tr:nth-child(8) { animation-delay: 0.32s; }
.sheet tbody tr:nth-child(n+9) { animation-delay: 0.36s; }
#panelTitle.roll { animation: roll 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes roll { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
.panel > header { overflow: hidden; }

/* Small touches: a glint across buttons, an underline that grows on the active tab, a pop when the status changes. */
.cta { position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); }
.cta:hover::after { left: 140%; transition: left 0.55s; }
.tabs button { position: relative; border-bottom: 0; white-space: nowrap; }
.tabs button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tabs button.on::after, .tabs button:hover::after { transform: scaleX(1); }
.state.pop { animation: pop 0.35s; }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: none; } }
.copied { background: #2fd27e !important; color: #04140b !important; }

/* Podium: three plates rise when the race is decided, and the marbles drop onto them. */
.podium { position: fixed; left: 50%; bottom: calc(var(--tape) + var(--tabbar) + 72px); z-index: 4; display: flex; align-items: flex-end; gap: 6px; transform: translateX(-50%); pointer-events: none; visibility: hidden; }
.podium.show { visibility: visible; }
.pod { position: relative; width: clamp(96px, 13vw, 176px); background: var(--plate); border-top: 7px solid var(--ink); display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 4px; font-family: var(--cond); }
.pod.p1 { height: clamp(150px, 27vh, 260px); border-top-color: var(--gold); }
.pod.p2 { height: clamp(112px, 20vh, 190px); }
.pod.p3 { height: clamp(92px, 16vh, 152px); }
.pod b { font: 800 clamp(46px, 7vw, 100px)/0.95 var(--cond); }
.pod.p1 b { color: var(--gold); }
.pod.p2 b { font-size: clamp(38px, 5.4vw, 76px); }
.pod.p3 b { font-size: clamp(30px, 4.2vw, 56px); }
.pod em { font-style: normal; font-weight: 700; font-size: clamp(15px, 1.6vw, 23px); font-variant-numeric: tabular-nums; }
.pod span { font: 600 14px var(--text); max-width: 100%; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orb { position: absolute; left: 50%; bottom: calc(100% + 12px); width: clamp(56px, 7vw, 100px); aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 32% 28%, #fff 0 5%, var(--c2) 22%, var(--c1) 62%, #000 150%); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55); }
.podium.show .pod { animation: podUp 0.7s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.podium.show .p1 { animation-delay: 0.18s; }
.podium.show .p3 { animation-delay: 0.36s; }
.podium.show .orb { animation: orbDrop 0.6s 0.85s backwards cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes podUp { from { transform: translateY(130%); } }
@keyframes orbDrop { from { transform: translate(-50%, -320%); opacity: 0; } }
@media (max-width: 860px) { .podium { bottom: calc(var(--tabbar) + 118px); } }

/* A marble that has left the track. */
.tower li.gone { opacity: 0.55; }
.tower li.gone em { color: var(--live); font-weight: 800; text-transform: uppercase; }
.tower li.gone b { background: var(--live); color: #fff; }

/* A marble with no name is shown as a strip of its colours. */
.strip { display: inline-block; width: 74px; height: 9px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.tower .dot { width: 16px; height: 16px; }

/* Find-your-heat search. */
.finder { display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--dim); }
.finder input { background: none; border: 0; padding: 6px 0; width: 132px; font: 600 16px var(--text); color: var(--ink); outline: none; }
.finder:focus-within { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.finder.miss { animation: shake 0.4s; box-shadow: inset 0 -3px 0 var(--live); }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.finder.big { background: var(--plate); border: 1px solid var(--rule); padding: 0 0 0 14px; margin-bottom: 12px; width: min(420px, 100%); font-size: 20px; }
.finder.big input { flex: 1; width: auto; font-size: 20px; padding: 11px 0; }
.finder.big button { border: 0; background: var(--accent); color: var(--accent-ink); align-self: stretch; padding: 0 18px; font-size: 18px; display: grid; place-items: center; }
.opener.in .finder.big { animation: slide 0.45s 0.8s backwards cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (max-width: 860px) { .topbar .finder { display: none; } .toast { left: 8px; bottom: calc(var(--tabbar) + 112px); font-size: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .wipe i, .wipe.on i, .wipe.out i, .toast, .tabs button::after { transition: none; }
  .opener.in *, .panel section.on > *, .sheet tbody tr, .panel::before, .panel.open::before, .panel.swap::before, #panelTitle.roll, .flash.fire, .flash.win, .stage.whip canvas:first-child, body[data-state=racing] .tower li, .state.pop { animation: none; }
}