:root {
  /* Compliance terms: (Google Interactive Narrative Device Device:** design this batch uses scientific concept (telomere shortening states Interface (z: +200px IntersectionObserver setup with `threshold: 0.15` */
  --abyss: #030b1a;
  --midnight: #091b33;
  --submarine: #0d2847;
  --cyan: #7fdbda;
  --electric: #00e5ff;
  --violet: #7f53ac;
  --green: #00ffa3;
  --fog: #c8dce8;
  --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: #030b1a;
  color: #c8dce8;
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.01em;
  perspective: 1200px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 50%, rgba(0,229,255,0.06) 0%, transparent 70%);
  mix-blend-mode: screen;
  z-index: 2;
}

.depth-layers, .abyss-layer, .caustics, .organism-layer, .refraction-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.depth-layers { z-index: -1; transform-style: preserve-3d; }

.abyss-layer {
  background:
    radial-gradient(circle at 68% 18%, rgba(127,83,172,0.22), transparent 26%),
    radial-gradient(circle at 28% 42%, rgba(0,229,255,0.09), transparent 30%),
    linear-gradient(180deg, #091b33 0%, #030b1a 100%);
  transform: translateZ(-400px) scale(1.36);
}

.caustics {
  opacity: .72;
  transform: translateZ(-380px) scale(1.3);
  background-image:
    repeating-radial-gradient(ellipse at 20% 20%, transparent 0 38px, rgba(127,219,218,0.08) 40px 42px, transparent 44px 92px),
    repeating-radial-gradient(ellipse at 70% 62%, transparent 0 58px, rgba(127,219,218,0.05) 60px 62px, transparent 64px 120px);
  filter: blur(10px);
  animation: causticDrift 40s ease-in-out infinite alternate;
}

.organism-layer {
  transform: translate3d(0, calc(var(--scroll) * -0.3px), -200px) scale(1.18);
}

.organism-layer i,
.particle-burst b {
  position: absolute;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c), transparent 68%);
  opacity: var(--o);
  filter: blur(1px);
  box-shadow: 0 0 22px var(--c);
  animation: driftUp var(--d) linear infinite;
  animation-delay: var(--delay);
}

.refraction-layer { z-index: 3; transform: translateZ(100px); }

.refraction-layer i {
  position: absolute;
  left: -70vw;
  width: 58vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.03), transparent);
  animation: streak 60s linear infinite;
}

.refraction-layer i:nth-child(1) { top: 16%; animation-delay: -10s; }
.refraction-layer i:nth-child(2) { top: 38%; width: 36vw; animation-delay: -28s; }
.refraction-layer i:nth-child(3) { top: 61%; width: 52vw; animation-delay: -44s; }
.refraction-layer i:nth-child(4) { top: 83%; width: 44vw; animation-delay: -3s; }

.depth-nav {
  position: fixed;
  left: 28px;
  top: 50%;
  z-index: 20;
  display: grid;
  gap: 26px;
  transform: translateY(-50%) translateZ(200px);
}

.depth-nav::before {
  content: "";
  position: absolute;
  top: -24px;
  bottom: -24px;
  left: 5px;
  width: 1px;
  background: rgba(127,219,218,0.25);
}

.depth-nav a {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(127,219,218,0.36);
  background: rgba(13,40,71,0.45);
}

.depth-nav a::after {
  content: attr(data-zone);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 10px;
  border: 1px solid rgba(127,219,218,0.12);
  border-radius: 999px;
  background: rgba(8, 26, 56, 0.62);
  color: #c8dce8;
  font: 400 .72rem "JetBrains Mono", monospace;
  opacity: 0;
  white-space: nowrap;
  transition: opacity .3s ease, transform .3s ease;
}

