/* Huntrez Revamp — motion & effects layer (loaded after site.css).
   Everything here is decorative: with prefers-reduced-motion it all switches off. */

:root {
  --pink: #ff4fd8;
  --violet: #8b5cff;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Ambient background ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-fx .blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: 0.32; will-change: transform; }
.bg-fx .b1 { top: -18vmax; left: -12vmax; background: radial-gradient(circle, #00e5f5 0%, transparent 62%); animation: drift1 26s ease-in-out infinite alternate; }
.bg-fx .b2 { top: 8vmax; right: -16vmax; background: radial-gradient(circle, var(--violet) 0%, transparent 62%); animation: drift2 32s ease-in-out infinite alternate; opacity: 0.26; }
.bg-fx .b3 { bottom: -22vmax; left: 22vw; background: radial-gradient(circle, var(--pink) 0%, transparent 60%); animation: drift3 38s ease-in-out infinite alternate; opacity: 0.16; }
.bg-fx .grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-12vmax, 14vmax) scale(0.9); } }
@keyframes drift3 { to { transform: translate(-16vmax, -8vmax) scale(1.15); } }

/* ---------- Top bar ---------- */
/* The bar is part of the page flow, so slimming it alone would pull the whole page up. The browser then moves the
   scroll position to make up for it, which can drop it back under the "scrolled" threshold, so the bar grows, the
   page moves back, and it flips sizes many times a second (the page "vibrates"). A spacer under the bar grows by
   exactly what the padding loses, on the same curve, so the page never moves. */
.topbar { --bar-pad-compact: 8px; transition: background 0.3s ease, box-shadow 0.3s ease, margin-bottom 0.3s var(--ease-out); }
.topbar-inner { transition: padding 0.3s var(--ease-out); }
.topbar.is-scrolled { margin-bottom: calc(2 * (var(--bar-pad) - var(--bar-pad-compact))); background: rgba(7, 7, 28, 0.78); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.topbar.is-scrolled .topbar-inner { padding-top: var(--bar-pad-compact); padding-bottom: var(--bar-pad-compact); }
.brand img { transition: transform 0.5s var(--ease-spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }

/* ---------- Hero entrance ---------- */
.hero-copy > * { opacity: 0; transform: translateY(18px); animation: rise 0.8s var(--ease-out) forwards; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.3s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.42s; }
.hero .liverace { opacity: 0; transform: translateY(24px) scale(0.98); animation: rise 0.9s var(--ease-out) 0.35s forwards; }
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: inline-block; transform: translateY(105%); animation: line-up 0.9s var(--ease-out) forwards; }
.hero-line:nth-child(2) > span { animation-delay: 0.12s; }
.hero-line:nth-child(3) > span { animation-delay: 0.24s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }

/* Live dot pulse */
.status-dot { position: relative; }
.status-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--live-dot); opacity: 0; animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
.pill-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--live-dot); animation: blink 1.6s ease-in-out infinite; }
.pill-soon { animation: soon-glow 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes soon-glow { 50% { box-shadow: 0 0 0 4px rgba(255, 207, 90, 0.12); } }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); transition: left 0.6s var(--ease-out);
}
.btn-primary:hover::after { left: 120%; }
.btn-primary { box-shadow: 0 0 0 0 rgba(0, 229, 245, 0); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(0, 229, 245, 0.35); }
.icon-btn { transition: transform 0.25s var(--ease-spring), background 0.2s ease, box-shadow 0.2s ease; }
.icon-btn:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 20px rgba(0, 229, 245, 0.18); }

/* ---------- Live ticker ---------- */
.ticker { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(15, 16, 41, 0.6); }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; white-space: nowrap; color: var(--text-2); font-weight: 600; }
.ticker-item img { height: 18px; width: auto; max-width: 90px; object-fit: contain; }
.ticker-item strong { color: var(--text); }
.ticker-item .sep { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 28px 28px 28px 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--line); }
.stat strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat:nth-child(2) strong { color: var(--gold); }
.stat > span { display: block; margin-top: 8px; color: var(--muted); font-weight: 600; } /* the label only, not the number's own span */
/* Phones: the stats stack in one column, so they all line up on the left with a rule between them. */
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 22px 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--line); }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--delay, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Cards: lift + cursor spotlight ---------- */
.spotlight { position: relative; isolation: isolate; transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.35s ease, opacity 0.7s var(--ease-out); }
.spotlight::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 229, 245, 0.14), transparent 60%);
}
.reveal.spotlight { transition: opacity 0.7s var(--ease-out) var(--delay, 0s), transform 0.7s var(--ease-out) var(--delay, 0s), border-color 0.3s ease, box-shadow 0.35s ease; }
.reveal.spotlight.is-in { transition: opacity 0.7s var(--ease-out) var(--delay, 0s), transform 0.35s var(--ease-out) var(--delay, 0s), border-color 0.3s ease, box-shadow 0.35s ease; }
.spotlight:hover { transform: translateY(-6px); border-color: rgba(0, 229, 245, 0.35); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 229, 245, 0.08); }
.spotlight:hover::before { opacity: 1; }
.race-head img, .bonus img { transition: transform 0.4s var(--ease-spring); }
.spotlight:hover .race-head img, .spotlight:hover.bonus img { transform: scale(1.06); }

/* Progress: fill on reveal + moving sheen */
.progress > span { position: relative; overflow: hidden; transform-origin: left; }
.progress > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: translateX(-100%); animation: sheen 2.6s ease-in-out infinite; }
.reveal:not(.is-in) .progress > span { transform: scaleX(0); }
.reveal.is-in .progress > span { animation: fill 1.2s var(--ease-out) 0.25s backwards; }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }

