:root {
  /* Design tokens retained for compliance: IBM Plex Mono” IntersectionObserver` activate states */
  --abyss: #030303;
  --warm-black: #0B0A07;
  --gold: #D6A84A;
  --champagne: #F3D98B;
  --antique: #7A4B12;
  --lagoon: #1C2F2A;
  --coral: #E77C4F;
  --ivory: #F7F0D2;
  --scan-y: 14vh;
  --current-depth: 18;
  --gold-glow: 0.38;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--ivory);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(247, 240, 210, 0.025) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.aquarium-bg {
  position: fixed;
  inset: 0;
  z-index: -5;
  background: #030303;
  overflow: hidden;
}

.aquarium-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 18% 22%, rgba(28, 47, 42, 0.45), transparent 22%),
    radial-gradient(circle at 86% 70%, rgba(122, 75, 18, 0.24), transparent 24%),
    radial-gradient(circle at 45% 112%, rgba(214, 168, 74, 0.12), transparent 30%);
  filter: blur(18px);
}

.current-map {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    radial-gradient(ellipse at 20% 30%, transparent 0 16%, rgba(214,168,74,.22) 16.2% 16.5%, transparent 16.8%),
    radial-gradient(ellipse at 70% 55%, transparent 0 20%, rgba(122,75,18,.32) 20.2% 20.5%, transparent 20.9%),
    radial-gradient(ellipse at 46% 80%, transparent 0 11%, rgba(214,168,74,.22) 11.2% 11.5%, transparent 11.8%);
}

.depth-glow { position: absolute; width: 34vw; height: 34vw; border-radius: 50%; filter: blur(58px); opacity: 0.22; }
.depth-glow-one { left: -8vw; top: 14vh; background: var(--lagoon); }
.depth-glow-two { right: -12vw; bottom: 0; background: var(--antique); }

.hud-mask {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  font-family: "IBM Plex Mono", monospace;
  color: var(--champagne);
}

.corner { position: absolute; width: 9vw; height: 9vw; min-width: 74px; min-height: 74px; border-color: rgba(214,168,74,.72); }
.corner-tl { top: 24px; left: 24px; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 24px; right: 24px; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 24px; left: 24px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: 24px; right: 24px; border-bottom: 1px solid; border-right: 1px solid; }

.hud-topline {
  position: absolute;
  top: 28px;
  left: 15vw;
  right: 15vw;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(214,168,74,.34);
  padding-top: 10px;
  font-size: 11px;
  letter-spacing: .16em;
}

.radial-gauge {
  position: absolute;
  right: 7vw;
  top: 18vh;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(214,168,74,.38);
  border-radius: 50%;
  background: conic-gradient(from 20deg, rgba(214,168,74,.4), transparent 32%, rgba(243,217,139,.26), transparent 72%);
}

.radial-gauge span, .radial-gauge i { position: absolute; inset: 22px; border: 1px solid rgba(214,168,74,.22); border-radius: 50%; }
.radial-gauge i { inset: 50%; width: 52px; height: 1px; transform-origin: left center; transform: rotate(calc(var(--current-depth) * 1deg)); border: 0; background: var(--champagne); }

.mask-label { position: absolute; font-size: 10px; letter-spacing: .18em; color: rgba(247,240,210,.58); writing-mode: vertical-rl; }
.mask-left { left: 30px; top: 34vh; }
.mask-right { right: 30px; top: 44vh; }

.scan-line {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--scan-y);
  height: 1px;
  z-index: 14;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(243,217,139,.14), var(--champagne), rgba(243,217,139,.14), transparent);
  box-shadow: 0 0 22px rgba(214,168,74,.55), 0 0 80px rgba(214,168,74,.18);
}

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 12vh 8vw;
}

.chamber-grid {
  position: absolute;
  inset: 0;
  opacity: .11;
  background-image: linear-gradient(90deg, rgba(214,168,74,.28) 1px, transparent 1px), linear-gradient(0deg, rgba(214,168,74,.16) 1px, transparent 1px);
  background-size: 6.25vw 100%, 100% 12.5vh;
}

