/*
 * Your project styles start here.
 * Use this file to customize typography, layout, and colors.
 */

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: #050607;
  color: #f2f4f5;
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.canvas { display: none; }

header, main, footer { position: relative; z-index: 1; }


* { box-sizing: border-box; }
::selection { background: #b9ff45; color: #050607; }
.hero { position: relative; width: 100vw; height: 100svh; isolation: isolate; overflow: hidden; }
#webgl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; outline: none; }
.ambient { position: absolute; z-index: 0; inset: -12%; overflow: hidden; background: radial-gradient(ellipse at 65% 50%, #244244 0%, #10191a 42%, transparent 70%); opacity: .96; pointer-events: none; }
.ambient::before { content: ""; position: absolute; inset: 18% -10%; background: radial-gradient(ellipse at 20% 55%, rgb(185 255 69 / 48%), transparent 32%), radial-gradient(ellipse at 52% 42%, rgb(41 183 151 / 43%), transparent 34%), radial-gradient(ellipse at 82% 52%, rgb(90 112 255 / 38%), transparent 31%); filter: blur(22px); transform: rotate(-7deg) scale(1.08); animation: aurora-drift 18s ease-in-out infinite alternate; will-change: transform; }
.ambient.aurora-hidden { background: none; }
.ambient.aurora-hidden::before { display: none; }
.starmap { position: absolute; inset: 5%; width: 90%; height: 90%; overflow: visible; opacity: .55; animation: starmap-drift 35s ease-in-out infinite alternate; will-change: transform; }
.field-stars { fill: #dfffea; }
.field-stars circle { r: .45px; }
.field-stars circle:nth-child(3n) { r: .7px; }
.big-dipper { fill: #efffc5; }
.big-dipper circle { r: 1px; }
.shooting-star { fill: none; stroke: url(#meteor-tail); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; animation: shooting-star 14s linear infinite; will-change: transform, opacity; }
@keyframes aurora-drift { to { transform: translate3d(4%, -3%, 0) rotate(5deg) scale(1.14); } }
@keyframes starmap-drift { to { transform: translate3d(18px, -12px, 0) rotate(.35deg); } }
@keyframes shooting-star { 0%, 72%, 82%, 100% { opacity: 0; transform: translate3d(0, 0, 0); } 74% { opacity: .9; } 80% { opacity: 0; transform: translate3d(-220px, 150px, 0); } }
.topbar { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: clamp(1.25rem, 3vw, 2.5rem); pointer-events: none; }
.wordmark { color: inherit; text-decoration: none; letter-spacing: .18em; font-size: .78rem; font-weight: 600; pointer-events: auto; min-height: 44px; display: inline-flex; align-items: center; }
.wordmark span { color: #b9ff45; font-size: .48rem; align-self: flex-start; margin: .75rem 0 0 .18rem; }
.edition, .eyebrow, .hint, .playback { color: #7f858b; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; }
.edition { margin: 0; }
.hero-copy { position: absolute; z-index: 0; left: clamp(1.25rem, 6vw, 6rem); top: 50%; transform: translateY(-50%); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; }
.eyebrow span { width: 1.4rem; height: 1px; background: #b9ff45; }
h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 6.6rem); line-height: .98; letter-spacing: -.055em; font-weight: 400; color: #2a2d30; }
h1 em { color: #f2f4f5; font-style: normal; }
.playback { position: absolute; z-index: 3; left: clamp(1.25rem, 3vw, 2.5rem); right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 3vw, 2.5rem); display: flex; align-items: center; gap: 1rem; pointer-events: none; }
.progress-track { position: relative; flex: 1; height: 1px; background: #282c30; overflow: hidden; }
.progress-track i { position: absolute; inset: 0; background: #b9ff45; transform: scaleX(0); transform-origin: left; }
.toggles { position: absolute; z-index: 3; right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(3.4rem, 6vw, 5rem); display: flex; gap: .45rem; }
.toggle { display: flex; align-items: center; gap: .45rem; min-height: 36px; padding: .35rem .55rem; border: 1px solid #282c30; border-radius: .35rem; background: rgb(5 6 7 / 72%); color: #9ba1a6; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.toggle input { appearance: none; position: relative; width: 1.5rem; height: .82rem; margin: 0; border: 1px solid #464c51; border-radius: 1rem; background: #181b1e; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: .45rem; aspect-ratio: 1; border-radius: 50%; background: #7f858b; transition: transform .2s, background .2s; }
.toggle input:checked { border-color: #789f42; }
.toggle input:checked::after { background: #b9ff45; transform: translateX(.63rem); }
.toggle input:focus-visible { outline: 2px solid #b9ff45; outline-offset: 2px; }
.hint { position: absolute; z-index: 3; right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(6.4rem, 9vw, 7.5rem); margin: 0; opacity: .7; transition: opacity .3s; }
.loading { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #8c9297; font-size: .65rem; text-transform: uppercase; letter-spacing: .18em; transition: opacity .5s; }
.loading.done { opacity: 0; }
@media (max-width: 767px) { .edition, .hint { display: none; } .hero-copy { top: 27%; transform: none; } h1 { font-size: clamp(2.45rem, 13vw, 4.2rem); } .playback { gap: .65rem; } .toggles { left: 50%; right: auto; bottom: 2.7rem; width: max-content; transform: translateX(-50%); gap: .25rem; white-space: nowrap; } .toggle { min-height: 28px; padding: .15rem .3rem; gap: .3rem; font-size: .48rem; } }
@media (prefers-reduced-motion: reduce) { .progress-track i { display: none; } .ambient::before, .starmap, .shooting-star { animation: none; } }