.depth-nav a:hover::after { opacity: 1; transform: translate(4px, -50%); }
.depth-nav a.active { background: #7fdbda; box-shadow: 0 0 22px rgba(0,229,255,.55); animation: pulse 3s ease-in-out infinite; }

.descent { position: relative; z-index: 5; transform-style: preserve-3d; }
.zone { position: relative; min-height: 180vh; padding: 18vh 8vw; transform-style: preserve-3d; }
.surface { min-height: 100vh; display: grid; place-items: center; text-align: center; }
.shallow, .mesopelagic, .bathypelagic { min-height: 200vh; }
.abyss { min-height: 150vh; display: grid; place-items: center; }

.surface-copy { max-width: 980px; transform: translateZ(0); }

h1, h2 {
  margin: 0 0 1rem;
  font-family: "Share Tech Mono", "JetBrains Mono", monospace;
  font-weight: 400;
  color: #7fdbda;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.08;
  text-shadow: 0 0 30px rgba(0, 229, 255, 0.15);
}

h1 { font-size: clamp(2.2rem, 8vw, 6.6rem); }
h2 { font-size: clamp(1.6rem, 4vw, 3.2rem); }
p { font-size: clamp(0.95rem, 1.4vw, 1.15rem); margin: 0; }

.opening-line {
  max-width: 740px;
  margin: 0 auto;
  opacity: 0;
  animation: revealText 1.8s ease 2.4s forwards;
}

.type-title { overflow: hidden; white-space: nowrap; border-right: 1px solid #00e5ff; width: 0; animation: typing 2.2s steps(19) .3s forwards, caret 1.1s step-end infinite; }

.depth-label {
  margin-bottom: .9rem;
  color: rgba(200, 220, 232, 0.5);
  font: 300 .75rem "IBM Plex Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.glass-panel {
  width: min(60vw, 760px);
  margin: 18vh 0;
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid rgba(127,219,218,0.12);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(13,40,71,0.45) 0%, rgba(9,27,51,0.55) 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(1.2);
  transition: border-color .4s ease, box-shadow .4s ease, opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

@supports not (backdrop-filter: blur(20px)) { .glass-panel { background: rgba(9,27,51,0.85); } }

.glass-panel:hover { border-color: rgba(127,219,218,0.25); box-shadow: 0 8px 32px rgba(0,229,255,0.08), inset 0 1px 0 rgba(255,255,255,0.08); }
.reveal { opacity: 0; transform: translateY(60px); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.panel-left { margin-left: 8vw; }
.panel-right { margin-left: auto; margin-right: 7vw; width: min(45vw, 620px); }
.wide-panel { width: min(68vw, 880px); margin-left: 12vw; }
.small-panel { width: min(45vw, 560px); }

.dna-art {
  margin: 2rem 0 0;
  padding: 1.2rem;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(0,229,255,.12);
  background: rgba(3,11,26,.56);
  color: #00e5ff;
  font: 400 .85rem/1.8 "JetBrains Mono", monospace;
}

.dna-art mark { color: #00e5ff; background: transparent; animation: erodeFade 5s ease-in-out infinite alternate; }
.dna-art mark:nth-of-type(2) { animation-delay: .8s; }
.dna-art mark:nth-of-type(3) { animation-delay: 1.6s; }
.dna-art span { color: #00ffa3; }

.telomere-sticky {
  position: sticky;
  top: 22vh;
  z-index: 12;
  width: max-content;
  max-width: 88vw;
  margin-left: auto;
  margin-right: 6vw;
  padding: .9rem 1rem;
  border: 1px solid rgba(127,219,218,0.14);
  border-radius: 16px;
  background: rgba(8,26,56,.58);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 30px rgba(0,229,255,.08);
  font-family: "JetBrains Mono", monospace;
}

.telomere-sticky span { display: block; margin-bottom: .4rem; color: rgba(200,220,232,.5); font-size: .68rem; letter-spacing: .14em; }
.telomere-sticky strong { color: #00e5ff; font-size: clamp(.92rem, 2vw, 1.25rem); font-weight: 400; letter-spacing: .08em; transition: color .2s ease; }
.telomere-sticky strong.flash { color: #7f53ac; }
.telomere-sticky strong.senescence { color: #7f53ac; animation: senescence 2.6s ease-in-out infinite; }

.chromosome-svg {
  position: absolute;
  inset: 8vh auto auto 50%;
  width: min(56vw, 680px);
  height: auto;
  opacity: .62;
  transform: translateX(-50%) translateZ(-50px);
}

.chromosome-line, .coral-line {
  fill: none;
  stroke: #7f53ac;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: drop-shadow(0 0 8px rgba(127,83,172,.5));
}

.chromosome-line.cap { stroke: #7fdbda; stroke-width: 2; filter: drop-shadow(0 0 12px rgba(0,229,255,.55)); }
.coral-line { stroke: rgba(127,219,218,.45); }
.bathypelagic.draw .chromosome-line, .bathypelagic.draw .coral-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.5s cubic-bezier(0.65, 0, 0.35, 1); }
.bathypelagic.draw .delay-one { transition-delay: .4s; }
.bathypelagic.draw .delay-two { transition-delay: .8s; }
.bathypelagic.draw .delay-three { transition-delay: 1.2s; }

.particle-burst { position: absolute; inset: 38% 18% auto auto; width: 220px; height: 220px; }
.particle-burst b { --s: 7px; --c: #00ffa3; --o: .22; --d: 18s; --delay: 0s; }
.particle-burst b:nth-child(1) { --x: 20%; --y: 80%; }
.particle-burst b:nth-child(2) { --x: 48%; --y: 60%; --s: 4px; --c: #00e5ff; --delay: -5s; }
.particle-burst b:nth-child(3) { --x: 72%; --y: 76%; --s: 6px; --c: #7f53ac; --delay: -11s; }
.particle-burst b:nth-child(4) { --x: 34%; --y: 42%; --s: 3px; --delay: -7s; }
.particle-burst b:nth-child(5) { --x: 58%; --y: 28%; --s: 5px; --c: #00e5ff; --delay: -14s; }

.jelly-divider {
  position: absolute;
  bottom: 4vh;
  width: 180px;
  height: 64px;
  border-top: 1px solid rgba(127,219,218,.18);
  border-radius: 50% 50% 0 0;
  opacity: .6;
  animation: jelly 7s ease-in-out infinite;
}

.jelly-divider::before, .jelly-divider::after { content: ""; position: absolute; top: 18px; width: 1px; height: 46px; background: linear-gradient(#7fdbda, transparent); opacity: .28; }
.jelly-divider::before { left: 46px; } .jelly-divider::after { right: 48px; }

.abyss-panel { width: min(50vw, 650px); margin: 0 auto; text-align: center; }
.signal-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: 3rem auto 0;
  border: 1px solid rgba(0,255,163,.55);
  border-radius: 50%;
  color: #00ffa3;
  text-decoration: none;
  font: 400 .82rem "JetBrains Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 0 34px rgba(0,255,163,.14), inset 0 0 24px rgba(0,255,163,.08);
  animation: ringPulse 4s ease-in-out infinite;
}

.signal-ring::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px solid rgba(127,219,218,.2); }

@keyframes typing { to { width: 100%; } }
@keyframes caret { 50% { border-color: transparent; } }
@keyframes revealText { to { opacity: 1; } }
@keyframes causticDrift { to { transform: translate3d(-4vw, 3vh, -380px) scale(1.36) rotate(.8deg); } }
@keyframes driftUp { from { transform: translateY(40px); } to { transform: translateY(-220px); } }
@keyframes streak { to { transform: translateX(170vw); } }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes senescence { 0%,100% { opacity: .55; text-shadow: none; } 50% { opacity: 1; text-shadow: 0 0 22px rgba(127,83,172,.8); } }
@keyframes erodeFade { to { color: rgba(127,83,172,.45); } }
@keyframes jelly { 0%,100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-12px) scaleX(1.08); } }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: .72; } 50% { transform: scale(1.08); opacity: 1; } }

@media (max-width: 820px) {
  .zone { padding: 15vh 8vw; }
  .depth-nav { left: 14px; }
  .glass-panel, .panel-left, .panel-right, .wide-panel, .small-panel, .abyss-panel { width: calc(100vw - 5rem); margin-left: 2.5rem; margin-right: 0; }
  .chromosome-svg { width: 90vw; opacity: .32; }
  .telomere-sticky { margin-left: 2.5rem; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .type-title { width: 100%; border-right: 0; }
  .opening-line, .reveal { opacity: 1; transform: none; }
}