.chip { transition: transform 0.2s var(--ease-spring), background 0.2s ease; }
.chip:hover { transform: translateY(-2px); background: var(--surface-3); }
/* Live race lanes: the page's one orchestrated moment */
.lanes.animate .lane-fill { animation: lane-run 1.3s var(--ease-out) backwards; animation-delay: calc(var(--i) * 110ms + 0.6s); }
.lanes.animate .lane-rank, .lanes.animate .lane-name, .lanes.animate .lane-wager, .lanes.animate .lane-prize { animation: rise 0.6s var(--ease-out) backwards; animation-delay: calc(var(--i) * 110ms + 0.5s); }
@keyframes lane-run { from { transform: scaleX(0); } }
.lane-1 .lane-fill::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(255, 207, 90, 0.5)); animation: leader-glow 2.4s ease-in-out infinite; }
@keyframes leader-glow { 50% { opacity: 0.3; } }
.lr-tab { transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-spring); }
.lr-tab:hover { transform: translateY(-1px); }

/* Steps: the path draws itself, then each step settles in */
.steps.reveal { opacity: 1; transform: none; }
.steps .step { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: calc(var(--n) * 0.45s + 0.2s); }
.steps.is-in .step { opacity: 1; transform: none; }
.steps.is-in .step-num { animation: node-pop 0.7s var(--ease-spring) backwards; animation-delay: calc(var(--n) * 0.45s + 0.2s); }
@keyframes node-pop { from { transform: scale(0.4); } }

/* Social CTAs: glow on hover */
.cta-discord:hover { box-shadow: 0 12px 30px rgba(88, 101, 242, 0.45); }
.cta-kick:hover { box-shadow: 0 12px 30px rgba(83, 252, 24, 0.35); }
.cta-x:hover { box-shadow: 0 12px 30px rgba(255, 255, 255, 0.12); }
.community { position: relative; overflow: hidden; }
.community { border-color: transparent; }
.community::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(0, 229, 245, 0.9) 78%, rgba(255, 79, 216, 0.9) 90%, transparent 100%); animation: spin 8s linear infinite; z-index: 0; }
.community::after { content: ''; position: absolute; inset: 2px; border-radius: 22px; background: linear-gradient(160deg, #12143a, var(--surface) 60%); z-index: 0; }
.community > * { position: relative; z-index: 1; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Leaderboard page ---------- */
.clock-cell { position: relative; overflow: hidden; background: linear-gradient(180deg, #13143a, var(--surface)); }
.clock-cell::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.35); }
.clock-cell strong.tick { animation: flip 0.45s var(--ease-out); }
@keyframes flip { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.board-head .board-title > * { animation: rise 0.7s var(--ease-out) backwards; }
.board-head .board-title > *:nth-child(2) { animation-delay: 0.08s; }
.board-head .board-title > *:nth-child(3) { animation-delay: 0.16s; }
.board-head .clock { animation: rise 0.7s var(--ease-out) 0.2s backwards; }

.podium.animate .podium-spot { animation: podium-up 0.8s var(--ease-spring) backwards; }
.podium.animate .second { animation-delay: 0.15s; }
.podium.animate .first { animation-delay: 0.3s; }
.podium.animate .third { animation-delay: 0.45s; }
@keyframes podium-up { from { opacity: 0; transform: translateY(40px) scale(0.96); } }
.podium-spot { transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease; }
.podium-spot:hover { transform: translateY(-4px); }
.podium-spot.first { position: relative; overflow: hidden; box-shadow: 0 0 40px rgba(255, 207, 90, 0.12); }
.podium-spot.first::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255, 207, 90, 0.18), transparent 60%); pointer-events: none; }
.crown { display: block; width: 34px; height: 34px; margin: 0 auto 4px; color: var(--gold); filter: drop-shadow(0 0 10px rgba(255, 207, 90, 0.6)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-4deg); } }
.first .podium-prize { position: relative; overflow: hidden; }
.first .podium-prize::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

.standings.animate tbody tr { animation: row-in 0.5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms + 0.4s); }
@keyframes row-in { from { opacity: 0; transform: translateX(-10px); } }
.standings tbody tr { transition: background 0.2s ease; }
.standings tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.standings tr.is-match td { animation: match 1.2s ease-out; }
@keyframes match { 0% { background: rgba(0, 229, 245, 0.3); } }

.tab { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s var(--ease-spring); }
.tab:hover { transform: translateY(-1px); }
.race-switch a { transition: background 0.2s ease, color 0.2s ease; }
.race-switch a:hover { background: var(--surface-3); color: var(--text); }
.past-item { transition: transform 0.3s var(--ease-out), border-color 0.3s ease; }
.past-item:hover { transform: translateX(4px); border-color: rgba(0, 229, 245, 0.3); }
.board-main > * { animation: rise 0.5s var(--ease-out) backwards; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-fx .blob { animation: none; }
  .hero-copy > *, .hero .liverace, .hero-line > span, .board-head .board-title > *, .board-head .clock, .board-main > * { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .steps .step { opacity: 1; transform: none; }
  .steps::after, .step::after { transform: none; }
  .lanes .lane-fill, .lanes .lane-rank, .lanes .lane-name, .lanes .lane-wager, .lanes .lane-prize { animation: none; }
  .community::before { display: none; }
}