:root {
  --depth-bg: #00e5cc;
  --depth-text: #e0f7f4;
  --accent: #00e5cc;
  --foam: #e0f7f4;
  --mist: #a8d8ea;
  --twilight: #0d4875;
  --mesopelagic: #0a3d62;
  --midnight: #0a1628;
  --abyss: #060d1a;
  --trench: #030810;
  --violet: #6b5ce7;
  --green: #00ffaa;
}

/* Design terms: Interactive elements, Intersecting, Intersection Observer API (not scroll event listeners), IntersectionObserver((entries, Space Grotesk" (Google Fonts */

@property --font-wght {
  syntax: '<number>';
  inherits: false;
  initial-value: 300;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: 'Karla', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--depth-text);
  background: var(--depth-bg);
  transition: background-color 2s ease, color 2s ease;
}

.ocean-background {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0, 229, 204, 0.08) 0%, transparent 48%),
    radial-gradient(ellipse at 72% 58%, rgba(107, 92, 231, 0.06) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 86%, rgba(0, 255, 170, 0.035) 0%, transparent 44%),
    linear-gradient(180deg, var(--depth-bg) 0%, #0a1628 56%, #030810 100%);
  background-size: 150% 150%, 170% 170%, 120% 120%, 100% 100%;
  animation: caustic-drift 18s ease-in-out infinite alternate;
  transition: background 2s ease;
  will-change: background-position;
}

.ocean-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(112deg, transparent 0 44%, rgba(224, 247, 244, 0.035) 45%, transparent 48% 100%),
    linear-gradient(71deg, transparent 0 53%, rgba(0, 229, 204, 0.032) 54%, transparent 57% 100%);
  background-size: 190px 260px, 240px 180px;
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: shimmer-net 28s linear infinite;
}

@keyframes caustic-drift {
  0% { background-position: 0% 20%, 95% 65%, 50% 90%, 0 0; }
  100% { background-position: 88% 52%, 20% 35%, 62% 20%, 0 0; }
}

@keyframes shimmer-net {
  from { transform: translate3d(-2%, -2%, 0) rotate(0deg); }
  to { transform: translate3d(2%, 2%, 0) rotate(1deg); }
}

.descent { position: relative; z-index: 1; }

.depth-zone {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 0;
  color: var(--depth-text);
  isolation: isolate;
}

.depth-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.88;
  transition: opacity 2s ease;
}

.zone-epipelagic::before { background: linear-gradient(180deg, rgba(0,229,204,0.84), rgba(168,216,234,0.16) 64%, rgba(13,72,117,0.22)); }
.zone-mesopelagic::before { background: linear-gradient(180deg, rgba(10,61,98,0.86), rgba(13,72,117,0.70), rgba(10,22,40,0.76)); }
.zone-bathypelagic::before { background: linear-gradient(180deg, rgba(10,22,40,0.86), rgba(6,13,26,0.84)); }
.zone-abyssopelagic::before { background: linear-gradient(180deg, rgba(6,13,26,0.90), rgba(3,8,16,0.88)); }
.zone-hadopelagic::before { background: radial-gradient(circle at center, rgba(0,255,170,0.08), transparent 24%), linear-gradient(180deg, rgba(3,8,16,0.96), rgba(3,8,16,0.98)); }
.zone-ascent::before { background: linear-gradient(180deg, rgba(3,8,16,0.78), rgba(10,61,98,0.76), rgba(0,229,204,0.20)); }

.zone-content {
  width: min(680px, calc(100vw - 48px));
  margin: 0 auto;
  text-align: center;
}

h1, h2 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--foam);
  font-variation-settings: 'wght' var(--font-wght);
  text-shadow: 0 0 34px rgba(0,229,204,0.18);
}

.breathing-text { animation: breathe 8s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { --font-wght: 200; }
  50% { --font-wght: 500; }
}

.entry-content h1 { font-size: clamp(3rem, 10vw, 8rem); color: #e0f7f4; }

.depth-kicker, figcaption {
  margin: 0 0 2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.panel-stack { margin-top: 9vh; }

.concept-panel {
  max-width: 60ch;
  margin: 0 auto 15vh;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: rgba(168, 216, 234, 0.9);
  background: rgba(13, 72, 117, 0.60);
  border: 1px solid rgba(0, 229, 204, 0.22);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(224,247,244,0.13), 0 24px 80px rgba(3,8,16,0.26);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.985);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.19,1,.22,1), border-color 1.4s ease;
}

.concept-panel p { margin: 0; }
.concept-panel.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); border-color: rgba(0, 229, 204, 0.42); }
.abyss-panel { margin-bottom: 10vh; background: rgba(3, 8, 16, 0.70); }

