/* Shared look for the Christmas Hash pages. */
html { scroll-behavior: smooth; }
body { background-color: #09090b; }

@keyframes floatSlow { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2%, -4%) scale(1.05); } }
@keyframes logoIntro { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes waveDrift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes snowFall { 0% { transform: translate3d(0, -12vh, 0); } 100% { transform: translate3d(28px, 108vh, 0); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes shineSweep { 0% { transform: translateX(-140px); } 55%, 100% { transform: translateX(380px); } }
@keyframes glowPulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes confetti { 0% { transform: translate3d(0, -20px, 0) rotate(0); opacity: 1; } 100% { transform: translate3d(var(--dx, 0), 105vh, 0) rotate(var(--rot, 540deg)); opacity: .9; } }

.blob { animation: floatSlow 9s ease-in-out infinite; }
.logo-bob { animation: bob 6s ease-in-out infinite; }
.glow-pulse { animation: glowPulse 5s ease-in-out infinite; }
.pop { animation: pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }

.snowflake {
  position: absolute; top: 0; border-radius: 9999px; background: #fff;
  animation-name: snowFall; animation-timing-function: linear; animation-iteration-count: infinite;
  pointer-events: none;
}
.confetti-bit { position: fixed; top: 0; width: 9px; height: 14px; z-index: 80; pointer-events: none; animation: confetti 3.2s ease-in forwards; }

/* ---- Intro (about 3.2s) ---- */
@keyframes spWolf { 0% { opacity: 0; transform: scale(.86); filter: blur(14px); } 30%, 62% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(1.18); filter: blur(10px); } }
@keyframes spPre { 0% { opacity: 0; letter-spacing: .9em; } 40% { opacity: 0; } 100% { opacity: .9; letter-spacing: .38em; } }
@keyframes spWipe { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes spStreak { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes spTitleSettle { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes spBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spFade { from { opacity: 0; } to { opacity: .7; } }
@keyframes spGlow { 0% { opacity: 0; transform: scale(.5); } 45% { opacity: .9; } 100% { opacity: .55; transform: scale(1); } }
.sp-half { position: absolute; top: 0; bottom: 0; width: 50.2%; transition: transform .95s cubic-bezier(.75, 0, .2, 1) .3s; will-change: transform; }
.sp-left { left: 0; }
.sp-right { right: 0; }
.sp-seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, #f0b84a 30%, #fff8ec 50%, #f0b84a 70%, transparent); box-shadow: 0 0 22px 4px rgba(240,184,74,.7); opacity: 0; transform: scaleY(.2); transition: opacity .25s ease, transform .5s ease; }
.sp-glow { position: absolute; width: min(90vw, 44rem); aspect-ratio: 1; border-radius: 9999px; background: radial-gradient(closest-side, rgba(240,184,74,.28), rgba(225,29,46,.16) 55%, transparent 72%); animation: spGlow 2.6s ease-out both; }
.sp-wolf { animation: spWolf 1.75s cubic-bezier(.4, 0, .2, 1) .15s both; }
.sp-pre { animation: spPre 1.5s ease-out .25s both; }
.sp-title { clip-path: inset(0 100% 0 0); animation: spWipe .95s cubic-bezier(.6, 0, .25, 1) 1.55s forwards, spTitleSettle 1.5s ease-out 1.55s both; }
.sp-streak { position: absolute; top: -10%; bottom: -10%; width: 4px; margin-left: -2px; left: 0; opacity: 0; border-radius: 4px;
  background: linear-gradient(180deg, transparent, #fff8ec 20%, #fff 50%, #fff8ec 80%, transparent);
  box-shadow: 0 0 18px 6px rgba(240,184,74,.85), 0 0 60px 18px rgba(225,29,46,.45);
  animation: spStreak .95s cubic-bezier(.6, 0, .25, 1) 1.55s both; }
.sp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: 0 50%; background: linear-gradient(90deg, #e11d2e, #f0b84a, #1f9d3a); animation: spBar 3s linear both; }
.sp-skip { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #a1a1aa; opacity: 0; animation: spFade .6s ease 1s both; }
.sp-content { transition: opacity .35s ease, transform .5s ease, filter .5s ease; }
#splash.splash-hide { pointer-events: none; }
#splash.splash-hide .sp-content, #splash.splash-hide .sp-bar, #splash.splash-hide .sp-skip { opacity: 0; transform: scale(1.12); filter: blur(6px); }
#splash.splash-hide .sp-left { transform: translateX(-101%); }
#splash.splash-hide .sp-right { transform: translateX(101%); }
#splash.splash-hide .sp-seam { opacity: 1; transform: scaleY(1); transition-delay: 0s; }
#splash.splash-out .sp-seam { opacity: 0; transition: opacity .3s ease; }

.reveal { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .9s ease, transform .9s ease; }
body.loaded .reveal { opacity: 1; transform: translateY(0) scale(1); }
body.loaded .reveal.d1 { transition-delay: .05s; }
body.loaded .reveal.d2 { transition-delay: .15s; }
body.loaded .reveal.d3 { transition-delay: .25s; }

/* Glass cards on the dark background */
.glass { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(6px); }

/* Medal + jersey showcase */
.medal-sway { transform-origin: 50% 0; animation: sway 6.5s ease-in-out infinite; }
.medal-shine { animation: shineSweep 4.8s ease-in-out infinite; }
.jersey-face { transition: opacity .45s ease, transform .45s ease; transform-origin: 50% 50%; }
.jersey-face.is-hidden { opacity: 0; transform: scale(.94); pointer-events: none; }
.showcase-stage { position: relative; }
.showcase-stage::before {
  content: ""; position: absolute; inset: 6% 8%; border-radius: 9999px; filter: blur(40px); opacity: .55;
  background: radial-gradient(closest-side, var(--halo, rgba(225,29,46,.55)), transparent 72%); animation: glowPulse 5s ease-in-out infinite;
}
.showcase-stage > * { position: relative; }
.seg-btn { transition: background-color .15s, color .15s; }
.seg-btn[aria-pressed="true"] { background: #e11d2e; color: #fff; }

/* Choice cards (register + pay / pre-register) */
.path-card { cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.path-card:has(input:checked) { border-color: #e11d2e; background: #fff5f6; box-shadow: 0 0 0 3px rgba(225, 29, 46, .12); }
.path-card:has(input:focus-visible) { outline: 3px solid #f0b84a; outline-offset: 2px; }

.stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.count-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }

/* Ticket "pass" look for the check-in page */
.ticket-notch { position: relative; }
.ticket-notch::before, .ticket-notch::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; background: #09090b; border-radius: 9999px; transform: translateY(-50%); }
.ticket-notch::before { left: -13px; }
.ticket-notch::after { right: -13px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #splash { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .snowflake, .logo-bob, .medal-sway, .medal-shine, .glow-pulse, .showcase-stage::before, .pop, .confetti-bit { animation: none; }
}