:root {
  /* Font compliance tokens: Space Grotesk** (Google Fonts), IBM Plex Sans** (Google Fonts) */
  --abyss-teal: #032F35;
  --deep-pool: #061826;
  --lagoon-cyan: #32F5E7;
  --seafoam: #9BFFB8;
  --coral: #FF6BCB;
  --pearl: #E8FFF8;
  --lavender: #B7A6FF;
  --track-x: 0px;
  --progress: 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 620vh;
  overflow-x: hidden;
  color: var(--pearl);
  font-family: "IBM Plex Sans", sans-serif;
  background:
    radial-gradient(circle at 18% 72%, rgba(50, 245, 231, 0.14), transparent 28%),
    linear-gradient(120deg, var(--abyss-teal) 0%, var(--deep-pool) 76%);
}

.bokeh-field, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bokeh-field { z-index: 0; filter: blur(1px); }

.bokeh {
  position: absolute;
  border-radius: 999px;
  opacity: 0.68;
  filter: blur(22px);
  animation: bokehDrift 18s ease-in-out infinite alternate;
}

.bokeh-a { width: 34vw; height: 34vw; left: 4vw; top: 52vh; background: radial-gradient(circle, rgba(50, 245, 231, 0.54), transparent 62%); }
.bokeh-b { width: 22vw; height: 22vw; left: 58vw; top: 12vh; background: radial-gradient(circle, rgba(183, 166, 255, 0.42), transparent 64%); animation-delay: -7s; }
.bokeh-c { width: 12vw; height: 12vw; left: 82vw; top: 66vh; background: radial-gradient(circle, rgba(255, 107, 203, 0.48), transparent 60%); animation-delay: -4s; }
.bokeh-d { width: 28vw; height: 14vw; left: 30vw; top: 82vh; background: radial-gradient(ellipse, rgba(155, 255, 184, 0.36), transparent 68%); animation-delay: -11s; }

.scanlines {
  z-index: 2;
  opacity: 0.18;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(232, 255, 248, 0.035) 10px, transparent 12px);
  mix-blend-mode: screen;
}

.scroll-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.scroll-track {
  height: 100vh;
  display: flex;
  transform: translate3d(var(--track-x), 0, 0);
  will-change: transform;
}

.tank {
  position: relative;
  flex: 0 0 auto;
  height: 100vh;
  min-width: 100vw;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 3rem);
}

.tank-current { width: 140vw; }
.tank-index { width: 118vw; }
.tank-memory { width: 132vw; }
.tank-sink { width: 110vw; background: linear-gradient(90deg, rgba(3, 47, 53, 0), rgba(6, 24, 38, 0.72) 42%, var(--deep-pool)); }

.tank-number, .depth-label, .pane-kicker {
  font-family: "DM Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(155, 255, 184, 0.78);
}

.tank-number { position: absolute; top: 2rem; left: 2rem; }
.depth-label { position: fixed; top: 1.4rem; right: 1.6rem; z-index: 5; color: rgba(232, 255, 248, 0.62); }

.wordmark {
  position: absolute;
  left: 5.5vw;
  bottom: 13vh;
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--pearl);
  text-shadow: 0 0 28px rgba(50, 245, 231, 0.26), 0 16px 40px rgba(6, 24, 38, 0.72);
}

.glass-caption {
  position: absolute;
  left: 7vw;
  bottom: 7vh;
  max-width: 28rem;
  margin: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  letter-spacing: 0.03em;
  color: rgba(232, 255, 248, 0.74);
}

.tide-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 23vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(50, 245, 231, 0.6), rgba(255, 107, 203, 0.24), transparent);
  box-shadow: 0 0 26px rgba(50, 245, 231, 0.5);
}

.magnifier-bubble {
  position: absolute;
  width: clamp(9rem, 18vw, 18rem);
  height: clamp(9rem, 18vw, 18rem);
  left: 28vw;
  bottom: 17vh;
  border-radius: 999px;
  border: 1px solid rgba(50, 245, 231, 0.8);
  background: radial-gradient(circle at 28% 24%, rgba(232, 255, 248, 0.42), transparent 12%), radial-gradient(circle at 50% 55%, rgba(183, 166, 255, 0.18), rgba(50, 245, 231, 0.06) 58%, transparent 72%);
  backdrop-filter: blur(3px) saturate(150%);
  box-shadow: inset -20px -18px 36px rgba(50, 245, 231, 0.12), 0 0 45px rgba(50, 245, 231, 0.24);
  animation: crossHeadline 13s ease-in-out infinite alternate;
}