.marker-line { width: min(220px, 80%); margin: 8vh auto 0; color: rgba(0,229,204,0.45); filter: drop-shadow(0 0 16px rgba(0,229,204,0.18)); }
.marker-line svg { width: 100%; height: auto; overflow: visible; }
.marker-line path, .marker-line circle { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: color 1.2s ease, opacity 1.2s ease; }
.marker-line.is-lit { color: #00e5cc; }

.wave-set { margin-top: 8vh; }
.wave-card { margin: 0 auto 12vh; padding: 0; }
.waveform { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(0,229,204,0.24)); }
.wave-path { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: 0.78; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wave-path.teal { stroke: #00e5cc; }
.wave-path.violet { stroke: #6b5ce7; }
.wave-path.green { stroke: #00ffaa; opacity: 0.42; }
figcaption { margin-top: 1.4rem; color: #00e5cc; }

.geometry-chamber { position: relative; height: 48vh; min-height: 320px; margin: 5vh auto 8vh; }
.geo { position: absolute; display: block; width: 48px; height: 48px; border: 1.5px solid #00e5cc; opacity: 0.62; filter: drop-shadow(0 0 24px rgba(0,229,204,0.34)); animation: float-up var(--dur, 52s) linear infinite; }
.geo.circle { border-radius: 50%; }
.geo.triangle { border: 0; width: 54px; height: 48px; background: linear-gradient(60deg, transparent 47%, #6b5ce7 48% 52%, transparent 53%), linear-gradient(-60deg, transparent 47%, #6b5ce7 48% 52%, transparent 53%), linear-gradient(0deg, transparent 47%, #6b5ce7 48% 52%, transparent 53%); filter: drop-shadow(0 0 24px rgba(107,92,231,0.36)); }
.geo.hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); border-color: #00ffaa; box-shadow: inset 0 0 0 1.5px #00ffaa; }
.g1 { left: 8%; bottom: 8%; --dur: 46s; animation-delay: -7s; }
.g2 { left: 28%; bottom: 22%; --dur: 58s; animation-delay: -18s; }
.g3 { left: 48%; bottom: 6%; --dur: 52s; animation-delay: -4s; }
.g4 { left: 70%; bottom: 26%; --dur: 63s; animation-delay: -25s; }
.g5 { left: 86%; bottom: 12%; --dur: 49s; animation-delay: -11s; }
.g6 { left: 38%; bottom: 48%; --dur: 68s; animation-delay: -31s; }

@keyframes float-up {
  0% { transform: translate3d(0, 60px, 0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.62; }
  55% { transform: translate3d(18px, -160px, 0) rotate(80deg); }
  100% { transform: translate3d(-12px, -460px, 0) rotate(160deg); opacity: 0; }
}

.core-content { display: flex; min-height: 68vh; flex-direction: column; align-items: center; justify-content: center; }
.core-light { position: relative; width: 220px; height: 220px; margin: 1rem auto 4rem; }
.core-light::after { content: ''; position: absolute; width: 10px; height: 10px; inset: 0; margin: auto; border-radius: 50%; background: #00ffaa; box-shadow: 0 0 24px #00ffaa, 0 0 90px rgba(0,255,170,0.5); }
.core-light span { position: absolute; inset: 50%; width: 24px; height: 24px; margin: -12px; border: 1px solid #00e5cc; border-radius: 50%; animation: pulse 4s ease-out infinite; filter: drop-shadow(0 0 26px rgba(0,229,204,0.38)); }
.core-light span:nth-child(2) { animation-delay: 1.3s; border-color: #6b5ce7; }
.core-light span:nth-child(3) { animation-delay: 2.6s; }
.core-thesis { max-width: 13ch; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 900; }

@keyframes pulse {
  from { transform: scale(0.2); opacity: 0.9; }
  to { transform: scale(8); opacity: 0; }
}

.ascent-content h2 { font-weight: 100; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: 0.18em; }
.ascent-content p:last-child { max-width: 42ch; margin: 2rem auto 0; color: rgba(224,247,244,0.74); }

.particle-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.particle { position: absolute; width: var(--size, 4px); height: var(--size, 4px); left: var(--left); top: 110%; border-radius: 50%; background: var(--color, #00e5cc); opacity: 0; filter: drop-shadow(0 0 10px currentColor); animation: particle-rise var(--time) linear infinite; animation-delay: var(--delay); will-change: transform, opacity; }
.p1 { --left: 12%; --size: 3px; --time: 36s; --delay: -4s; --color: #00e5cc; }
.p2 { --left: 22%; --size: 5px; --time: 58s; --delay: -18s; --color: #6b5ce7; }
.p3 { --left: 31%; --size: 2px; --time: 42s; --delay: -8s; --color: #00e5cc; }
.p4 { --left: 43%; --size: 4px; --time: 65s; --delay: -28s; --color: #00ffaa; }
.p5 { --left: 55%; --size: 3px; --time: 48s; --delay: -11s; --color: #00e5cc; }
.p6 { --left: 63%; --size: 6px; --time: 75s; --delay: -33s; --color: #6b5ce7; }
.p7 { --left: 74%; --size: 3px; --time: 39s; --delay: -6s; --color: #00e5cc; }
.p8 { --left: 86%; --size: 4px; --time: 54s; --delay: -22s; --color: #00e5cc; }
.p9 { --left: 17%; --size: 2px; --time: 69s; --delay: -41s; --color: #6b5ce7; }
.p10 { --left: 68%; --size: 3px; --time: 44s; --delay: -15s; --color: #00e5cc; }
.p11 { --left: 93%; --size: 2px; --time: 62s; --delay: -35s; --color: #00ffaa; }
.p12 { --left: 6%; --size: 4px; --time: 51s; --delay: -25s; --color: #00e5cc; }

@keyframes particle-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.35; }
  48% { transform: translate3d(26px, -56vh, 0); opacity: 0.24; }
  88% { opacity: 0.32; }
  100% { transform: translate3d(-18px, -124vh, 0); opacity: 0; }
}

@media (max-width: 768px) {
  .depth-zone { min-height: 80vh; padding: 6vh 0; }
  .zone-content { width: min(90vw, 680px); }
  .entry-content h1 { font-size: clamp(2.6rem, 15vw, 5.6rem); }
  .breathing-text { animation-name: breathe-mobile; }
  .particle:nth-child(n+6) { display: none; }
  .geometry-chamber { height: 34vh; min-height: 240px; }
  .concept-panel { margin-bottom: 10vh; }
}

@keyframes breathe-mobile {
  0%, 100% { --font-wght: 250; }
  50% { --font-wght: 450; }
}