:root {
  --abyss: #0a2e38;
  --cherenkov: #00e5ff;
  --cream: #e8e0d4;
  --coral: #e07856;
  --kelp: #2a6b5a;
  --amber: #d4a843;
  --sepia: #8b6f4e;
  --concrete: #4a5568;
  --ease-water: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Compliance trace: thermometer has rounded bottom cap (16px diameter circle) at 0.6rem. (Google Fonts IntersectionObserver` toggle `.visible` classes. timing philosophy slow deliberate: nothing happens 600ms. Easing curves favor `cubic-bezier(0.23 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--cream);
  font-family: "Crimson Text", Georgia, serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 58px 58px;
  mix-blend-mode: screen;
  z-index: 2;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.zone {
  min-height: 100vh;
  position: relative;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 6rem) clamp(5rem, 8vw, 8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
}

.zone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(0, 229, 255, 0.08) 31%, transparent 32%, transparent 47%, rgba(0, 229, 255, 0.04) 48%, transparent 49%);
  opacity: 0.35;
  transform: scale(1.2);
  z-index: -1;
  animation: pulseRings 8s var(--ease-water) infinite;
}

.surface-zone { padding: 0; background: var(--abyss); }
.perimeter-zone { background: linear-gradient(180deg, var(--abyss), #103f43 60%, var(--kelp)); }
.containment-zone { background: linear-gradient(180deg, var(--kelp), var(--concrete)); }
.core-zone { background: radial-gradient(circle at 50% 46%, rgba(0, 229, 255, 0.22), transparent 30%), linear-gradient(180deg, var(--concrete), #163945 70%, var(--abyss)); }
.fuel-zone { background: linear-gradient(180deg, var(--abyss), #132f39 40%, #473c2a); }
.below-zone { background: var(--abyss); }

.surface-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10,46,56,0.6) 0%, rgba(0,229,255,0.08) 100%),
    radial-gradient(circle at 20% 65%, rgba(212,168,67,0.45) 0 8%, transparent 18%),
    linear-gradient(180deg, transparent 0 46%, rgba(42,107,90,0.65) 47% 62%, rgba(139,111,78,0.7) 63% 100%),
    repeating-linear-gradient(172deg, rgba(232,224,212,0.16) 0 2px, transparent 3px 28px),
    linear-gradient(120deg, #8b6f4e, #e8e0d4 32%, #2a6b5a 58%, #0a2e38);
  background-size: auto, auto, auto, auto, 120% 120%;
  filter: sepia(0.35) contrast(0.9) saturate(0.7);
  animation: photoDrift 34s linear infinite;
  opacity: 0;
  transition: opacity 1.2s var(--ease-water) 0.35s;
}

.loaded .surface-photo { opacity: 1; }

.hex-reveal {
  position: absolute;
  inset: 0;
  background: var(--abyss);
  z-index: 3;
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 2s var(--ease-water) 0.4s;
}

.loaded .hex-reveal { clip-path: polygon(-20% 50%, 15% -20%, 85% -20%, 120% 50%, 85% 120%, 15% 120%); }

.surface-title {
  position: relative;
  z-index: 5;
  margin: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 1.2s var(--ease-water) 2s, transform 1.2s var(--ease-water) 2s;
}

.loaded .surface-title { opacity: 1; transform: none; }

h1, h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: 0.04em;
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
  margin: 0 0 1rem;
}

h1 { font-size: clamp(4rem, 13vw, 12rem); }

p {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.75;
  color: var(--cream);
}

.data-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cherenkov);
}

.zone-header {
  max-width: 780px;
  margin: 0 auto 3rem;
  text-align: center;
}

.hex-grid {
  width: min(1050px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  padding: 2rem 0;
  background: repeating-linear-gradient(90deg, rgba(0,229,255,0.18) 0 1px, transparent 1px 42px);
  animation: coolantFlow 12s linear infinite;
}

.wide-grid { width: min(1180px, 100%); }
.compact-grid { width: min(780px, 100%); }
.dense-grid { width: min(1160px, 100%); }
.final-grid { width: min(980px, 100%); }

.hex-cell {
  width: clamp(200px, 20vw, 340px);
  aspect-ratio: 1.1547;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:
    linear-gradient(120deg, transparent, rgba(0,229,255,0.06), rgba(212,168,67,0.06), transparent),
    linear-gradient(145deg, rgba(10,46,56,0.86), rgba(42,107,90,0.58));
  border: 1px solid rgba(0, 229, 255, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.3rem;
  position: relative;
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  transition: opacity 900ms var(--ease-water), transform 900ms var(--ease-water), filter 900ms var(--ease-water);
}

.hex-cell:nth-child(even) { margin-top: calc(clamp(200px, 20vw, 340px) * 0.29); }
.hex-cell.visible, .reveal-cell.visible { opacity: 1; transform: none; }
.reveal-cell { opacity: 0; transform: scale(0.95) translateY(24px); transition: opacity 1s var(--ease-water), transform 1s var(--ease-water); }

.hex-cell:hover {
  transform: translateY(-4px) scale(1.02);
  filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.35));
  background:
    linear-gradient(120deg, transparent 15%, rgba(0,229,255,0.1), rgba(212,168,67,0.1), transparent 85%),
    linear-gradient(145deg, rgba(10,46,56,0.9), rgba(42,107,90,0.65));
}

.hex-cell.neighbor-pulse { transform: translateY(-2px) scale(1.01); }
.hex-cell strong { display: block; font-family: "IBM Plex Mono", monospace; color: var(--amber); font-size: clamp(1.5rem, 3vw, 2.7rem); font-weight: 300; margin: .5rem 0; }
.hex-cell p { margin: 0; font-size: clamp(.9rem, 1.4vw, 1rem); }
.warning strong, .warning .data-label { color: var(--coral); }

.photo-cell { padding: 1.2rem; gap: .6rem; color: var(--sepia); font-family: "IBM Plex Mono", monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.vintage {
  width: 72%;
  aspect-ratio: 1.3;
  border: 2px solid rgba(232,224,212,.45);
  filter: sepia(0.35) contrast(0.9) saturate(0.7);
  position: relative;
}
.vintage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,46,56,0.6), rgba(0,229,255,0.08)); }
.vignette-one { background: linear-gradient(180deg, #d4a843 0 20%, #2a6b5a 21% 55%, #8b6f4e 56%); }
.vignette-two { background: radial-gradient(circle at 70% 25%, #e8e0d4 0 9%, transparent 10%), linear-gradient(160deg, #4a5568, #8b6f4e 55%, #0a2e38); }
.vignette-three { background: repeating-linear-gradient(90deg, #e8e0d4 0 5px, #8b6f4e 6px 12px, #2a6b5a 13px 28px); }
.vignette-four { background: linear-gradient(180deg, #00e5ff 0 3%, #0a2e38 4% 50%, #8b6f4e 51% 70%, #2a6b5a 71%); }

.hazard-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: repeating-linear-gradient(45deg, var(--amber) 0 4px, var(--abyss) 4px 8px);
  opacity: .8;
}
.hazard-band.reverse { top: auto; bottom: 0; }

.reactor-mini, .core-diagram {
  position: relative;
  display: grid;
  place-items: center;
}
.reactor-mini { width: 130px; height: 130px; }
.reactor-mini i, .reactor-mini b, .reactor-mini em, .ring { position: absolute; border-radius: 50%; border: 2px solid var(--cherenkov); box-shadow: 0 0 20px rgba(0,229,255,.2); }
.reactor-mini i { inset: 5%; opacity: .25; }
.reactor-mini b { inset: 22%; opacity: .45; }
.reactor-mini em { inset: 40%; background: var(--coral); border-color: var(--coral); opacity: .7; }
.core-diagram { width: min(420px, 75vw); aspect-ratio: 1; margin: 0 auto 2rem; }
.ring-one { inset: 2%; opacity: .18; }
.ring-two { inset: 18%; opacity: .34; }
.ring-three { inset: 34%; opacity: .55; }
.fuel-cluster { display: grid; grid-template-columns: repeat(3, 28px); gap: 8px; transform: rotate(30deg); }
.fuel-cluster span { width: 28px; aspect-ratio: 1; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: var(--cherenkov); box-shadow: 0 0 18px var(--cherenkov); }
.fuel-cluster span:nth-child(4) { background: var(--coral); box-shadow: 0 0 18px var(--coral); }
.hex-rings { width: 130px; aspect-ratio: 1; background: radial-gradient(circle, rgba(0,229,255,.4) 0 2px, transparent 3px 18px, rgba(0,229,255,.2) 19px 20px, transparent 21px 40px, rgba(0,229,255,.1) 41px 42px, transparent 43px); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); animation: pulseRings 2s ease-in-out infinite; }

.caustics {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0,229,255,.08), transparent 32%),
    radial-gradient(ellipse at 70% 60%, rgba(0,229,255,.08), transparent 36%),
    radial-gradient(ellipse at 40% 80%, rgba(0,229,255,.08), transparent 28%),
    var(--abyss);
  background-size: 130% 130%, 170% 170%, 210% 210%, auto;
  animation: causticOne 8s linear infinite, causticTwo 13s linear infinite, causticThree 21s linear infinite;
  z-index: -2;
}

.wave-line { position: absolute; bottom: 28px; left: 20%; right: 20%; height: 16px; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,229,255,.4) 46% 54%, transparent 55%); background-size: 42px 16px; animation: coolantFlow 12s linear infinite; z-index: 6; }

.depth-indicator {
  position: fixed;
  left: 0;
  top: 0;
  width: 6px;
  height: 100vh;
  background: rgba(232,224,212,.14);
  z-index: 60;
  box-shadow: 0 0 16px rgba(0,229,255,.25);
}
.depth-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--cherenkov), var(--kelp), var(--amber), var(--coral)); transition: height 700ms var(--ease-water); }
.depth-bulb { position: absolute; left: -5px; bottom: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--cherenkov); color: var(--abyss); font: 300 .48rem/16px "IBM Plex Mono", monospace; text-align: center; box-shadow: 0 0 18px currentColor; }
.depth-tick { position: absolute; left: 0; width: 18px; height: 1px; background: rgba(232,224,212,.55); }
.depth-tick span { position: absolute; left: 22px; top: -6px; font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(232,224,212,.55); }

