:root {
  /* Typography source terms: IBM Plex Sans Condensed` in weight 500 for numeric tags; Inter` in weights 400–500 for readable narrative fragments; Space Grotesk gives the site engineered clarity without falling into a monospaced terminal style. Space Grotesk` in weights 600–700 for the wordmark and section titles. Use tight leading. */
  --abyss: #020812;
  --navy: #061A2E;
  --teal: #063F4C;
  --cyan: #18F2FF;
  --mint: #7CFFD8;
  --violet: #3E2BFF;
  --pearl: #D8F7FF;
  --display: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 400vh;
  overflow-x: hidden;
  background: var(--abyss);
  color: rgba(216, 247, 255, 0.9);
  font-family: var(--body);
}

.abyss-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 82%, rgba(24, 242, 255, 0.13), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(62, 43, 255, 0.20), transparent 31%),
    radial-gradient(circle at 55% 58%, rgba(6, 63, 76, 0.42), transparent 44%),
    linear-gradient(135deg, #020812 0%, #061A2E 48%, #020812 100%);
}

.abyss-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 36px, rgba(24, 242, 255, 0.035) 37px 38px),
    linear-gradient(90deg, transparent 0 49%, rgba(216, 247, 255, 0.035) 50%, transparent 51%);
  opacity: 0.45;
  transform: rotate(-8deg);
}

.cursor-glow {
  position: absolute;
  width: 34vmax;
  height: 34vmax;
  border-radius: 50%;
  left: var(--glow-x, 50%);
  top: var(--glow-y, 50%);
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(124, 255, 216, 0.14), rgba(24, 242, 255, 0.055) 31%, transparent 68%);
  filter: blur(12px);
  transition: left 900ms ease, top 900ms ease;
  pointer-events: none;
}

.hull-field { position: absolute; inset: 0; filter: blur(0.2px); }

.blob {
  position: absolute;
  border-radius: 42% 58% 61% 39% / 49% 45% 55% 51%;
  background:
    radial-gradient(circle at 35% 28%, rgba(216, 247, 255, 0.12), transparent 16%),
    radial-gradient(circle at 70% 75%, rgba(24, 242, 255, 0.12), transparent 22%),
    linear-gradient(145deg, rgba(6, 63, 76, 0.98), rgba(6, 26, 46, 0.98) 63%, rgba(2, 8, 18, 0.96));
  box-shadow: inset 0 0 70px rgba(124, 255, 216, 0.08), inset -38px -42px 90px rgba(2, 8, 18, 0.82), 0 0 42px rgba(24, 242, 255, 0.10);
  animation: breatheHull 24s ease-in-out infinite;
}

.blob::before,
.blob::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  border: 1px solid rgba(24, 242, 255, 0.18);
  clip-path: polygon(0 18%, 100% 0, 84% 100%, 12% 84%);
}

.blob span {
  position: absolute;
  inset: 22%;
  border-radius: 50% 42% 60% 38% / 45% 55% 43% 57%;
  border: 1px solid rgba(124, 255, 216, 0.16);
}

.blob-one { width: 46vmax; height: 38vmax; right: -12vmax; top: -9vmax; animation-duration: 28s; }
.blob-two { width: 38vmax; height: 34vmax; left: -17vmax; bottom: 7vmax; animation-duration: 22s; animation-delay: -7s; background-color: var(--navy); }
.blob-three { width: 30vmax; height: 23vmax; left: 35vw; top: 34vh; animation-duration: 30s; animation-delay: -13s; opacity: 0.68; }
.blob-four { width: 25vmax; height: 31vmax; right: 7vw; bottom: -18vmax; animation-duration: 26s; animation-delay: -4s; opacity: 0.86; }

.portal-oval {
  position: absolute;
  right: 5vw;
  top: 50%;
  width: min(48vw, 690px);
  height: min(68vh, 720px);
  translate: 22% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #020812 0 48%, rgba(24, 242, 255, 0.34) 49%, rgba(6, 63, 76, 0.24) 53%, transparent 64%);
  box-shadow: inset 0 0 80px #020812, 0 0 55px rgba(24, 242, 255, 0.18);
  opacity: 0;
  scale: 0.82;
  transition: opacity 900ms ease, scale 1200ms ease;
}

