:root {
  --background: #06060c;
  --surface: #0e0e18;
  --foreground: #e8e8f0;
  --foreground-soft: #b8b8c8;
  --muted: #6a6a7e;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.12);
  --accent: #5eddff;
  --accent-soft: rgba(94, 221, 255, 0.18);
  --accent-glow: rgba(94, 221, 255, 0.4);
  --cursor-x: -1000px;
  --cursor-y: -1000px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  antialiased: true;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

::selection {
  background: var(--accent);
  color: var(--background);
}

/* ── Backdrop ─────────────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bg-grid {
  position: absolute;
  inset: 0;
}

.bg-grid-dim {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  opacity: 0.9;
}

.bg-grid-bright {
  background-image:
    linear-gradient(to right, rgba(94, 221, 255, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94, 221, 255, 0.45) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(
    circle 180px at var(--cursor-x) var(--cursor-y),
    black 0%,
    rgba(0, 0, 0, 0.6) 40%,
    transparent 75%
  );
  mask-image: radial-gradient(
    circle 180px at var(--cursor-x) var(--cursor-y),
    black 0%,
    rgba(0, 0, 0, 0.6) 40%,
    transparent 75%
  );
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 65% at 50% 50%,
    transparent 0%,
    rgba(6, 6, 12, 0.6) 70%,
    rgba(6, 6, 12, 1) 100%
  );
}

.glow {
  position: absolute;
  width: 55%;
  height: 60%;
}

.glow-tr {
  top: 0;
  right: 0;
  background: radial-gradient(
    ellipse at 70% 30%,
    rgba(94, 221, 255, 0.06) 0%,
    transparent 60%
  );
}

.glow-bl {
  bottom: 0;
  left: 0;
  background: radial-gradient(
    ellipse at 30% 70%,
    rgba(94, 221, 255, 0.04) 0%,
    transparent 60%
  );
}

@keyframes scan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

.scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--accent-soft) 30%,
    var(--accent-soft) 70%,
    transparent 100%
  );
  opacity: 0.5;
  animation: scan 12s linear infinite;
  pointer-events: none;
}

/* ── 3D Canvas ────────────────────────────────────────── */

#canvas-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#canvas-container.is-ready {
  opacity: 1;
}

#canvas-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Top HUD ──────────────────────────────────────────── */

.top-hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1480px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  animation: fadeDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (min-width: 768px) {
  .top-hud {
    padding: 1.75rem 3.5rem;
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Instrument Serif", serif;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.brand-text em {
  font-style: italic;
  color: var(--foreground-soft);
}

.brand-dot {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  align-items: center;
  justify-content: center;
}

.dot-halo {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--accent);
  opacity: 0.6;
  animation: accent-pulse 3s ease-in-out infinite;
}

.dot-core {
  position: relative;
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--accent);
}

@keyframes accent-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.dot-small {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--accent);
  animation: accent-pulse 3s ease-in-out infinite;
}

/* ── Content (headline area) ─────────────────────────── */

.content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  height: 100dvh;
  max-width: 1480px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  .content {
    padding: 3.5rem 3.5rem 5rem;
  }
}

.hud-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  opacity: 0;
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

.hud-label .accent {
  color: var(--accent);
}

.hud-label .line {
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--border);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.headline {
  margin: 1.5rem 0 0 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: 1.02;
  opacity: 0;
  animation: fadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

.headline em {
  position: relative;
  font-style: italic;
  color: var(--foreground-soft);
}

.headline em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: drawLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.55s forwards;
}

@keyframes drawLine {
  to {
    opacity: 0.6;
    transform: scaleX(1);
  }
}

/* ── CTA ─────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  width: fit-content;
  margin-top: 1.75rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--foreground);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  pointer-events: auto;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}

.cta:hover {
  background: var(--accent);
  color: var(--background);
  box-shadow: 0 0 30px var(--accent-glow);
}

.cta-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--accent);
  transition: background 0.3s;
}

.cta:hover .cta-dot {
  background: var(--background);
}

.cta-arrow {
  display: inline-block;
  transition: transform 0.3s;
}

.cta:hover .cta-arrow {
  transform: translateX(2px);
}

/* ── Bottom HUD ──────────────────────────────────────── */

.bottom-hud {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 2rem 2.5rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  pointer-events: none;
}

@media (min-width: 768px) {
  .bottom-hud {
    padding: 0 3.5rem 2.5rem;
  }
}

.hud-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

.hud-strip .accent {
  color: var(--accent);
}

.hud-strip .line {
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--border);
}

.hud-strip.live {
  animation-delay: 1.55s;
}

@media (max-width: 600px) {
  .bottom-hud {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
  }
}