.mini-map { position: fixed; right: 16px; bottom: 16px; width: 90px; display: grid; grid-template-columns: repeat(2, 32px); gap: 4px 8px; z-index: 70; }
.map-hex { width: 32px; aspect-ratio: 1.1547; border: 0; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: rgba(232,224,212,.12); outline: 1px solid rgba(232,224,212,.3); color: rgba(232,224,212,.55); font-family: "IBM Plex Mono", monospace; cursor: pointer; position: relative; transition: transform 700ms var(--ease-water), background 700ms var(--ease-water); }
.map-hex:nth-child(even) { transform: translateY(18px); }
.map-hex.active { background: var(--cherenkov); color: var(--abyss); box-shadow: 0 0 24px rgba(0,229,255,.8); }
.map-hex:hover::after { content: attr(data-label); position: absolute; right: 38px; top: 6px; color: var(--cherenkov); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

@keyframes photoDrift { to { background-position: 0 0, 0 0, 0 0, 0 0, 0 100%; } }
@keyframes coolantFlow { to { background-position: 120px 0; } }
@keyframes pulseRings { 50% { opacity: .6; transform: scale(1.05); } }
@keyframes causticOne { to { background-position: 80px 40px, 0 0, 0 0, 0 0; } }
@keyframes causticTwo { to { background-position: 0 0, -90px 60px, 0 0, 0 0; } }
@keyframes causticThree { to { background-position: 0 0, 0 0, 120px -80px, 0 0; } }

@media (max-width: 768px) {
  .zone { padding: 5rem 1rem; }
  .depth-indicator { width: 100vw; height: 6px; }
  .depth-fill { height: 100%; width: 0%; transition-property: width; }
  .depth-bulb { left: auto; right: 10px; top: -5px; bottom: auto; }
  .depth-tick { display: none; }
  .mini-map { width: 32px; grid-template-columns: 32px; }
  .mini-map.collapsed .map-hex:not(.active) { display: none; }
  .map-hex:nth-child(even) { transform: none; }
  .hex-grid { display: block; background: linear-gradient(180deg, rgba(0,229,255,.24), transparent); }
  .hex-cell { margin: 10px auto !important; width: min(86vw, 340px); }
  .hex-cell:nth-child(even) { transform: translateX(24px) scale(.85); }
  .hex-cell:nth-child(odd) { transform: translateX(-24px) scale(.85); }
  .hex-cell.visible:nth-child(even) { transform: translateX(24px); }
  .hex-cell.visible:nth-child(odd) { transform: translateX(-24px); }
  h1 { font-size: clamp(3.5rem, 18vw, 6rem); }
}