:root {
  /* Typography source notes: Space Grotesk, IBM Plex Mono, Nunito Sans (Google Fonts). */
  --cyan: #00F5FF;
  --lime: #B8FF2C;
  --coral: #FF4FA3;
  --tangerine: #FFB000;
  --ink: #17112F;
  --paper: #F1E8FF;
  --blue: #295BFF;
  --progress: 0;
  --pulse: #00F5FF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 15% 10%, rgba(41, 91, 255, .36), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 79, 163, .22), transparent 36%),
    linear-gradient(145deg, #17112F 0%, #211442 48%, #08061A 100%);
  font-family: "Nunito Sans", Inter, system-ui, sans-serif;
}

.filter-bank { position: fixed; width: 0; height: 0; pointer-events: none; }

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: .21;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(241, 232, 255, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0, 245, 255, .14) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(255, 176, 0, .09) 49% 51%, transparent 52%);
  background-size: 23px 29px, 31px 37px, 180px 180px;
}

.hud-shell {
  position: fixed;
  inset: 18px;
  z-index: 20;
  pointer-events: none;
  font-family: "IBM Plex Mono", monospace;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(9px, .72vw, 12px);
}

.hud-line, .corner { position: absolute; opacity: .9; }
.hud-line-top, .hud-line-bottom { left: 72px; right: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--coral), transparent); }
.hud-line-left, .hud-line-right { top: 72px; bottom: 72px; width: 1px; background: linear-gradient(180deg, transparent, var(--cyan), var(--lime), transparent); }
.hud-line-top { top: 0; animation: hudFlow 5s linear infinite; }
.hud-line-bottom { bottom: 0; animation: hudFlow 5s linear infinite reverse; }
.hud-line-left { left: 0; }
.hud-line-right { right: 0; }

.corner { width: 58px; height: 58px; border-color: var(--pulse); filter: drop-shadow(0 0 10px rgba(0,245,255,.7)); animation: cornerPulse 3.4s ease-in-out infinite; }
.corner-tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; border-radius: 18px 0 0 0; }
.corner-tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; border-radius: 0 18px 0 0; }
.corner-bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 18px; }
.corner-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 18px 0; }

.hud-readout {
  position: absolute;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,245,255,.34);
  border-radius: 999px;
  background: rgba(23, 17, 47, .42);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 30px rgba(0,245,255,.08) inset;
}
.top-left { top: 14px; left: 18px; }
.top-right { top: 14px; right: 18px; }
.bottom-left { bottom: 14px; left: 18px; }
.bottom-right { bottom: 14px; right: 18px; }
.small-mark { color: var(--lime); }

.lens-tracker {
  position: absolute;
  right: 28px;
  top: calc(90px + (100% - 230px) * var(--progress));
  width: 44px;
  height: 44px;
  border: 1px solid rgba(184,255,44,.75);
  border-radius: 50%;
  transition: top .45s ease;
}
.lens-tracker span { position: absolute; inset: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 24px var(--lime); }

