:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #060611;
  color: #f5f3fc;
  --accent: #d5ff70;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 12% 20%, #35145b, transparent 65%),
    radial-gradient(ellipse at 92% 80%, #093a55, transparent 65%),
    #07091c;
}

#starfield { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.space-vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 47%, #0606118f 0%, #06061126 42%, transparent 67%); }
.masthead, .hero, footer { position: relative; z-index: 1; }
.masthead { display: flex; align-items: center; gap: .75rem; padding: 1.8rem clamp(1.25rem, 4vw, 4rem); color: #c2bdd3; font-size: .7rem; letter-spacing: .025em; }
.signal { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px #d5ff7070; }
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 1.25rem 2.5rem; text-align: center; }
.logo { display: block; width: min(90vw, 960px); max-height: 62svh; height: auto; object-fit: contain; filter: drop-shadow(0 0 24px #bdff4426); animation: fly-in 1.8s cubic-bezier(.16, 1, .3, 1) both, cruise 8s ease-in-out 1.8s infinite; }
body[data-flight-paused="true"] .logo { animation-play-state: paused; }
.announcement { margin-top: .3rem; }
.eyebrow { margin: 0 0 .85rem; color: #d8c8ee; font-size: .65rem; letter-spacing: .17em; text-transform: uppercase; line-height: 1.7; }
.coming-soon { font-size: clamp(1.4rem, 3vw, 2.3rem); margin: 0; font-weight: 400; letter-spacing: -.04em; }
.cursor { color: var(--accent); animation: blink 1.6s step-end infinite; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1.25rem, 4vw, 4rem); color: #b7aacd; font-size: .58rem; line-height: 1.6; }
#flight-toggle { font: inherit; color: #ddd1f5; border: 1px solid #c3a4ff40; border-radius: 999px; padding: .6rem 1rem; background: #090c2480; cursor: pointer; }
#flight-toggle:hover { color: var(--accent); border-color: #d5ff7070; }
#flight-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#flight-toggle:disabled { cursor: default; opacity: .65; }
.coordinates { letter-spacing: .13em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fly-in {
  from { transform: perspective(1000px) translateZ(-450px) rotateY(-18deg) rotateX(8deg); }
  to { transform: perspective(1000px) translateZ(0) rotateY(-5deg) rotateX(2deg); }
}
@keyframes cruise {
  0%, 100% { transform: perspective(1000px) translateZ(0) rotateY(-5deg) rotateX(2deg); }
  50% { transform: perspective(1000px) translateZ(26px) translateY(-5px) rotateY(2deg) rotateX(-2deg); }
}
@media (max-width: 600px) {
  .masthead { padding-top: 1.5rem; }
  .hero { padding-bottom: 3rem; }
  .logo { width: 100%; max-height: 60svh; }
  .announcement { margin-top: 2rem; }
  .eyebrow { font-size: .57rem; letter-spacing: .12em; }
  footer { justify-content: space-between; padding-bottom: 1.5rem; }
  .coordinates { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cursor, .logo { animation: none; } }