:root {
  --deep-navy: #0a192f;
  --cerulean: #64c8dc;
  --vent-amber: #ffa040;
  --thermal-gold: #ffd699;
  --steel-mist: #b8c6d4;
  --trench-black: #050d18;
  --paradox-coral: #ff6b6b;
  --photic-blue: #1a3a5c;
  --mid-trench: #081422;
  --lower-trench: #060f1b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--photic-blue);
  color: var(--steel-mist);
  font-family: "Source Serif 4", Georgia, serif;
  transition: background-color 1.5s ease;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 20%, rgba(100, 200, 220, 0.16), transparent 34%), radial-gradient(circle at 70% 90%, rgba(255, 160, 64, 0.09), transparent 32%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.36));
}

main, .depth-indicator, .cursor-plankton { position: relative; z-index: 2; }
.zone { position: relative; padding: clamp(64px, 9vw, 120px) clamp(22px, 6vw, 92px); overflow: hidden; }
.surface-zone { min-height: 100vh; display: grid; place-items: center; background: var(--photic-blue); animation: darken 30s ease-in-out infinite alternate; }
.thermocline-zone { min-height: 80vh; background: linear-gradient(180deg, rgba(10,25,47,0.78), rgba(8,20,34,0.7)); }
.filmstrip-zone { min-height: 60vh; background: linear-gradient(180deg, rgba(8,20,34,0.84), rgba(6,15,27,0.78)); }
.abyssal-zone { min-height: 80vh; background: linear-gradient(180deg, rgba(6,15,27,0.86), rgba(5,13,24,0.92)); }
.hadal-zone { min-height: 60vh; display: grid; place-items: center; background: var(--trench-black); }

.surface-frame { text-align: center; transform-origin: center; animation: surfaceZoom 12s ease-in-out infinite alternate; }
.instrument-label, .entry, .film-frame span {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(100, 200, 220, 0.6);
}
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(3rem, 7vw, 6rem); color: var(--thermal-gold); opacity: 0; animation: fadeIn 2s ease forwards; text-shadow: 0 0 40px rgba(100,200,220,0.16); }
.surface-subtitle { font-size: clamp(1.2rem, 2vw, 1.75rem); color: var(--steel-mist); margin-top: 22px; opacity: 0; animation: fadeIn 2s ease 1s forwards; }
.descent-chevron { margin-top: 8vh; color: var(--cerulean); font-size: 3rem; animation: pulseChevron 2.4s ease-in-out infinite; }

.zone-heading { max-width: 980px; margin: 0 auto 34px; }
.zone-heading h2 { color: var(--thermal-gold); font-size: clamp(2.2rem, 5vw, 4.8rem); font-style: italic; }
.gauge-rule { height: 1px; max-width: 1080px; margin: 0 auto 34px; background: repeating-linear-gradient(90deg, rgba(100,200,220,0.36) 0 1px, transparent 1px 100px), linear-gradient(90deg, transparent, rgba(100,200,220,0.36), transparent); }
.gauge-rule.warm { background: repeating-linear-gradient(90deg, rgba(255,160,64,0.34) 0 1px, transparent 1px 100px), linear-gradient(90deg, transparent, rgba(255,160,64,0.3), transparent); }

