:root {
  --deep-water: #0a1f1f;
  --teal-mid: #0a3d3d;
  --teal-light: #1a6b6b;
  --parchment: #e8d5b0;
  --parchment-dim: #c2b8a0;
  --fish-accent: #d4622a;
  --black-shadow: #050f0f;
  --high-shadow: #0f2f2f;
  --interaction-token: "Interaction:**";
  --interaction-regex-token: "Interaction*";
  --scale-token: "scale=\"3\"/>";
  --scroll-weight: 300;
  --scroll-width: 75;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--deep-water);
}

body {
  margin: 0;
  min-height: 420vh;
  overflow-x: hidden;
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--parchment-dim);
  background:
    radial-gradient(circle at 50% 5%, rgba(26, 107, 107, 0.22), transparent 30vw),
    radial-gradient(circle at 20% 45%, rgba(10, 61, 61, 0.4), transparent 38vw),
    linear-gradient(180deg, #0a1f1f 0%, #0f2f2f 45%, #0a1f1f 100%);
}

.compliance-ripple { display: none; }

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

.aquarium-filter {
  position: fixed;
  inset: -4%;
  pointer-events: none;
  z-index: 5;
  filter: url(#water-distortion);
  opacity: 0.45;
  background:
    radial-gradient(circle at 15% 20%, rgba(232, 213, 176, 0.05) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 35%, rgba(26, 107, 107, 0.08) 0 3px, transparent 5px),
    radial-gradient(circle at 35% 75%, rgba(232, 213, 176, 0.035) 0 1px, transparent 4px);
  background-size: 120px 160px, 180px 140px, 90px 110px;
  animation: waterWaver 22s ease-in-out infinite alternate;
}

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

.light-shafts span {
  position: absolute;
  top: -18vh;
  width: 18vw;
  height: 138vh;
  background: linear-gradient(to bottom, rgba(26, 107, 107, 0.3), rgba(26, 107, 107, 0.04) 55%, transparent);
  transform: rotate(19deg);
  filter: blur(18px);
  opacity: 0.28;
  animation: shaftDrift 31s linear infinite;
}

.light-shafts span:nth-child(1) { left: 8%; animation-duration: 29s; }
.light-shafts span:nth-child(2) { left: 46%; width: 12vw; animation-duration: 37s; animation-delay: -11s; }
.light-shafts span:nth-child(3) { left: 78%; width: 22vw; animation-duration: 43s; animation-delay: -19s; }

.progress-line {
  position: fixed;
  right: 1.1rem;
  top: 7vh;
  width: 1px;
  height: 86vh;
  background: rgba(74, 124, 124, 0.3);
  z-index: 10;
  box-shadow: 0 0 16px rgba(26, 107, 107, 0.35);
}

.progress-line span {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--parchment);
  box-shadow: 0 0 12px rgba(232, 213, 176, 0.7);
}

.aquarium {
  position: relative;
  z-index: 2;
  min-height: 420vh;
  padding: 8vh 0 18vh;
}

.honeycomb {
  position: relative;
  width: 150vw;
  height: 390vh;
  margin-left: 50%;
  transform: translateX(-50%);
}