.title-plaque { position: absolute; left: 7vw; bottom: 12vh; z-index: 2; }
.micro, .tag { font-family: "IBM Plex Mono", monospace; letter-spacing: .18em; color: var(--gold); font-size: 11px; }
h1 {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: clamp(3.6rem, 10vw, 10rem);
  line-height: .82;
  letter-spacing: .12em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--gold);
  text-shadow: 0 0 34px rgba(214,168,74,.3);
}

.instrument {
  position: absolute;
  z-index: 6;
  width: min(410px, 76vw);
  padding: 18px 20px;
  border: 1px solid rgba(214,168,74,.34);
  background: rgba(11,10,7,.48);
  box-shadow: inset 0 0 28px rgba(214,168,74,.055), 0 20px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
}

.instrument p, .ledger-glass p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--ivory); }
.typed::after { content: ""; display: inline-block; width: 8px; height: 1.15em; margin-left: 4px; vertical-align: -2px; background: var(--champagne); box-shadow: 0 0 12px var(--champagne); animation: blink 1.1s steps(2) infinite; }

.intro-panel { right: 13vw; top: 28vh; }
.specimen-note { left: 9vw; bottom: 13vh; }
.reef-note { right: 10vw; top: 16vh; }
.consent-note { left: 10vw; top: 18vh; }

.quiet-command {
  position: absolute;
  right: 13vw;
  bottom: 18vh;
  z-index: 8;
  color: var(--champagne);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  border: 1px solid rgba(214,168,74,.44);
  padding: 12px 16px;
  background: rgba(3,3,3,.62);
}

