:root {
  color-scheme: dark;
  --background: #050607;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body { min-width: 320px; min-height: 100svh; margin: 0; overflow-x: hidden; background: var(--background); color: #f6f6f4; }

.scene, .scene > * { position: absolute; pointer-events: none; }
.scene { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse 62% 38% at 50% 98%, rgba(33,44,38,.32), transparent 78%), var(--background); }
.scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,7,.12), transparent 42%, rgba(5,6,7,.17)); }
.floodlight { width: min(56vw,760px); height: 70vh; top: -33vh; filter: blur(24px); opacity: .34; transform-origin: top center; background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(239,246,243,.10) 11deg, rgba(243,250,247,.21) 18deg, transparent 28deg); }
.floodlight-left { left: -12vw; transform: rotate(-25deg); animation: light-sway 16s ease-in-out infinite alternate; }
.floodlight-right { right: -12vw; transform: rotate(25deg) scaleX(-1); animation: light-sway-right 18s ease-in-out infinite alternate; }
.stadium-haze { inset: auto -20% -23% -20%; height: 70%; background: radial-gradient(ellipse at 50% 50%, rgba(63,78,68,.16), transparent 65%); filter: blur(50px); }
.pitch { left: 50%; bottom: -8%; width: max(1200px,128vw); height: min(64vh,700px); transform: translateX(-50%); opacity: .73; filter: drop-shadow(0 0 8px rgba(255,255,255,.10)); }
.grain { inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E"); }
.particles { inset: 0; background-image: radial-gradient(circle,rgba(255,255,255,.43) 0 1px,transparent 1.7px), radial-gradient(circle,rgba(255,255,255,.24) 0 1px,transparent 1.8px); background-size: 193px 169px,271px 229px; background-position: 12px 53px,75px 16px; opacity: .28; mask-image: linear-gradient(to bottom,transparent 5%,#000 52%,#000); animation: drift 26s linear infinite; }

.page { position: relative; z-index: 1; min-height: 100svh; }
.hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 28px 20px 48px; }
.hero-inner { width: min(100%,850px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-stage { position: relative; width: min(430px,86vw); margin-bottom: -30px; }
.logo-glow { position: absolute; z-index: -1; inset: 22% 10% 10%; border-radius: 50%; background: radial-gradient(ellipse,rgba(255,255,255,.15),rgba(255,255,255,.055) 36%,transparent 72%); filter: blur(27px); animation: logo-breathe 5.8s ease-in-out infinite; }
.logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 20px rgba(255,255,255,.20)); user-select: none; }
.message-area { max-width: 680px; min-height: 116px; padding: 0 16px; transition: opacity .45s ease, transform .45s ease; }
.message-area.is-changing { opacity: 0; transform: translateY(9px); }
h1 { margin: 0; color: #f8f8f7; font-size: clamp(27px,3.4vw,44px); font-weight: 560; line-height: 1.17; letter-spacing: -.045em; text-wrap: balance; }
.message-area p { margin: 18px auto 0; max-width: 580px; color: #a5a9a7; font-size: clamp(14px,1.35vw,16px); line-height: 1.7; letter-spacing: .006em; text-wrap: balance; }

@keyframes logo-breathe { 0%,100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes drift { to { background-position: 205px -116px,346px -213px; } }
@keyframes light-sway { to { transform: rotate(-19deg); opacity: .43; } }
@keyframes light-sway-right { to { transform: rotate(19deg) scaleX(-1); opacity: .43; } }

@media (max-width: 700px) {
  .hero { padding: 24px 15px 44px; }
  .logo-stage { margin-bottom: -18px; }
  .message-area { min-height: 135px; }
  .message-area p { margin-top: 16px; }
  .pitch { bottom: -5%; width: 1200px; opacity: .55; }
}
@media (max-width: 380px) { .message-area { min-height: 148px; } }
@media (max-height: 650px) { .logo-stage { width: min(310px, 68vw); margin-bottom: -20px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}