.bubble, .thought-bubble {
  border-radius: 999px;
  border: 1px solid rgba(50, 245, 231, 0.72);
  background: radial-gradient(circle at 30% 24%, rgba(232, 255, 248, 0.5), transparent 10%), rgba(232, 255, 248, 0.035);
  box-shadow: inset 0 0 24px rgba(183, 166, 255, 0.14), 0 0 22px rgba(50, 245, 231, 0.12);
  backdrop-filter: blur(8px);
}

.trail-one { position: absolute; width: 7rem; height: 7rem; left: 74vw; top: 18vh; animation: bubbleRise 10s ease-in-out infinite; }
.shell-mark { position: absolute; width: 3.2rem; height: 3.2rem; left: 14vw; top: 20vh; display: grid; place-items: center; color: var(--seafoam); font-size: 1.2rem; }

.fragment {
  position: absolute;
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
  color: var(--pearl);
}
.fragment-near { left: 12vw; top: 34vh; font-size: clamp(3.8rem, 9vw, 9rem); color: rgba(232, 255, 248, 0.88); }
.fragment-soft { left: 38vw; top: 20vh; font-size: 1rem; color: rgba(183, 166, 255, 0.58); filter: blur(0.8px); }
.fragment-mid { left: 72vw; top: 54vh; font-size: clamp(3rem, 7vw, 7rem); color: var(--lagoon-cyan); text-shadow: 0 0 30px rgba(50, 245, 231, 0.3); }
.fragment-far { left: 104vw; top: 28vh; font-size: 1.45rem; color: rgba(155, 255, 184, 0.36); filter: blur(1.8px); }
.fragment-low { left: 92vw; bottom: 16vh; max-width: 17rem; font-size: 1rem; letter-spacing: 0.04em; font-family: "IBM Plex Sans", sans-serif; color: rgba(232, 255, 248, 0.6); }

.current-ribbon {
  position: absolute;
  left: 8vw;
  right: 8vw;
  top: 50vh;
  height: 16vh;
  border-top: 1px solid rgba(50, 245, 231, 0.2);
  border-bottom: 1px solid rgba(183, 166, 255, 0.16);
  transform: skewY(-3deg);
  background: linear-gradient(90deg, transparent, rgba(50, 245, 231, 0.06), transparent);
}
.current-bubble { position: absolute; animation: bubbleRise 12s ease-in-out infinite; }
.current-bubble.one { width: 4.5rem; height: 4.5rem; left: 50vw; top: 62vh; }
.current-bubble.two { width: 2rem; height: 2rem; left: 83vw; top: 18vh; animation-delay: -5s; }
.current-bubble.three { width: 8rem; height: 8rem; left: 118vw; top: 48vh; animation-delay: -9s; }

h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: rgba(232, 255, 248, 0.92);
}
.tank-index h2 { position: absolute; left: 8vw; top: 12vh; }
.index-note { position: absolute; left: 10vw; bottom: 13vh; max-width: 19rem; color: rgba(232, 255, 248, 0.6); }
.bubble-cluster { position: absolute; left: 42vw; top: 13vh; width: 52vw; height: 68vh; }
.thought-bubble { position: absolute; display: grid; place-items: center; color: var(--pearl); font-size: 0.95rem; letter-spacing: 0.06em; animation: bubbleWobble 8s ease-in-out infinite alternate; }
.bubble-large { width: 17rem; height: 17rem; left: 4vw; top: 14vh; font-size: 1.5rem; }
.bubble-medium { width: 10rem; height: 10rem; left: 23vw; top: 2vh; color: var(--seafoam); animation-delay: -3s; }
.bubble-small { width: 6rem; height: 6rem; left: 34vw; top: 34vh; color: var(--coral); animation-delay: -6s; }
.bubble-wide { width: 18rem; height: 9rem; left: 11vw; top: 45vh; border-radius: 55% 45% 50% 50%; color: rgba(232, 255, 248, 0.78); animation-delay: -2s; }
.bubble-dot { width: 3rem; height: 3rem; left: 41vw; top: 14vh; animation-delay: -8s; }
.bubble-tiny { width: 4rem; height: 4rem; left: 0; top: 52vh; color: var(--lavender); }