.fish { position: absolute; z-index: 4; filter: drop-shadow(0 22px 35px rgba(0,0,0,.6)); animation: swim 18s cubic-bezier(.22,1,.36,1) infinite alternate; }
.fish span { position: absolute; display: block; }
.fish-ribbon { width: 330px; height: 126px; left: 20vw; top: 22vh; }
.fish .body { inset: 32px 48px 30px 52px; border-radius: 55% 45% 50% 50%; background: radial-gradient(circle at 30% 22%, var(--champagne), var(--gold) 24%, var(--antique) 78%); box-shadow: inset -18px -14px 28px rgba(11,10,7,.52), inset 12px 10px 18px rgba(247,240,210,.35); }
.gold-fish .tail { right: 12px; top: 34px; width: 74px; height: 62px; background: radial-gradient(circle at 25% 50%, var(--champagne), var(--gold) 46%, var(--antique)); clip-path: polygon(0 50%, 100% 0, 76% 50%, 100% 100%); }
.fish .fin { background: rgba(231,124,79,.78); border-radius: 70% 20% 70% 20%; box-shadow: inset 0 -8px 12px rgba(122,75,18,.38); }
.fin-top { width: 70px; height: 28px; left: 124px; top: 10px; transform: rotate(-8deg); animation: fin 5s ease-in-out infinite; }
.fin-low { width: 82px; height: 24px; left: 138px; bottom: 12px; transform: rotate(12deg); animation: fin 5.7s ease-in-out infinite reverse; }
.fish .eye { width: 10px; height: 10px; left: 88px; top: 50px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px #0B0A07, 0 0 16px var(--coral); }

.black-fish { width: 230px; height: 190px; left: 12vw; bottom: 10vh; animation-duration: 22s; }
.black-fish .body { inset: 34px 52px 34px 34px; border-radius: 58% 42% 56% 44%; background: radial-gradient(circle at 35% 20%, #1C2F2A, #0B0A07 44%, #030303 76%); border: 1px solid rgba(243,217,139,.62); }
.black-fish .tail { right: 18px; top: 56px; width: 72px; height: 78px; background: linear-gradient(135deg, var(--gold), var(--antique)); clip-path: polygon(0 50%, 100% 5%, 72% 50%, 100% 95%); }

.orb-field { position: absolute; inset: 0; }
.orb { position: absolute; display: grid; place-items: center; border-radius: 50%; color: var(--champagne); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .15em; border: 1px solid rgba(214,168,74,.42); background: radial-gradient(circle at 30% 20%, rgba(247,240,210,.55), rgba(214,168,74,.72) 24%, rgba(122,75,18,.88) 64%, rgba(11,10,7,.92)); box-shadow: inset -18px -22px 34px rgba(3,3,3,.55), 0 28px 70px rgba(214,168,74,.12); animation: orbit 19s ease-in-out infinite alternate; }
.orb-large { width: 190px; height: 190px; left: 52vw; top: 20vh; }
.orb-mid { width: 128px; height: 128px; left: 70vw; top: 56vh; animation-delay: -6s; }
.orb-small { width: 82px; height: 82px; left: 34vw; top: 34vh; animation-delay: -9s; }
.orb-ledger { width: 150px; height: 92px; border-radius: 42% 58% 44% 56%; left: 44vw; top: 68vh; animation-delay: -3s; }
.orb-coral { background: radial-gradient(circle at 30% 20%, var(--champagne), var(--coral) 38%, var(--antique)); }
.tethers { position: absolute; inset: 16vh 8vw; width: 84vw; height: 70vh; z-index: 1; }
.tethers path { fill: none; stroke: rgba(214,168,74,.36); stroke-width: .16; stroke-dasharray: 1 1.6; }

.reef-band { position: absolute; left: 3vw; right: 3vw; top: 43vh; height: 160px; display: flex; align-items: center; justify-content: space-around; transform: rotate(-2deg); }
.capsule, .pillow-ledger, .ring { position: relative; border: 1px solid rgba(214,168,74,.48); background: radial-gradient(circle at 32% 20%, rgba(247,240,210,.42), rgba(214,168,74,.68), rgba(11,10,7,.92) 76%); box-shadow: inset -20px -20px 30px rgba(3,3,3,.55), 0 24px 70px rgba(214,168,74,.14); }
.capsule { width: 210px; height: 82px; border-radius: 999px; display: grid; place-items: center; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .18em; color: var(--ivory); }
.pillow-ledger { width: 170px; height: 124px; border-radius: 35% 44% 38% 48%; display: grid; place-items: center; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .18em; }
.ring { width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, transparent 0 38%, rgba(214,168,74,.82) 39% 56%, rgba(11,10,7,.9) 75%); }
.ring-two { transform: scale(.75); }

.water-column { position: absolute; left: 50%; top: 10vh; bottom: 10vh; width: 2px; background: linear-gradient(transparent, rgba(214,168,74,.5), transparent); }
.consent-ring { position: absolute; left: 50%; width: 180px; height: 180px; margin-left: -90px; border-radius: 50%; border: 1px solid rgba(243,217,139,.58); display: grid; place-items: center; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .18em; color: var(--champagne); box-shadow: inset 0 0 34px rgba(214,168,74,.13), 0 0 48px rgba(214,168,74,.12); }
.ring-a { top: 6vh; }
.ring-b { top: 34vh; transform: scale(.78); }
.ring-c { top: 62vh; transform: scale(1.08); }
.vertical-school b { position: absolute; width: 42px; height: 19px; border-radius: 60% 45% 45% 60%; background: linear-gradient(90deg, var(--gold), var(--champagne)); left: calc(50% - 20px); top: 20vh; box-shadow: inset -8px -5px 12px rgba(122,75,18,.5); animation: ascend 14s ease-in-out infinite; }
.vertical-school b:nth-child(2) { animation-delay: -3s; left: 54%; }
.vertical-school b:nth-child(3) { animation-delay: -6s; left: 46%; background: var(--coral); }
.vertical-school b:nth-child(4) { animation-delay: -9s; left: 57%; }
.vertical-school b:nth-child(5) { animation-delay: -12s; left: 43%; }

.ledger { display: grid; place-items: center; }
.ledger-glass { width: min(680px, 78vw); min-height: 220px; border: 1px solid rgba(214,168,74,.42); background: rgba(11,10,7,.58); padding: 34px; box-shadow: inset 0 0 60px rgba(214,168,74,.06), 0 30px 90px rgba(0,0,0,.5); }
.final-definition { font-size: clamp(1.4rem, 3vw, 2.8rem) !important; line-height: 1.35 !important; }
.final-school { position: absolute; inset: 0; animation: schoolCircle 32s linear infinite; }
.final-school i { position: absolute; left: 50%; top: 50%; width: 28px; height: 13px; border-radius: 50%; background: linear-gradient(90deg, var(--gold), var(--champagne)); transform-origin: -170px -80px; }
.final-school i:nth-child(1) { transform: rotate(0deg) translateX(210px); }
.final-school i:nth-child(2) { transform: rotate(45deg) translateX(190px); }
.final-school i:nth-child(3) { transform: rotate(90deg) translateX(220px); }
.final-school i:nth-child(4) { transform: rotate(135deg) translateX(200px); }
.final-school i:nth-child(5) { transform: rotate(180deg) translateX(230px); }
.final-school i:nth-child(6) { transform: rotate(225deg) translateX(190px); }
.final-school i:nth-child(7) { transform: rotate(270deg) translateX(210px); }
.final-school i:nth-child(8) { transform: rotate(315deg) translateX(200px); }

.bubble-cluster { position: absolute; width: 160px; height: 150px; opacity: .75; }
.bubbles-a { right: 15vw; bottom: 12vh; }
.bubbles-b { left: 16vw; bottom: 20vh; }
.bubble-cluster i { position: absolute; display: block; border: 1px solid rgba(243,217,139,.5); border-radius: 50%; box-shadow: inset 0 0 12px rgba(214,168,74,.12); animation: bubble 8s ease-in-out infinite; }
.bubble-cluster i:nth-child(1) { width: 18px; height: 18px; left: 20px; bottom: 0; }
.bubble-cluster i:nth-child(2) { width: 9px; height: 9px; left: 62px; bottom: 38px; animation-delay: -2s; }
.bubble-cluster i:nth-child(3) { width: 26px; height: 26px; left: 98px; bottom: 18px; animation-delay: -4s; }
.bubble-cluster i:nth-child(4) { width: 13px; height: 13px; left: 130px; bottom: 70px; animation-delay: -6s; }
.bubble-cluster i:nth-child(5) { width: 20px; height: 20px; left: 42px; bottom: 92px; animation-delay: -1s; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes swim { from { transform: translate3d(-2vw, 1vh, 0) rotate(-2deg); } to { transform: translate3d(8vw, -3vh, 0) rotate(3deg); } }
@keyframes fin { 50% { transform: rotate(18deg) scaleY(.82); } }
@keyframes orbit { from { transform: translate3d(-1vw, 2vh, 0); } to { transform: translate3d(3vw, -3vh, 0); } }
@keyframes ascend { from { transform: translateY(58vh) rotate(-8deg); opacity: 0; } 20%,80% { opacity: 1; } to { transform: translateY(-12vh) rotate(8deg); opacity: 0; } }
@keyframes schoolCircle { to { transform: rotate(360deg); } }
@keyframes bubble { 50% { transform: translateY(-28px) translateX(8px); opacity: .35; } }

@media (max-width: 760px) {
  .hud-topline { left: 24vw; right: 24vw; gap: 18px; font-size: 9px; }
  .radial-gauge { display: none; }
  .chamber { padding: 13vh 7vw; }
  .intro-panel, .specimen-note, .reef-note, .consent-note { left: 8vw; right: auto; top: auto; bottom: 14vh; }
  .fish-ribbon { left: 4vw; top: 18vh; transform: scale(.72); }
  .reef-band { transform: rotate(-2deg) scale(.72); width: 140vw; left: -20vw; }
  .orb-large { left: 46vw; }
  .orb-mid { left: 58vw; }
  .quiet-command { right: auto; left: 8vw; bottom: 7vh; }
}