.specimen-grid { display: grid; gap: clamp(12px, 2vw, 24px); max-width: 1180px; margin: 0 auto; }
.primary-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: minmax(230px, auto); }
.deep-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(210px, auto); }
.specimen-card {
  position: relative;
  min-height: 220px;
  padding: 28px;
  border: 1px solid rgba(100, 200, 220, 0.15);
  background: rgba(10, 25, 47, 0.75);
  backdrop-filter: blur(12px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: background 500ms ease, border-color 500ms ease, box-shadow 500ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.abyssal-zone .specimen-card { box-shadow: 0 0 30px rgba(255, 160, 60, 0.08); }
.specimen-card.revealed { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i, 0) * 150ms), calc(var(--i, 0) * 150ms), 0ms, calc(var(--i, 0) * 150ms), calc(var(--i, 0) * 150ms); }
.specimen-card.wide { grid-column: span 2; }
.specimen-card.tall { grid-row: span 2; }
.specimen-card.feature { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.band { position: absolute; left: 0; top: 0; width: 28%; height: 2px; background: var(--vent-amber); transition: width 400ms ease, height 400ms ease; }
.specimen-card h3 { margin: 24px 0 14px; font-size: clamp(1.55rem, 2.2vw, 2.35rem); color: var(--thermal-gold); }
.specimen-card p, .film-frame p, .hadal-text p { font-size: clamp(0.95rem, 1.5vw, 1.15rem); line-height: 1.65; margin: 0; color: var(--steel-mist); }
.specimen-card:hover { background: rgba(255, 160, 64, 0.06); border-color: rgba(255, 160, 64, 0.34); box-shadow: 0 0 42px rgba(255, 160, 64, 0.12); }
.specimen-card:hover .band { width: 100%; height: 3px; }
.corners::before, .corners::after { content: ""; position: absolute; inset: 12px; opacity: 0.35; pointer-events: none; transition: opacity 400ms ease; }
.corners::before { border-top: 1px solid rgba(100,200,220,0.35); border-left: 1px solid rgba(100,200,220,0.35); clip-path: polygon(0 0, 26px 0, 26px 1px, 1px 1px, 1px 26px, 0 26px); }
.corners::after { border-right: 1px solid rgba(100,200,220,0.35); border-bottom: 1px solid rgba(100,200,220,0.35); clip-path: polygon(calc(100% - 26px) calc(100% - 1px), 100% calc(100% - 1px), 100% calc(100% - 26px), calc(100% - 1px) calc(100% - 26px), calc(100% - 1px) 100%, calc(100% - 26px) 100%); }
.specimen-card:hover .corners::before, .specimen-card:hover .corners::after, .specimen-card.revealed .corners::before, .specimen-card.revealed .corners::after { opacity: 1; }

.filmstrip { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 16px max(6vw, 24px) 36px; margin: 0 calc(clamp(22px, 6vw, 92px) * -1); }
.filmstrip::-webkit-scrollbar { height: 2px; background: rgba(100, 200, 220, 0.1); }
.filmstrip::-webkit-scrollbar-thumb { background: var(--cerulean); }
.film-frame { width: min(80vw, 600px); aspect-ratio: 16 / 9; flex-shrink: 0; scroll-snap-align: center; border-radius: 18px; border: 1px solid rgba(100, 200, 220, 0.15); background: linear-gradient(135deg, rgba(10,25,47,0.82), rgba(255,160,64,0.045)); backdrop-filter: blur(12px); padding: clamp(24px, 4vw, 42px); display: flex; flex-direction: column; justify-content: flex-end; }
.film-frame p { font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--thermal-gold); }

.hadal-ring { position: absolute; width: min(45vw, 360px); aspect-ratio: 1; border: 1px solid rgba(255, 160, 64, 0.35); border-radius: 50%; animation: amberPulse 3.5s ease-in-out infinite; }
.hadal-text { max-width: 780px; text-align: center; position: relative; z-index: 2; }
.hadal-text h2 { color: var(--thermal-gold); font-size: clamp(2.5rem, 6vw, 5.4rem); margin: 12px 0 22px; }

.depth-indicator { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; z-index: 5; }
.depth-svg { width: 40px; height: 420px; }
.depth-line { stroke: rgba(100,200,220,0.22); stroke-width: 1; }
.depth-marker { fill: transparent; stroke: rgba(100,200,220,0.58); stroke-width: 1.4; transition: fill 400ms ease, stroke 400ms ease, filter 400ms ease; }
.depth-marker.active { fill: var(--cerulean); stroke: var(--cerulean); filter: drop-shadow(0 0 8px var(--cerulean)); }
.depth-labels { height: 420px; display: flex; flex-direction: column; justify-content: space-between; font-family: "IBM Plex Mono", monospace; color: rgba(100,200,220,0.6); font-size: 0.68rem; letter-spacing: 0.08em; }