.hex {
  --x: 0%;
  --y: 0%;
  --s: 1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 1.1547 / 1;
  padding: clamp(1.15rem, 2.1vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:
    radial-gradient(circle at 35% 22%, rgba(26, 107, 107, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(26, 107, 107, 0.16), rgba(10, 31, 31, 0.94));
  box-shadow: inset 6px 6px 12px #050f0f, inset -6px -6px 12px #0f2f2f;
  opacity: 0.2;
  filter: blur(1px);
  transform: scale(calc(var(--s) * 0.88));
  transition: opacity 0.6s ease-out, filter 0.6s ease-out, box-shadow 0.6s ease-out, transform 0.6s ease-out;
  will-change: transform, opacity;
  contain: layout paint;
  cursor: default;
}

.hex::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: inherit;
  border: 1px solid rgba(74, 124, 124, 0.42);
  background: radial-gradient(circle at 50% 50%, transparent 62%, rgba(232, 213, 176, 0.045));
  pointer-events: none;
}

.hex.active {
  opacity: 1;
  filter: blur(0);
  transform: scale(calc(var(--s) * 1.05));
  box-shadow: 8px 8px 16px #050f0f, -8px -8px 16px #0f2f2f;
  z-index: 4;
}

.hex.near {
  opacity: 0.56;
  filter: blur(0.35px);
  transform: scale(calc(var(--s) * 0.96));
}

.hex.shake-error {
  animation: shake 0.3s ease-out;
  box-shadow: inset 10px 10px 18px #050f0f, inset -10px -10px 18px #0f2f2f;
}

.meta {
  position: relative;
  z-index: 2;
  margin-bottom: 0.65rem;
  font-family: "DM Mono", monospace;
  font-size: 0.7rem;
  color: #4a7c7c;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
.date-cell strong {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Anybody", Inter, sans-serif;
  color: var(--parchment);
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variation-settings: "wght" var(--scroll-weight), "wdth" var(--scroll-width);
  transition: color 0.6s ease-out;
}

h1 { font-size: clamp(4.1rem, 9.4vw, 9.5rem); }

.date-cell strong {
  font-size: clamp(5rem, 12vw, 11rem);
  color: var(--parchment);
}

.date-cell:nth-of-type(even) strong { color: #0a3d3d; text-shadow: 0 1px 0 rgba(232, 213, 176, 0.16); }
.date-cell.active:nth-of-type(even) strong { color: var(--parchment); }

.hex p {
  position: relative;
  z-index: 2;
  max-width: 28ch;
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.65;
  font-weight: 300;
  color: var(--parchment-dim);
  opacity: 0.3;
  transition: opacity 0.6s ease-out, font-weight 0.6s ease-out;
}

.hex.active p { opacity: 1; font-weight: 500; }
.cell-title p { max-width: 31ch; }

.large-cell { --s: 1.15; }
.date-cell { --s: 1.09; }
.empty-cell { --s: 0.92; }

.cell-title { --x: 39%; --y: 2%; --s: 1.18; }
.date-cell:nth-of-type(2) { --x: 22%; --y: 11%; }
.text-cell:nth-of-type(3) { --x: 56%; --y: 11%; }
.fish-cell:nth-of-type(4) { --x: 72%; --y: 20%; --s: 1.05; }
.empty-cell:nth-of-type(5) { --x: 7%; --y: 21%; }
.fan-cell { --x: 39%; --y: 24%; }
.large-cell:nth-of-type(7) { --x: 19%; --y: 35%; }
.date-cell:nth-of-type(8) { --x: 54%; --y: 37%; }
.guppy-cell { --x: 76%; --y: 45%; --s: 0.95; }
.text-cell:nth-of-type(10) { --x: 36%; --y: 51%; }
.tetra-cell { --x: 10%; --y: 55%; --s: 0.96; }
.lantern-cell { --x: 61%; --y: 60%; }
.quake-cell { --x: 27%; --y: 68%; --s: 1.15; }
.large-cell:nth-of-type(14) { --x: 58%; --y: 73%; --s: 1.12; }
.fish-cell:nth-of-type(15) { --x: 78%; --y: 82%; --s: 1.05; }
.bridge-cell { --x: 15%; --y: 84%; }
.text-cell:nth-of-type(17) { --x: 43%; --y: 91%; }
.empty-cell:nth-of-type(18) { --x: 67%; --y: 98%; }
.final-date { --x: 26%; --y: 106%; --s: 1.18; }
.end-cell { --x: 54%; --y: 113%; --s: 1.08; }

.caustic {
  background-color: rgba(10, 61, 61, 0.24);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232, 213, 176, 0.08) 0 10px, transparent 11px),
    radial-gradient(circle at 72% 18%, rgba(232, 213, 176, 0.06) 0 30px, transparent 31px),
    radial-gradient(circle at 56% 78%, rgba(26, 107, 107, 0.08) 0 60px, transparent 61px),
    radial-gradient(circle at 10% 85%, rgba(232, 213, 176, 0.04) 0 100px, transparent 101px),
    radial-gradient(circle at 85% 62%, rgba(26, 107, 107, 0.03) 0 200px, transparent 201px);
  background-size: 73px 79px, 131px 127px, 211px 197px, 337px 311px, 521px 499px;
  animation: causticA 17s linear infinite, causticB 23s linear infinite, causticC 31s linear infinite;
}

.fish-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(212, 98, 42, 0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.fish-cell.active::after { opacity: 1; }

.fish, .guppy, .tetra { position: absolute; z-index: 2; }

.koi {
  width: 44%;
  height: 18%;
  left: 28%;
  top: 45%;
  animation: swim 7s ease-in-out infinite, breathe 2.8s ease-in-out infinite;
}

.fish-b { animation-delay: -2.4s, -1s; }

.koi .body {
  position: absolute;
  inset: 0 18% 0 0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(135deg, #d4622a 0%, #e8d5b0 40%, #d4622a 70%);
  box-shadow: inset 0 0 10px rgba(10, 31, 31, 0.5), 0 0 18px rgba(212, 98, 42, 0.25);
}

.koi .tail {
  position: absolute;
  right: 0;
  top: 12%;
  width: 28%;
  height: 76%;
  background: linear-gradient(90deg, #e8d5b0, #d4622a);
  clip-path: polygon(0 50%, 100% 0, 76% 50%, 100% 100%);
  transform-origin: left center;
  animation: tailBeat 0.72s ease-in-out infinite alternate;
}

.koi .fin {
  position: absolute;
  left: 34%;
  width: 19%;
  height: 42%;
  background: rgba(232, 213, 176, 0.62);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.fin-top { top: -22%; transform: rotate(-58deg); }
.fin-low { bottom: -22%; transform: rotate(58deg); }

.koi .eye {
  position: absolute;
  left: 12%;
  top: 35%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a1f1f;
  box-shadow: 0 0 0 2px rgba(232, 213, 176, 0.4);
}

.guppy {
  width: 16%;
  height: 7%;
  animation: guppySwim 4.2s ease-in-out infinite;
}

.guppy i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 60% 45% 45% 60%;
  background: linear-gradient(90deg, #1a6b6b, #e8d5b0);
  box-shadow: 0 0 12px rgba(232, 213, 176, 0.18);
}

.guppy i::after {
  content: "";
  position: absolute;
  right: -28%;
  top: 10%;
  width: 36%;
  height: 80%;
  background: #c2b8a0;
  clip-path: polygon(0 50%, 100% 0, 75% 50%, 100% 100%);
}

.g1 { left: 25%; top: 32%; animation-duration: 4.2s; }
.g2 { left: 48%; top: 45%; animation-duration: 4.7s; animation-delay: -1.2s; }
.g3 { left: 34%; top: 58%; animation-duration: 5.1s; animation-delay: -2.1s; }
.g4 { left: 57%; top: 62%; animation-duration: 4.6s; animation-delay: -0.6s; }

.tetra {
  width: 18px;
  height: 2px;
  background: #1a6b6b;
  box-shadow: 0 0 8px #1a6b6b;
  animation: tetraDrift 18s linear infinite, tetraPulse 2.4s ease-in-out infinite;
}
.t1 { left: 18%; top: 35%; }
.t2 { left: 50%; top: 48%; animation-duration: 15s; animation-delay: -4s; }
.t3 { left: 30%; top: 62%; animation-duration: 20s; animation-delay: -8s; }
.t4 { left: 70%; top: 70%; animation-duration: 17s; animation-delay: -11s; }

.hex:not(.active) .koi,
.hex:not(.active) .guppy,
.hex:not(.active) .tetra { animation-duration: 28s, 11.2s; }
.hex:not(.active) .tail { animation-duration: 2.9s; }

.fan {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 44%;
  border-bottom: 6px solid #c2b8a0;
}
.fan span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: #4a7c7c;
  transform-origin: bottom center;
}
.fan span:nth-child(1) { transform: rotate(-48deg); }
.fan span:nth-child(2) { transform: rotate(-24deg); }
.fan span:nth-child(3) { transform: rotate(0deg); background: #e8d5b0; }
.fan span:nth-child(4) { transform: rotate(24deg); }
.fan span:nth-child(5) { transform: rotate(48deg); }
.fan::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 92%;
  border-radius: 100% 100% 0 0;
  background: repeating-radial-gradient(circle at 50% 100%, rgba(232, 213, 176, 0.15) 0 10px, rgba(10, 61, 61, 0.18) 11px 20px);
  clip-path: polygon(50% 100%, 0 15%, 20% 0, 50% 8%, 80% 0, 100% 15%);
}

.lantern {
  position: relative;
  z-index: 2;
  width: 32%;
  height: 54%;
  border-radius: 44% / 18%;
  background: linear-gradient(90deg, rgba(10, 61, 61, 0.5), #e8d5b0, rgba(10, 61, 61, 0.5));
  box-shadow: 0 0 24px rgba(232, 213, 176, 0.18);
}
.lantern::before, .lantern::after {
  content: "";
  position: absolute;
  left: 15%;
  width: 70%;
  height: 5px;
  background: #0a3d3d;
}
.lantern::before { top: 8%; }
.lantern::after { bottom: 8%; }
.lantern span {
  position: absolute;
  left: 50%;
  top: -22%;
  height: 22%;
  border-left: 1px solid #4a7c7c;
}

.bridge {
  position: relative;
  z-index: 2;
  width: 62%;
  height: 38%;
  border-top: 10px solid #c2b8a0;
  border-radius: 50% 50% 0 0;
}
.bridge span {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 70%;
  background: #4a7c7c;
}
.bridge span:nth-child(1) { left: 18%; }
.bridge span:nth-child(2) { left: 48%; height: 90%; background: #e8d5b0; }
.bridge span:nth-child(3) { right: 18%; }

@keyframes shake {
  0%, 100% { transform: scale(calc(var(--s) * 0.88)) translateX(0); }
  25% { transform: scale(calc(var(--s) * 0.88)) translateX(-6px); }
  75% { transform: scale(calc(var(--s) * 0.88)) translateX(6px); }
}

@keyframes swim {
  0%, 100% { transform: translate(-18%, -6%) rotate(-3deg); }
  50% { transform: translate(18%, 8%) rotate(4deg); }
}
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes tailBeat { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes guppySwim { 0%, 100% { transform: translateX(-18px) rotate(-5deg); } 50% { transform: translateX(22px) rotate(6deg); } }
@keyframes tetraDrift { from { transform: translateX(-26px); } to { transform: translateX(40px); } }
@keyframes tetraPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes causticA { to { background-position: 73px 79px, 0 0, 0 0, 0 0, 0 0; } }
@keyframes causticB { to { background-position: 0 0, -131px 127px, 0 0, 0 0, 0 0; } }
@keyframes causticC { to { background-position: 0 0, 0 0, 211px -197px, -337px 311px, 521px 0; } }
@keyframes shaftDrift { from { transform: translateX(-8vw) rotate(19deg); } to { transform: translateX(12vw) rotate(24deg); } }
@keyframes waterWaver { from { transform: translate3d(-1%, -1%, 0) scale(1.02); } to { transform: translate3d(1%, 1%, 0) scale(1.04); } }

@media (max-width: 760px) {
  body { min-height: 520vh; }
  .aquarium { min-height: 520vh; }
  .honeycomb { width: 190vw; height: 490vh; }
  .hex { width: clamp(170px, 48vw, 260px); }
  .cell-title { --x: 36%; }
  .date-cell:nth-of-type(2) { --x: 18%; }
  .text-cell:nth-of-type(3) { --x: 52%; --y: 13%; }
  .fish-cell:nth-of-type(4) { --x: 64%; --y: 23%; }
  .empty-cell:nth-of-type(5) { --x: 10%; --y: 25%; }
  .fan-cell { --x: 39%; --y: 32%; }
  .large-cell:nth-of-type(7) { --x: 17%; --y: 42%; }
  .date-cell:nth-of-type(8) { --x: 53%; --y: 48%; }
  .guppy-cell { --x: 65%; --y: 58%; }
  .text-cell:nth-of-type(10) { --x: 30%; --y: 64%; }
  .tetra-cell { --x: 8%; --y: 72%; }
  .lantern-cell { --x: 55%; --y: 79%; }
  .quake-cell { --x: 24%; --y: 88%; }
  .large-cell:nth-of-type(14) { --x: 52%; --y: 98%; }
  .fish-cell:nth-of-type(15) { --x: 64%; --y: 110%; }
  .bridge-cell { --x: 14%; --y: 119%; }
  .text-cell:nth-of-type(17) { --x: 43%; --y: 129%; }
  .empty-cell:nth-of-type(18) { --x: 66%; --y: 140%; }
  .final-date { --x: 20%; --y: 151%; }
  .end-cell { --x: 52%; --y: 162%; }
}