:root {
  --fg: #f3ece4;
  --dim: rgba(243, 236, 228, 0.55);
  --faint: rgba(243, 236, 228, 0.16);
  --accent: #ff9a3c;
  --cool: #8fb6ff;
  --pad: clamp(18px, 4vw, 44px);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  color: var(--fg);
  overflow: hidden;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
body.dragging { cursor: grabbing; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.fallback {
  position: fixed; inset: 0; display: none;
  background:
    radial-gradient(circle at 50% 50%, #000 0 13vmin, transparent 13.5vmin),
    radial-gradient(ellipse 48vmin 7vmin at 50% 52%, #ffcf8f 0, #ff6a1a 35%, #5a0f1a 70%, transparent 72%),
    radial-gradient(circle at 50% 50%, #ffb46a 0 14.2vmin, transparent 15vmin),
    #000;
}
body.no-webgl .fallback { display: block; }

.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
}

.grain {
  position: fixed; inset: -50%; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-1%, 3%); }
  80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); }
}

/* ---------- lens HUD ---------- */
#lens-hud {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  opacity: 0; transition: opacity 2s ease 3.5s;
}
body.ready #lens-hud { opacity: 1; }
#lens circle { fill: none; vector-effect: non-scaling-stroke; }
#ring-shadow { stroke: rgba(255, 210, 160, 0.28); stroke-width: 1; stroke-dasharray: 2 6; }
#ring-outer { stroke: rgba(143, 182, 255, 0.14); stroke-width: 1; }
#ring-ticks line { stroke: rgba(243, 236, 228, 0.28); stroke-width: 1; }
#ring-ticks line.major { stroke: rgba(255, 154, 60, 0.6); }
#lead { stroke: rgba(243, 236, 228, 0.35); stroke-width: 1; }
#lead-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; fill: var(--dim); }
#lead-value { fill: var(--accent); }

/* ---------- frame corners ---------- */
.frame { position: fixed; inset: calc(var(--pad) * 0.5); pointer-events: none; }
.frame i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--faint); }
.frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- HUD text ---------- */
.hud {
  position: fixed; left: var(--pad); right: var(--pad);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
  pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease 2.6s;
}
body.ready .hud { opacity: 1; }
.hud-top { top: calc(var(--pad) + env(safe-area-inset-top)); }
.hud-bottom { bottom: calc(var(--pad) + env(safe-area-inset-bottom)); align-items: flex-end; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 400; }
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }

.readout { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 22px; text-align: right; }
.readout div { display: flex; justify-content: flex-end; gap: 10px; }
.readout dt { color: rgba(243, 236, 228, 0.32); }
.readout dt sub { font-size: 0.8em; vertical-align: baseline; letter-spacing: 0.05em; }
.readout dd { color: var(--fg); min-width: 9ch; font-variant-numeric: tabular-nums; }

.hud-bottom { justify-content: flex-end; gap: 26px; }
.hud-bottom b { color: var(--accent); font-weight: 400; }
.hud-bottom .copy { color: rgba(243, 236, 228, 0.3); }
.touch { display: none; }

/* ---------- hero ---------- */
.hero {
  position: fixed; left: var(--pad);
  bottom: calc(var(--pad) * 2.2 + env(safe-area-inset-bottom));
  pointer-events: none; max-width: 92vw;
}
.kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; color: var(--accent);
  margin-bottom: 10px; opacity: 0; transform: translateY(8px);
  transition: opacity 1.2s ease 1.6s, transform 1.2s ease 1.6s;
}
.title {
  font-weight: 300; font-size: clamp(54px, 11vw, 168px);
  line-height: 0.88; letter-spacing: -0.045em; white-space: nowrap;
  text-shadow: 0 0 40px rgba(255, 140, 60, 0.18);
}
.title .word span {
  display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(0.25em) scale(1.06);
  transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1);
}
.title .word span:nth-child(1) { transition-delay: 1.0s; }
.title .word span:nth-child(2) { transition-delay: 1.08s; }
.title .word span:nth-child(3) { transition-delay: 1.16s; }
.title .word span:nth-child(4) { transition-delay: 1.24s; }
.title .word span:nth-child(5) { transition-delay: 1.32s; }
.title .word span:nth-child(6) { transition-delay: 1.40s; }
.title .word span:nth-child(7) { transition-delay: 1.48s; }
.title em {
  font-style: normal; font-weight: 400; font-size: 0.3em; letter-spacing: 0.02em;
  color: var(--accent); margin-left: 0.15em; vertical-align: 0.15em;
  display: inline-block; opacity: 0; transition: opacity 1.4s ease 2.1s;
}
.tagline {
  margin-top: 14px; font-size: clamp(14px, 1.5vw, 18px); font-weight: 300; color: var(--dim);
  letter-spacing: 0.01em; opacity: 0; transition: opacity 1.4s ease 2.4s;
}
body.ready .kicker { opacity: 1; transform: none; }
body.ready .title .word span { opacity: 1; filter: blur(0); transform: none; }
body.ready .title em, body.ready .tagline { opacity: 1; }

.curtain {
  position: fixed; inset: 0; background: #000; pointer-events: none;
  transition: opacity 2.4s ease 0.2s;
}
body.ready .curtain, body.no-webgl .curtain { opacity: 0; }

/* ---------- mobile ---------- */
@media (hover: none), (pointer: coarse) {
  .touch { display: inline; }
  .desk { display: none; }
}
@media (max-width: 640px) {
  .hud { font-size: 9px; letter-spacing: 0.16em; }
  .readout { grid-template-columns: auto; gap: 3px; }
  .readout .opt { display: none; }
  .hero { bottom: calc(var(--pad) * 3.2 + env(safe-area-inset-bottom)); }
  .title { font-size: clamp(48px, 17vw, 96px); }
  .kicker { font-size: 9px; }
  .hud-bottom { justify-content: space-between; gap: 12px; }
  #lead, #lead-label { display: none; }
}
@media (max-height: 460px) and (orientation: landscape) {
  .title { font-size: clamp(40px, 9vw, 80px); }
  .tagline { display: none; }
  .hero { bottom: calc(var(--pad) * 1.8); }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .pulse { animation: none; }
}