body.aperture-open .portal-oval { opacity: 1; scale: 1; }

.sonar {
  position: absolute;
  width: 18vmax;
  height: 18vmax;
  border: 1px solid rgba(24, 242, 255, 0.18);
  border-radius: 50%;
  animation: sonarPulse 7s ease-out infinite;
}

.sonar-a { left: 13vw; top: 17vh; }
.sonar-b { right: 18vw; top: 40vh; animation-delay: -2.7s; }
.sonar-c { left: 43vw; bottom: 9vh; animation-delay: -4.9s; }

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(216, 247, 255, 0.58);
  box-shadow: 0 0 10px rgba(124, 255, 216, 0.58);
  animation: driftUp linear infinite;
}

.hud-frame {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 76px;
  height: 76px;
  border-color: rgba(24, 242, 255, 0.6);
  filter: drop-shadow(0 0 9px rgba(24, 242, 255, 0.32));
}

.corner-tl { left: 22px; top: 22px; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { right: 22px; top: 22px; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { left: 22px; bottom: 22px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { right: 22px; bottom: 22px; border-bottom: 1px solid; border-right: 1px solid; }

.scan-disc {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(216, 247, 255, 0.14);
  border-radius: 50%;
}

.scan-disc::before,
.scan-disc::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(24, 242, 255, 0.16);
}

.scan-disc::after { inset: 39%; background: rgba(124, 255, 216, 0.18); box-shadow: 0 0 16px rgba(124, 255, 216, 0.35); }
.scan-disc span { position: absolute; inset: 50% 0 auto 50%; height: 1px; background: rgba(24, 242, 255, 0.55); transform-origin: left; animation: calibrate 10s linear infinite; }
.disc-left { left: 8vw; top: 14vh; }
.disc-right { right: 7vw; bottom: 12vh; scale: 0.72; opacity: 0.72; }

.perimeter-label,
.coord-chip,
.eyebrow,
.micro-log,
.progress-rail { font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.18em; }

.perimeter-label { position: absolute; font-size: 12px; color: rgba(216, 247, 255, 0.48); }
.label-top { top: 27px; left: 50%; translate: -50% 0; }
.label-left { left: 28px; top: 50%; rotate: -90deg; transform-origin: left center; }
.label-right { right: 28px; top: 50%; rotate: 90deg; transform-origin: right center; }

.progress-rail { position: absolute; left: 50%; bottom: 30px; translate: -50% 0; width: min(44vw, 460px); height: 1px; background: rgba(216, 247, 255, 0.14); }
.progress-rail span { display: block; width: 0%; height: 100%; background: var(--cyan); box-shadow: 0 0 14px rgba(24, 242, 255, 0.8); }

.coordinate-nav {
  position: fixed;
  z-index: 10;
  right: 34px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  gap: 14px;
}

.coord-chip {
  color: rgba(216, 247, 255, 0.48);
  text-decoration: none;
  font-size: 12px;
  border: 1px solid rgba(24, 242, 255, 0.16);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(2, 8, 18, 0.34);
  transition: color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.coord-chip.active,
.coord-chip:hover { color: var(--mint); border-color: rgba(24, 242, 255, 0.72); box-shadow: 0 0 18px rgba(24, 242, 255, 0.2); }

.narrative { position: relative; z-index: 4; }
.chamber { min-height: 100vh; position: relative; display: grid; padding: 9vh 9vw; }
.text-band { position: relative; width: min(680px, 78vw); opacity: 0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; }
.chamber.is-active .text-band { opacity: 1; transform: translateY(0); }
.band-low-left { align-self: end; justify-self: start; margin-bottom: 7vh; }
.band-right { align-self: center; justify-self: end; margin-right: 8vw; }
.band-left-mid { align-self: center; justify-self: start; margin-left: 3vw; }
.band-center-right { align-self: center; justify-self: end; margin-right: 11vw; }

.eyebrow { margin: 0 0 18px; color: var(--mint); font-size: 13px; }
h1, h2 { margin: 0; font-family: var(--display); color: rgba(216, 247, 255, 0.92); line-height: 0.88; letter-spacing: -0.06em; }
h1 { font-size: clamp(4rem, 18vw, 13rem); }
h2 { font-size: clamp(3.2rem, 8vw, 8.5rem); max-width: 820px; }
.fragment { max-width: 520px; color: rgba(216, 247, 255, 0.74); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.7; margin: 26px 0 0; }
.route-word { position: relative; display: inline-block; }
.route-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: -16vw;
  bottom: -0.09em;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--mint), transparent);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 16px rgba(24, 242, 255, 0.82);
  transition: transform 900ms ease 180ms;
}
.chamber.is-active .route-word::after, .text-band:hover .route-word::after { transform: scaleX(1); }