.mode-tabs {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.mode-tabs button {
  border: 1px solid rgba(241,232,255,.28);
  border-radius: 999px;
  background: rgba(241,232,255,.08);
  color: var(--paper);
  padding: 8px 12px;
  font: 600 10px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .16em;
  cursor: pointer;
  transition: border-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.mode-tabs button:hover, .mode-tabs button.active { color: var(--ink); border-color: var(--lime); background: var(--lime); box-shadow: 0 0 28px rgba(184,255,44,.45); transform: translateY(-2px); }

.narrative { position: relative; z-index: 2; }
.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(86px, 10vw, 150px);
}
.scene::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 42px;
  border: 1px solid rgba(241,232,255,.16);
  background: linear-gradient(120deg, rgba(241,232,255,.06), transparent 34%, rgba(0,245,255,.05));
  transform: skewY(-3deg);
  z-index: -1;
}
.scene-wash {
  position: absolute;
  inset: -20%;
  opacity: .75;
  filter: blur(28px) url(#watercolor);
  mix-blend-mode: screen;
  animation: washBreath 12s ease-in-out infinite alternate;
}
.dawn .scene-wash { background: radial-gradient(circle at 24% 22%, rgba(255,176,0,.42), transparent 32%), radial-gradient(circle at 66% 18%, rgba(255,79,163,.34), transparent 30%); }
.midday .scene-wash { background: radial-gradient(circle at 60% 42%, rgba(0,245,255,.44), transparent 34%), radial-gradient(circle at 22% 68%, rgba(184,255,44,.32), transparent 31%); }
.evening .scene-wash { background: radial-gradient(circle at 28% 62%, rgba(255,79,163,.48), transparent 31%), radial-gradient(circle at 72% 34%, rgba(41,91,255,.42), transparent 36%); }
.night .scene-wash { background: radial-gradient(circle at 68% 58%, rgba(41,91,255,.54), transparent 39%), radial-gradient(circle at 30% 28%, rgba(0,245,255,.26), transparent 28%); }

.wordmark {
  position: absolute;
  left: clamp(28px, 7vw, 120px);
  top: clamp(105px, 18vh, 190px);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(74px, 16vw, 250px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .78;
  color: var(--paper);
  text-shadow: 0 14px 44px rgba(23,17,47,.76);
  mix-blend-mode: screen;
  opacity: .94;
}

.day-lens {
  position: absolute;
  width: clamp(360px, 58vw, 840px);
  aspect-ratio: 1 / .82;
  border-radius: 48% 52% 44% 56% / 58% 42% 56% 44%;
  border: 1px solid rgba(0,245,255,.38);
  background: rgba(241,232,255,.05);
  filter: url(#watercolor);
  box-shadow: inset 0 0 60px rgba(241,232,255,.08), 0 0 80px rgba(0,245,255,.14);
  animation: lensMorph 13s ease-in-out infinite alternate;
}
.dawn-lens { right: -4vw; bottom: 7vh; }
.midday-lens { left: 4vw; top: 15vh; }
.evening-lens { right: 10vw; top: 12vh; transform: rotate(-8deg); }
.night-lens { left: 12vw; bottom: 12vh; }
.day-lens::after {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: inherit;
  background: repeating-conic-gradient(from 20deg, rgba(0,245,255,.55) 0 1deg, transparent 1deg 9deg);
  mask-image: radial-gradient(ellipse, transparent 57%, #000 59%, #000 62%, transparent 64%);
}
.bloom { position: absolute; inset: 5%; border-radius: 50%; filter: blur(18px); mix-blend-mode: screen; animation: bloomFloat 9s ease-in-out infinite alternate; }
.bloom-a { background: radial-gradient(circle at 30% 20%, rgba(255,79,163,.58), transparent 42%), radial-gradient(circle at 68% 58%, rgba(0,245,255,.50), transparent 46%); }
.bloom-b { inset: 17% 11% 11% 22%; background: radial-gradient(circle at 55% 30%, rgba(184,255,44,.52), transparent 34%), radial-gradient(circle at 35% 70%, rgba(255,176,0,.48), transparent 38%); animation-delay: -3s; }

.copy-block {
  position: relative;
  max-width: 470px;
  padding: 22px 24px;
  border: 1px solid rgba(241,232,255,.22);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(241,232,255,.16), rgba(23,17,47,.22));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,245,255,.08);
  transition: transform .45s, border-color .45s, box-shadow .45s;
}
.copy-block:hover { transform: translateY(-8px) rotate(-1deg); border-color: var(--coral); box-shadow: 0 0 70px rgba(255,79,163,.22); }
.copy-dawn { margin-top: 45vh; margin-left: 4vw; }
.copy-midday { margin-left: auto; margin-top: 18vh; }
.copy-evening { margin-top: 36vh; margin-left: 5vw; }
.copy-night { margin-left: auto; margin-top: 28vh; }
.eyebrow, .telemetry, .scan-window, .diagonal-band, .closing-chip { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .16em; }
.eyebrow { margin: 0 0 14px; color: var(--lime); font-size: 11px; }
h1, h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(42px, 6vw, 90px);
  line-height: .86;
  letter-spacing: -.055em;
}
.copy-block p:last-child { margin: 18px 0 0; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.42; color: rgba(241,232,255,.86); }

.telemetry { position: absolute; color: var(--paper); font-size: 10px; padding-left: 74px; }
.telemetry::before { content: ""; position: absolute; left: 0; top: 50%; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); }
.telemetry::after { content: ""; position: absolute; left: 60px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px var(--coral); }
.rail-one { right: 13vw; top: 28vh; }
.rail-two { left: 18vw; bottom: 18vh; }
.rail-three { right: 18vw; bottom: 18vh; }
.rail-four { right: 28vw; top: 23vh; }
.rail-five { left: 43vw; top: 18vh; }