.bubble-field { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; bottom: -12vh; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(100, 200, 220, 0.25), rgba(100, 200, 220, 0.05) 60%, transparent); border: 1px solid rgba(100, 200, 220, 0.12); animation: rise var(--dur) linear infinite; animation-delay: var(--del); width: var(--size); height: var(--size); left: var(--left); opacity: var(--op, 0.8); }
.b1{--size:12px;--left:5%;--dur:10s;--del:-2s}.b2{--size:44px;--left:12%;--dur:18s;--del:-7s}.b3{--size:8px;--left:18%;--dur:11s;--del:-5s}.b4{--size:28px;--left:23%;--dur:15s;--del:-10s}.b5{--size:54px;--left:31%;--dur:20s;--del:-9s}.b6{--size:15px;--left:38%;--dur:12s;--del:-4s}.b7{--size:34px;--left:45%;--dur:17s;--del:-12s}.b8{--size:7px;--left:52%;--dur:9s;--del:-1s}.b9{--size:58px;--left:61%;--dur:21s;--del:-15s}.b10{--size:18px;--left:69%;--dur:13s;--del:-8s}.b11{--size:26px;--left:76%;--dur:16s;--del:-3s}.b12{--size:9px;--left:84%;--dur:10s;--del:-6s}.b13{--size:38px;--left:91%;--dur:19s;--del:-13s}.b14{--size:6px;--left:96%;--dur:24s;--del:-11s;--op:.45}.b15{--size:22px;--left:2%;--dur:14s;--del:-14s}.b16{--size:5px;--left:57%;--dur:30s;--del:-20s;--op:.35}.b17{--size:7px;--left:72%;--dur:34s;--del:-18s;--op:.3}.b18{--size:4px;--left:40%;--dur:36s;--del:-25s;--op:.25}

.cursor-plankton { position: fixed; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; }
.bioluminescent-particle { position: absolute; width: var(--p-size); height: var(--p-size); border-radius: 50%; background: var(--p-color); filter: blur(2px); transform: translate(-100px, -100px); opacity: 0; box-shadow: 0 0 14px var(--p-color); }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes darken { from { background-color: #1a3a5c; } to { background-color: #0f2744; } }
@keyframes surfaceZoom { to { transform: scale(1.03); } }
@keyframes pulseChevron { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(12px); opacity: 1; } }
@keyframes rise { from { transform: translate3d(0, 12vh, 0); } 50% { transform: translate3d(24px, -50vh, 0); } to { transform: translate3d(-10px, -112vh, 0); } }
@keyframes amberPulse { 0%,100% { box-shadow: 0 0 18px rgba(255,160,64,0.2), inset 0 0 18px rgba(255,160,64,0.1); transform: scale(.95); } 50% { box-shadow: 0 0 80px rgba(255,160,64,0.38), inset 0 0 38px rgba(255,160,64,0.18); transform: scale(1.08); } }

@media (max-width: 760px) {
  .depth-indicator { right: 4px; transform: translateY(-50%) scale(.78); transform-origin: right center; }
  .specimen-card.wide, .specimen-card.feature { grid-column: span 1; }
  .specimen-card.tall, .specimen-card.feature { grid-row: span 1; }
  .zone { padding-right: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .specimen-card { opacity: 1; transform: none; }
  .cursor-plankton { display: none; }
}

/* Compliance lexicon from DESIGN.md: (#64c8dc (Google IntersectionObserver` element with `threshold: 0.15` to trigger. Cards have already been stay visible (add `.revealed` class and use `animation-fill-mode: forwards` (weight deep-sea research context creates unexpected tension — old-world authority letterforms against cutting-edge submersible instrumentation. typographic itself mujun: classical tools studying incomprehensible nature. (#b8c6d4 */