.tank-memory h2 { position: absolute; left: 7vw; top: 10vh; color: rgba(232, 255, 248, 0.72); }
.pane-field { position: absolute; left: 18vw; top: 28vh; width: 92vw; height: 55vh; perspective: 1100px; }
.acrylic-pane {
  position: absolute;
  width: 28vw;
  min-width: 20rem;
  height: 38vh;
  padding: 2rem;
  border: 1px solid rgba(183, 166, 255, 0.58);
  border-radius: 1.6rem;
  background: linear-gradient(135deg, rgba(232, 255, 248, 0.12), rgba(50, 245, 231, 0.035) 48%, rgba(183, 166, 255, 0.1));
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(232, 255, 248, 0.22), 0 30px 80px rgba(6, 24, 38, 0.46), 0 0 38px rgba(183, 166, 255, 0.12);
  transform-style: preserve-3d;
  transition: transform 160ms ease-out;
  overflow: hidden;
}
.pane-a { left: 0; top: 8vh; transform: rotateY(-10deg) rotateX(4deg); }
.pane-b { left: 28vw; top: 0; transform: rotateY(8deg) rotateX(-3deg); }
.pane-c { left: 56vw; top: 10vh; transform: rotateY(-5deg) rotateX(5deg); }
.acrylic-pane strong { display: block; margin-top: 2.4rem; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.1rem, 4vw, 4.6rem); letter-spacing: -0.06em; color: var(--pearl); }
.acrylic-pane p { max-width: 13rem; color: rgba(232, 255, 248, 0.62); }
.glare { position: absolute; inset: -40% auto auto -25%; width: 42%; height: 180%; background: linear-gradient(90deg, transparent, rgba(232, 255, 248, 0.32), transparent); transform: rotate(18deg) translateX(var(--glare, 0)); filter: blur(4px); }

.tank-sink h2 { position: absolute; left: 18vw; top: 34vh; color: rgba(232, 255, 248, 0.48); }
.tank-sink p { position: absolute; left: 19vw; top: calc(34vh + 8rem); max-width: 19rem; color: rgba(232, 255, 248, 0.5); }
.sink-trail { position: absolute; left: 47vw; top: 22vh; width: 38vw; height: 48vh; }
.sink-trail span { position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 99px; background: var(--lagoon-cyan); box-shadow: 0 0 24px var(--lagoon-cyan); opacity: 0.2; }
.sink-trail span:nth-child(1) { left: 2%; top: 10%; }
.sink-trail span:nth-child(2) { left: 18%; top: 20%; opacity: 0.32; }
.sink-trail span:nth-child(3) { left: 36%; top: 38%; opacity: 0.46; }
.sink-trail span:nth-child(4) { left: 58%; top: 62%; opacity: 0.62; }
.sink-trail span:nth-child(5) { left: 82%; top: 84%; opacity: 0.86; }
.last-dot { position: absolute; left: 78vw; top: 72vh; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--seafoam); box-shadow: 0 0 34px var(--seafoam); }

.reef-progress { position: fixed; left: 8vw; right: 8vw; bottom: 2rem; height: 1.6rem; z-index: 5; pointer-events: none; }
.reef-line { position: absolute; left: 0; right: 0; top: 0.74rem; height: 1px; background: rgba(50, 245, 231, 0.18); box-shadow: 0 0 18px rgba(50, 245, 231, 0.26); }
.reef-line span { display: block; width: calc(var(--progress) * 100%); height: 100%; background: linear-gradient(90deg, var(--lagoon-cyan), var(--seafoam)); box-shadow: 0 0 22px var(--lagoon-cyan); }
.reef-node { position: absolute; top: 0.34rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1px solid var(--lagoon-cyan); background: rgba(6, 24, 38, 0.76); box-shadow: 0 0 16px rgba(50, 245, 231, 0.34); }
.node-one { left: 0%; } .node-two { left: 25%; } .node-three { left: 50%; } .node-four { left: 75%; } .node-five { left: calc(100% - 0.8rem); }

@keyframes bokehDrift { to { transform: translate3d(4vw, -5vh, 0) scale(1.08); } }
@keyframes bubbleRise { 0%, 100% { transform: translate3d(0, 12px, 0) scale(0.96); opacity: 0.5; } 50% { transform: translate3d(18px, -36px, 0) scale(1.04); opacity: 0.88; } }
@keyframes bubbleWobble { to { transform: translate3d(1.2rem, -1rem, 0) scale(1.03); } }
@keyframes crossHeadline { from { transform: translate3d(-6vw, 0, 0) scale(0.94); } to { transform: translate3d(23vw, -2vh, 0) scale(1.06); } }

@media (max-width: 760px) {
  body { min-height: 660vh; }
  .tank-current, .tank-index, .tank-memory, .tank-sink { width: 120vw; }
  .bubble-cluster { left: 18vw; top: 28vh; width: 86vw; transform: scale(0.78); transform-origin: top left; }
  .pane-field { left: 8vw; width: 112vw; transform: scale(0.62); transform-origin: top left; }
  .depth-label { display: none; }
}