.molecule { position: absolute; inset: 15%; }
.molecule i { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 20px var(--lime); animation: dotDrift 5s ease-in-out infinite alternate; }
.molecule i:nth-child(1) { left: 18%; top: 24%; }
.molecule i:nth-child(2) { left: 48%; top: 18%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); animation-delay: -.7s; }
.molecule i:nth-child(3) { left: 68%; top: 45%; background: var(--coral); box-shadow: 0 0 20px var(--coral); animation-delay: -1.4s; }
.molecule i:nth-child(4) { left: 34%; top: 64%; background: var(--tangerine); box-shadow: 0 0 20px var(--tangerine); animation-delay: -2.1s; }
.molecule i:nth-child(5) { left: 74%; top: 72%; animation-delay: -2.8s; }
.molecule i:nth-child(6) { left: 12%; top: 58%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); animation-delay: -3.5s; }
.molecule i:nth-child(7) { left: 54%; top: 82%; background: var(--coral); box-shadow: 0 0 20px var(--coral); animation-delay: -4.2s; }

.ring { position: absolute; border: 1px solid rgba(0,245,255,.45); border-radius: 50%; animation: orbitRing 10s linear infinite; }
.ring-one { inset: 17%; }
.ring-two { inset: 30% 12%; border-color: rgba(184,255,44,.5); animation-direction: reverse; }
.scan-window { position: absolute; left: 10vw; bottom: 18vh; width: 270px; height: 96px; border: 1px solid rgba(0,245,255,.5); border-radius: 24px; padding: 18px; background: rgba(23,17,47,.24); }
.scan-window b { display: block; height: 2px; margin-top: 26px; background: linear-gradient(90deg, var(--cyan), var(--lime), transparent); animation: scanLine 2.6s ease-in-out infinite; }
.contours { position: absolute; inset: 10%; border-radius: inherit; background: repeating-radial-gradient(ellipse at 50% 52%, transparent 0 20px, rgba(255,79,163,.42) 21px 23px, transparent 24px 36px); animation: contourTurn 18s linear infinite; }
.diagonal-band { position: absolute; right: -6vw; bottom: 22vh; width: 52vw; padding: 18px 60px; transform: rotate(-12deg); border: 1px solid rgba(255,176,0,.46); background: linear-gradient(90deg, transparent, rgba(255,176,0,.18), transparent); color: var(--tangerine); }
.archive-grid { position: absolute; inset: 12%; opacity: .56; background-image: linear-gradient(rgba(0,245,255,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(0,245,255,.32) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse, #000 30%, transparent 72%); }
.closing-chip { position: absolute; left: 12vw; top: 22vh; color: var(--ink); background: var(--paper); border: 1px solid var(--cyan); border-radius: 999px; padding: 12px 18px; box-shadow: 0 0 44px rgba(0,245,255,.3); }

@keyframes hudFlow { 0% { filter: hue-rotate(0deg); opacity: .5; } 50% { opacity: 1; } 100% { filter: hue-rotate(80deg); opacity: .5; } }
@keyframes cornerPulse { 50% { border-color: var(--coral); transform: scale(.96); } }
@keyframes washBreath { to { transform: scale(1.08) rotate(5deg); } }
@keyframes lensMorph { to { border-radius: 55% 45% 58% 42% / 43% 57% 45% 55%; transform: translate3d(0, -18px, 0) rotate(3deg); } }
@keyframes bloomFloat { to { transform: translate(4%, -5%) scale(1.08) rotate(12deg); } }
@keyframes dotDrift { to { transform: translate(18px, -14px) scale(1.35); } }
@keyframes orbitRing { to { transform: rotate(360deg); } }
@keyframes scanLine { 50% { transform: translateY(-18px); opacity: .35; } }
@keyframes contourTurn { to { transform: rotate(360deg) scale(1.08); } }

@media (max-width: 760px) {
  .hud-shell { inset: 10px; }
  .top-right, .bottom-left { display: none; }
  .mode-tabs { bottom: 64px; }
  .scene { padding: 88px 24px; }
  .day-lens { width: 105vw; opacity: .8; }
  .copy-block, .copy-midday, .copy-night { margin: 42vh 0 0; }
  .telemetry, .diagonal-band, .scan-window, .closing-chip { display: none; }
}