.route-line { position: relative; width: min(470px, 58vw); height: 92px; margin-top: 34px; }
.route-line i, .route-line b, .route-line em { position: absolute; display: block; height: 1px; background: rgba(24, 242, 255, 0.74); box-shadow: 0 0 12px rgba(24, 242, 255, 0.55); transform: scaleX(0); transform-origin: left; transition: transform 700ms ease; }
.route-line i { width: 62%; left: 0; top: 18px; }
.route-line b { width: 34%; left: 58%; top: 18px; rotate: 30deg; }
.route-line em { width: 28%; left: 76%; top: 64px; rotate: -12deg; background: rgba(124, 255, 216, 0.76); }
.chamber.is-active .route-line i { transform: scaleX(1); transition-delay: 550ms; }
.chamber.is-active .route-line b { transform: scaleX(1); transition-delay: 840ms; }
.chamber.is-active .route-line em { transform: scaleX(1); transition-delay: 1100ms; }

.micro-log { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; font-size: 12px; color: rgba(216, 247, 255, 0.55); }
.micro-log span { border-bottom: 1px solid rgba(24, 242, 255, 0.34); padding-bottom: 5px; }

.route-map { width: min(520px, 70vw); margin-top: 32px; overflow: visible; }
.route-map path { fill: none; stroke-linecap: round; stroke-width: 2; }
.route-back { stroke: rgba(216, 247, 255, 0.14); }
.route-front { stroke: var(--cyan); stroke-dasharray: 650; stroke-dashoffset: 650; filter: drop-shadow(0 0 9px rgba(24, 242, 255, 0.74)); transition: stroke-dashoffset 1300ms ease 320ms; }
.chamber.is-active .route-front { stroke-dashoffset: 0; }
.route-map circle { fill: var(--mint); filter: drop-shadow(0 0 8px rgba(124, 255, 216, 0.85)); opacity: 0; transition: opacity 500ms ease 1.2s; }
.chamber.is-active .route-map circle { opacity: 1; }

.terminal-word { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 7rem); letter-spacing: -0.06em; margin: 34px 0 0; color: rgba(216, 247, 255, 0.9); text-shadow: 0 0 24px rgba(24, 242, 255, 0.23); }

@keyframes breatheHull {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 42% 58% 61% 39% / 49% 45% 55% 51%; }
  50% { transform: translate3d(1.8vw, -1.2vh, 0) scale(1.055); border-radius: 56% 44% 43% 57% / 38% 62% 38% 62%; }
}

@keyframes sonarPulse {
  0% { opacity: 0; transform: scale(0.38); }
  28% { opacity: 0.54; }
  100% { opacity: 0; transform: scale(1.95); }
}

@keyframes driftUp {
  from { transform: translateY(8vh); opacity: 0; }
  22% { opacity: 0.7; }
  to { transform: translateY(-110vh); opacity: 0; }
}

@keyframes calibrate { to { rotate: 360deg; } }

@media (max-width: 760px) {
  .coordinate-nav { right: 18px; gap: 8px; }
  .coord-chip { padding: 6px 8px; font-size: 10px; }
  .perimeter-label, .scan-disc { display: none; }
  .chamber { padding: 8vh 7vw; }
  .band-right, .band-center-right, .band-left-mid { justify-self: start; margin-left: 0; margin-right: 0; }
  h2 { font-size: clamp(2.8rem, 15vw, 5.8rem); }
}