/* The Deep: the page IS a descent. Zones darken like the real water column;
   deep.mjs drives --depth (0..1) and body background; everything respects
   prefers-reduced-motion. Palette hexes come from ROOMS['deep']. */

body[data-room="deep"] { --accent-rgb: 127,212,193; overflow-x: clip; }

/* ---------- the plunge (entry overlay) ---------- */
.plunge { position: fixed; inset: 0; z-index: 10000; background: #031014;
  display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.plunge.gone { display: none; }
.plunge.lift { animation: plunge-lift 1s ease forwards; }
@keyframes plunge-lift { to { opacity: 0; visibility: hidden; } }
.plunge-water { position: absolute; inset: 0; }
.plunge-sky { position: absolute; inset: -6% -3% -20%; width: 106%; height: 126%; object-fit: cover;
  opacity: 0; animation: plunge-sky-in 4.6s ease forwards; transform-origin: 50% 0; }
@keyframes plunge-sky-in {
  0% { opacity: 0; transform: scale(1.24) translateY(-2%); }
  14% { opacity: 1; }
  100% { opacity: .6; transform: scale(1.02) translateY(-16%); } }
/* the burst is borderless: cover the viewport and feather every edge away */
.plunge-burst { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
  mix-blend-mode: screen; opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 38%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 38%, transparent 78%);
  animation: plunge-burst-in 3.8s ease-out .35s forwards; }
@keyframes plunge-burst-in {
  0% { opacity: 0; transform: translateY(18%) scale(1.2); }
  16% { opacity: .95; }
  100% { opacity: .22; transform: translateY(-26%) scale(1.05); } }
/* breaking the surface: a bright impact that washes out and sinks away */
.plunge-flash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(233,248,242,.95), rgba(169,246,201,.4) 45%, transparent 72%);
  opacity: 0; animation: plunge-flash-in 2.2s ease-out forwards; }
@keyframes plunge-flash-in { 0% { opacity: 1; } 55% { opacity: .25; } 100% { opacity: 0; } }
.plunge-rays { position: absolute; inset: -10%; mix-blend-mode: screen; opacity: 0;
  background:
    linear-gradient(172deg, transparent 28%, rgba(169,246,201,.14) 34%, transparent 40%),
    linear-gradient(188deg, transparent 46%, rgba(127,212,193,.12) 53%, transparent 60%),
    linear-gradient(178deg, transparent 62%, rgba(196,222,210,.1) 68%, transparent 74%);
  animation: rays-in 4.5s ease .3s forwards; }
@keyframes rays-in { 20% { opacity: 1; } 100% { opacity: .5; transform: translateX(4%); } }
.plunge-bubbles { position: absolute; inset: 0; pointer-events: none; }
.pb { position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(233,244,240,.9), rgba(169,246,201,.25) 55%, transparent 70%);
  animation: pb-rise linear forwards; }
@keyframes pb-rise { to { transform: translateY(-118vh) translateX(var(--pbx, 0px)); opacity: 0; } }

.plunge-titles { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.plunge-plate { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .42em;
  text-transform: uppercase; color: #a9d8cc; opacity: 0; animation: pw-in 1s ease .4s forwards; }
.plunge-title { font-family: "Gloock", Georgia, serif; font-weight: 400; color: #eef7f1;
  font-size: clamp(56px, 10vw, 150px); line-height: 1.02; margin: 18px 0 8px;
  text-shadow: 0 6px 60px rgba(3,16,20,.9); }
.plunge-title .glint { color: #7fd4c1; }
.plunge-line { font-family: "Alegreya", Georgia, serif; font-style: italic; font-size: clamp(17px, 2vw, 24px);
  color: #bcd8cf; }
.pw { display: inline-block; opacity: 0; transform: translateY(70%); clip-path: inset(0 100% 0 0);
  animation: pw-rise 1s cubic-bezier(.22,.9,.25,1) var(--pd, 0s) forwards,
             pw-wipe 1s cubic-bezier(.22,.9,.25,1) var(--pd, 0s) forwards; }
@keyframes pw-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes pw-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes pw-in { to { opacity: 1; } }
.plunge-invite { font-family: "Alegreya", Georgia, serif; font-style: italic;
  font-size: clamp(15px, 1.6vw, 20px); color: #7fd4c1; margin-top: 26px; opacity: 0;
  animation: pw-in 1.2s ease var(--pd, 3s) forwards; }
.plunge-skip { position: absolute; right: 26px; bottom: 22px; z-index: 3;
  background: none; border: none; color: #6f978c; font-family: var(--font-ui);
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; cursor: pointer;
  opacity: 0; animation: pw-in 1s ease var(--pd, 1.8s) forwards; }
.plunge-skip:hover { color: #a9f6c9; }
/* fast ripple variant for repeat visits */
.plunge.ripple .plunge-sky, .plunge.ripple .plunge-burst, .plunge.ripple .plunge-rays, .plunge.ripple .plunge-flash { animation-duration: .8s; animation-delay: 0s; }
.plunge.ripple .pw, .plunge.ripple .plunge-plate, .plunge.ripple .plunge-invite, .plunge.ripple .plunge-skip { animation-delay: 0s; animation-duration: .5s; }

/* ---------- depth gauge HUD ---------- */
.gauge { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; gap: 12px; align-items: stretch; pointer-events: none;
  opacity: 0; transition: opacity .8s ease .2s; }
.gauge.on { opacity: 1; }
.gauge-line { position: relative; width: 3px; height: 42vh; border-radius: 2px;
  background: linear-gradient(180deg, rgba(169,246,201,.55), rgba(127,212,193,.25) 30%, rgba(58,124,165,.25) 60%, rgba(10,34,48,.6));
  box-shadow: 0 0 12px rgba(127,212,193,.25); }
.gauge-needle { position: absolute; left: 50%; top: 0; width: 13px; height: 13px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eef7f1, #7fd4c1 60%, rgba(127,212,193,0) 75%);
  box-shadow: 0 0 14px rgba(127,212,193,.8); }
.gauge-read { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.gauge-m { font-family: var(--font-ui); font-size: 13px; letter-spacing: .14em; color: #cfe8df;
  font-variant-numeric: tabular-nums; }
.gauge-zone { font-family: "Alegreya", Georgia, serif; font-style: italic; font-size: 12px; color: #7fa79b; }
/* the gauge dives with every screen now: narrow ones wear it small on the
   right, out of the thumb's way */
@media (max-width: 1100px) {
  .gauge { left: auto; right: 8px; gap: 7px; }
  .gauge-line { height: 24vh; width: 2px; }
  .gauge-read { gap: 2px; }
  .gauge-m { font-size: 10.5px; letter-spacing: .1em; }
  .gauge-zone { font-size: 10px; }
}

/* ---------- zones ---------- */
.descent { position: relative; }
.dz { position: relative; }
.dz-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dz-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(56px,9vh,120px) clamp(22px,4vw,56px); }

/* surface hero: override the generic room-hero sizing */
.dz-surface { min-height: 92vh; display: flex; align-items: flex-end; border-bottom: none; }
.dz-surface .dz-art { opacity: .9; }
.dz-surface::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 34%, rgba(6,20,28,.6) 86%, rgba(10,34,48,.85) 100%); }
.dz-surface .hero-inner { width: 100%; }
.dz-surface .room-name { font-size: clamp(58px, 8.5vw, 132px); text-shadow: 0 6px 50px rgba(3,16,20,.85); margin: 12px 0 8px; animation: none; }
.hw { display: inline-block; opacity: 0; transform: translateY(60%); clip-path: inset(0 100% 0 0);
  animation: pw-rise 1s cubic-bezier(.22,.9,.25,1) var(--hd, 0s) forwards,
             pw-wipe 1s cubic-bezier(.22,.9,.25,1) var(--hd, 0s) forwards; }
body.dove .hw { animation-delay: calc(var(--hd) * .4); }
.dz-surface .room-name .glint { color: #7fd4c1; }
.dz-note { font-family: "Alegreya", Georgia, serif; font-style: italic; font-size: 18px; color: #c3ded4; max-width: 52ch; margin-top: 10px; text-shadow: 0 2px 16px rgba(3,16,20,.9); }
.surface-cta { display: flex; gap: 18px; align-items: center; margin: 26px 0 8px; flex-wrap: wrap; }
.dive-btn { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: #06141c; background: #7fd4c1; padding: 15px 26px;
  text-decoration: none; border: none; cursor: pointer; border-radius: 2px;
  transition: transform .2s, box-shadow .2s; }
.dive-btn:hover { transform: translateY(2px); box-shadow: 0 -8px 30px -8px rgba(127,212,193,.5); }
.dive-ghost { font-family: var(--font-ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #9fc4b8; text-decoration: none; border-bottom: 1px solid rgba(127,212,193,.4); padding-bottom: 3px; }
.dive-ghost:hover { color: #a9f6c9; }

/* the waterline: the twilight sea swallowing the sunlit zone. Three wave
   layers drift at different speeds so the boundary reads as moving water,
   never a straight cut. */
.waterline { position: absolute; left: 0; right: 0; top: -118px; height: 120px; z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22120%22%20viewBox%3D%220%200%201200%20120%22%3E%3Cpath%20d%3D%22M0%2074%20C%20200%2044%20400%20102%20600%2074%20C%20800%2044%201000%20102%201200%2074%22%20fill%3D%22none%22%20stroke%3D%22%23a9f6c9%22%20stroke-opacity%3D%22.3%22%20stroke-width%3D%222.5%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22120%22%20viewBox%3D%220%200%201200%20120%22%3E%3Cpath%20d%3D%22M0%2072%20C%20200%2040%20400%20100%20600%2072%20C%20800%2040%201000%20100%201200%2072%20L1200%20120%20L0%20120%20Z%22%20fill%3D%22%237fd4c1%22%20fill-opacity%3D%22.14%22%2F%3E%3Cpath%20d%3D%22M0%2079%20C%20200%2049%20400%20105%20600%2079%20C%20800%2049%201000%20105%201200%2079%20L1200%20120%20L0%20120%20Z%22%20fill%3D%22%2311334a%22%20fill-opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M0%2086%20C%20200%2058%20400%20110%20600%2086%20C%20800%2058%201000%20110%201200%2086%20L1200%20120%20L0%20120%20Z%22%20fill%3D%22%230a2230%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x, repeat-x;
  background-size: 1500px 120px, 1200px 120px;
  animation: waterline-drift 28s linear infinite;
}
@keyframes waterline-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: -1500px 0, 1200px 0; }
}
@media (prefers-reduced-motion: reduce) { .waterline { animation: none; } }

/* twilight + midnight grounds (gradient fallback under optional art) */
.dz-twilight { background: linear-gradient(180deg, #0a2230, #12233e 55%, #0b1830); }
.dz-twilight .dz-art { opacity: .38;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 90px, #000 220px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 90px, #000 220px); }
.dz-midnight { background: linear-gradient(180deg, #0b1830, #052028 60%, #031014); }
.dz-midnight .dz-art { opacity: .34; }
.dz-floor { background: linear-gradient(180deg, #031014, #052028); }
.dz-floor .dz-art { opacity: .55; }

/* below the surface the water itself moves: a slow caustic shimmer drifting
   over the backdrop (::before) under a darkening veil (::after). Content
   (.dz-inner z2, whispers z3) rides above both. */
.dz-twilight::before, .dz-midnight::before, .dz-floor::before {
  content: ""; position: absolute; inset: -60px; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .5;
  background:
    repeating-radial-gradient(ellipse 1100px 340px at 24% 12%, rgba(169,246,201,.32) 0 2px, transparent 2px 110px),
    repeating-radial-gradient(ellipse 800px 300px at 78% 34%, rgba(127,212,193,.26) 0 2px, transparent 2px 85px),
    repeating-radial-gradient(ellipse 950px 380px at 50% 80%, rgba(136,184,196,.2) 0 2px, transparent 2px 130px);
  animation: deep-caustic 23s ease-in-out infinite alternate;
}
.dz-midnight::before { opacity: .28; animation-duration: 31s; }
.dz-floor::before { opacity: .22; animation-duration: 37s; }
@keyframes deep-caustic {
  from { transform: translate3d(-34px, -12px, 0) scale(1.02); }
  to { transform: translate3d(34px, 14px, 0) scale(1.05); }
}
.dz-twilight::after, .dz-midnight::after, .dz-floor::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(3,16,20,.5) 100%),
    linear-gradient(180deg, transparent 0%, rgba(6,20,28,.3) 9%, rgba(3,16,20,.18) 32%, rgba(3,16,20,.22) 70%, rgba(3,16,20,.44));
}
.dz-midnight::after {
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(3,16,20,.62) 100%),
    linear-gradient(180deg, rgba(3,16,20,.4), rgba(3,16,20,.26) 40%, rgba(3,16,20,.5));
}

.zone-head { position: relative; margin: 0 0 42px; max-width: 60ch; }
.zone-head::before { content: ""; position: absolute; inset: -38px -70px; z-index: -1;
  background: radial-gradient(ellipse at 42% 50%, rgba(4,14,20,.75), rgba(4,14,20,.4) 52%, transparent 74%);
  filter: blur(20px); }
.zone-plate { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: #7fd4c1; border: 1px solid rgba(127,212,193,.35);
  padding: 8px 14px; border-radius: 2px; background: rgba(6,20,28,.5); }
.zone-note { font-family: "Alegreya", Georgia, serif; font-style: italic; font-size: 18px; color: #b0cfc5; margin-top: 12px; max-width: 52ch; text-shadow: 0 2px 16px rgba(3,16,20,.9); }

/* ---------- dive stations: each plot is a SCENE in the descent ---------- */
.station { position: relative; min-height: 82vh; margin: 4vh 0 10vh;
  display: grid; grid-template-columns: 92px 1fr; gap: 0; align-items: stretch; }
.station > .station-depth { grid-column: 1; }
.station-body { grid-column: 2; position: relative; min-height: 78vh; }
.scene-depth { position: absolute; z-index: 0; font-family: "Gloock", Georgia, serif;
  font-size: clamp(120px, 19vw, 340px); line-height: 1; color: #7fd4c1; opacity: .045;
  pointer-events: none; user-select: none; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.station-fig { position: absolute; z-index: 2; will-change: transform; }
.station-cut { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 30px 60px rgba(3,16,20,.85)) drop-shadow(0 0 44px rgba(127,212,193,.16));
  animation: cut-drift var(--cd, 9s) ease-in-out infinite alternate,
             cut-breathe 7s ease-in-out calc(var(--si, 0) * -1.7s) infinite alternate; }
.station:hover .station-cut { filter: drop-shadow(0 30px 60px rgba(3,16,20,.85)) drop-shadow(0 0 60px rgba(127,212,193,.3)); }
@keyframes cut-drift { from { transform: translateY(-12px) rotate(-.6deg); } to { transform: translateY(14px) rotate(.7deg); } }
@keyframes cut-breathe { from { opacity: .92; } to { opacity: 1; } }
.station-log { position: absolute; z-index: 3; max-width: 44ch; }
.station-log::before { content: ""; position: absolute; inset: -54px -84px; z-index: -1;
  background: radial-gradient(ellipse at 50% 46%, rgba(4,14,20,.9), rgba(4,14,20,.55) 50%, transparent 72%);
  filter: blur(18px); }

/* five scene compositions, cycling down the dive line */
.station-fig.fig-p { width: min(var(--wp, 44vw), 72vh); }
.station-fig.fig-l { width: min(var(--wl, 48vw), 940px); }
.sc-1 .station-fig { left: -4%; top: 50%; transform: translateY(-50%); --wp: 46vw; --wl: 54vw; }
.sc-1 .station-log { right: 0; top: 50%; transform: translateY(-50%); }
.sc-1 .scene-depth { right: -2%; bottom: 4%; }

.sc-2 .station-fig { right: -4%; top: 46%; transform: translateY(-50%); --wp: 48vw; --wl: 56vw; }
.sc-2 .station-log { left: 3%; top: 50%; transform: translateY(-50%); }
.sc-2 .scene-depth { left: -3%; top: 2%; }

.sc-3 .station-fig { left: 10%; bottom: -12vh; --wp: 50vw; --wl: 56vw; }
.sc-3 .station-log { right: 0; top: 12%; }
.sc-3 .scene-depth { left: -4%; top: 6%; }
.sc-3 { margin-bottom: 18vh; }

.sc-4 .station-fig { right: 6%; top: 6%; --wp: 30vw; --wl: 34vw;
  filter: brightness(.72) saturate(.85); opacity: .92; }
.sc-4 .station-fig.fig-p { width: min(30vw, 50vh); }
.sc-4 .station-fig .station-cut { animation-duration: 13s; }
.sc-4 .station-log { left: 3%; bottom: 10%; }
.sc-4 .scene-depth { right: 10%; bottom: 0; }

.sc-5 .station-fig { left: -6vw; top: 44%; transform: translateY(-50%); --wp: 56vw; --wl: 62vw; }
.sc-5 .station-log { right: 1%; top: 46%; transform: translateY(-50%); }
.sc-5 .scene-depth { right: -1%; top: 4%; }

/* porthole fallback keeps its framed look inside the fig */
.station-window { aspect-ratio: 4 / 5; display: grid; place-items: center; max-width: 340px; }
.station-ring { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.css-ring { position: absolute; inset: 6% 10%; border-radius: 50%;
  border: 10px solid #6b5a33;
  background:
    radial-gradient(circle at 38% 30%, rgba(169,246,201,.35), transparent 55%),
    radial-gradient(circle at 60% 70%, rgba(18,35,62,.9), #0a2230 70%);
  box-shadow: inset 0 0 0 3px rgba(233,228,212,.15), inset 0 0 40px rgba(3,16,20,.8),
    0 0 46px rgba(127,212,193,.16), 0 24px 60px -20px rgba(0,0,0,.8); }
.station-glass { position: absolute; inset: 16% 20%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle at 40% 32%, rgba(169,246,201,.28), transparent 60%);
  animation: glass-breathe 7s ease-in-out infinite alternate; }
@keyframes glass-breathe { to { opacity: .55; transform: scale(1.05); } }

/* rail depth marker + reveal ping */
.station-depth { position: relative; align-self: stretch; display: flex; align-items: center; }
.station-depth::before { content: ""; position: absolute; left: 50%; top: -46px; bottom: -46px;
  border-left: 1px dashed rgba(127,212,193,.25); }
.station-depth span { position: relative; font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em;
  color: #6f978c; background: #0d2436; border: 1px solid rgba(127,212,193,.3); padding: 6px 9px;
  border-radius: 2px; transform: rotate(-90deg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.station.rv.in .station-depth span { animation: depth-ping 1.2s ease .3s; }
@keyframes depth-ping {
  0% { box-shadow: 0 0 0 0 rgba(127,212,193,.55); color: #a9f6c9; }
  100% { box-shadow: 0 0 0 22px rgba(127,212,193,0); } }

/* the log: floating dive-log text, no card */
.station-no { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: #8ab5a9; }
.station-title { font-family: "Gloock", Georgia, serif; font-weight: 400; font-size: clamp(30px,3.6vw,52px);
  color: #eef7f1; line-height: 1.06; margin: 10px 0 14px; text-wrap: balance;
  text-shadow: 0 4px 30px rgba(3,16,20,.9); }
.tw { display: inline-block; }
.station.rv.in .tw { opacity: 0; transform: translateY(60%); clip-path: inset(0 100% 0 0);
  animation: pw-rise .9s cubic-bezier(.22,.9,.25,1) calc(.25s + var(--td, 0s)) forwards,
             pw-wipe .9s cubic-bezier(.22,.9,.25,1) calc(.25s + var(--td, 0s)) forwards; }
.station-layers { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.sl { font-family: "Alegreya", Georgia, serif; font-size: 17px; line-height: 1.62; color: #c3ded4;
  padding-left: 14px; border-left: 2px solid rgba(127,212,193,.25); transition: border-color .4s; }
.station:hover .sl { border-color: rgba(127,212,193,.55); }
.sl b { display: block; font-family: var(--font-ui); font-style: normal; font-weight: 400;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: #8fe6d0; margin-bottom: 3px; }
.sl-mid { margin-left: 16px; } .sl-front { margin-left: 32px; }
.station-brief { font-family: "Alegreya", Georgia, serif; font-style: italic; font-size: 17px; color: #c3ded4; margin-bottom: 16px; }
.station-crew { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.station-crew form { margin: 0; }
.crew-chip { font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #06141c; background: #7fd4c1; border: none; padding: 11px 18px; cursor: pointer;
  border-radius: 2px; text-decoration: none; display: inline-block;
  transition: transform .18s, box-shadow .18s; }
.crew-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(127,212,193,.5); }
.crew-wait { font-family: var(--font-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #5f7d76; }
.brass-tag { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #e8cf87; border: 1px solid rgba(232,207,135,.45); padding: 7px 11px; border-radius: 2px;
  background: linear-gradient(160deg, rgba(107,90,51,.35), rgba(58,43,16,.3)); }

/* rising bubble streams behind scenes (spawned by deep.mjs) */
.bstream { position: absolute; bottom: -20px; z-index: 1; pointer-events: none; }
.bstream i { position: absolute; bottom: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(233,244,240,.8), rgba(169,246,201,.2) 55%, transparent 70%);
  animation: pb-rise linear forwards; }

/* margin apparitions: creatures and objects in the water at the page edges */
.mg { position: absolute; z-index: 2; pointer-events: none;
  animation: mg-bob var(--mgd, 12s) ease-in-out infinite alternate; }
@keyframes mg-bob { from { transform: translateY(-10px) rotate(-1deg); } to { transform: translateY(12px) rotate(1.2deg); } }
.mg-a { top: 100px; left: 3%; width: clamp(220px, 22vw, 380px); opacity: .92; --mgd: 15s; }
.mg-b { right: 2%; top: 22%; width: clamp(170px, 15vw, 270px); opacity: .88; filter: blur(.6px); --mgd: 11s; }
.mg-c { left: 6%; top: 38%; width: clamp(80px, 7vw, 128px); opacity: .92; --mgd: 9s; }
.mg-d { left: -3%; bottom: -110px; width: clamp(380px, 40vw, 720px); opacity: .72; filter: blur(1.2px); --mgd: 19s; }
.mg-e { right: 3%; top: 15%; width: clamp(240px, 23vw, 400px); opacity: .92; --mgd: 13s; }
.mg-f { right: 16%; top: 52%; width: clamp(92px, 8vw, 150px); opacity: .95; --mgd: 8s;
  filter: drop-shadow(0 0 22px rgba(255,214,140,.45)); }
.mg-g { left: 5%; top: 64%; width: clamp(140px, 12vw, 210px); opacity: .72; filter: blur(.8px); transform: scaleX(-1); --mgd: 16s; }
.mg-g { animation-name: mg-bob-flip; }
@keyframes mg-bob-flip { from { transform: scaleX(-1) translateY(-10px) rotate(1deg); } to { transform: scaleX(-1) translateY(12px) rotate(-1.2deg); } }
.mg-h { left: 9%; bottom: 18%; width: clamp(160px, 15vw, 260px); opacity: .88; --mgd: 18s; }
.mg-hero-school { top: 22%; right: 6%; width: clamp(160px, 15vw, 260px); opacity: .5;
  transform: scaleX(-1); filter: blur(.8px) brightness(.8); --mgd: 17s; animation-name: mg-bob-flip; }
.mg-hero-turtle { top: 12%; left: 8%; width: clamp(180px, 17vw, 300px); opacity: .55; filter: blur(1px); --mgd: 21s; }
.mg-i { left: 4%; top: 12%; width: clamp(240px, 24vw, 420px); opacity: .8; --mgd: 18s; }
.mg-j { right: 5%; top: 58%; width: clamp(150px, 14vw, 240px); opacity: .85; --mgd: 12s; }
.mg-k { left: 12%; top: 30%; width: clamp(110px, 10vw, 170px); opacity: .82; --mgd: 14s; }
.mg-l { right: 12%; bottom: 24%; width: clamp(130px, 12vw, 210px); opacity: .85; --mgd: 16s; }
.mg-m { right: 28%; bottom: 12%; width: clamp(90px, 8vw, 140px); opacity: .8; --mgd: 10s; }
/* the big margin creatures still swim past small screens, at aquarium-glass
   distance instead of gone */
@media (max-width: 900px) {
  .mg { opacity: .6; }
  .mg-d { width: 210px; bottom: -60px; }
  .mg-g { width: 110px; }
  .mg-hero-school { width: 120px; }
  .mg-i { width: 150px; }
}

/* wandering plankton drifters */
.drifter { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 40% 35%, rgba(196,246,225,.8), rgba(127,212,193,.25) 55%, transparent 72%);
  offset-rotate: 0deg;
  animation: drift-path var(--dt, 40s) linear infinite; }
.dz-midnight .drifter { background: radial-gradient(circle at 40% 35%, rgba(190,216,255,.7), rgba(110,168,255,.2) 55%, transparent 72%); }
@keyframes drift-path { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- midnight: bathyspheres + trench gallery ---------- */
.bathy-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.bathy { display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform .35s; }
.bathy:hover { transform: translateY(-5px); }
.bathy-window { position: relative; aspect-ratio: 2/1; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(127,212,193,.3);
  box-shadow: 0 0 0 4px rgba(6,20,28,.8), 0 0 34px rgba(127,212,193,.18), 0 24px 50px -20px rgba(0,0,0,.85); }
.bathy-window img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 2.4s ease; }
.bathy:hover .bathy-window img { transform: scale(1.05); }
.bathy-dark { display: block; width: 100%; height: 100%;
  background: radial-gradient(120% 100% at 50% 0%, #12233e, #06141c); }
.bathy-plate b { display: block; font-family: "Gloock", Georgia, serif; font-weight: 400; font-size: 19px; color: #dcebe4; }
.bathy-plate i { font-family: var(--font-ui); font-style: normal; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #8ab5a9; }
.trench-head { margin-top: 90px; }
.trench-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.trench { position: relative; display: block; text-decoration: none; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(220,235,228,.14); box-shadow: 0 20px 50px -22px rgba(0,0,0,.9); transition: transform .35s, box-shadow .35s; }
.trench:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(127,212,193,.2), 0 26px 60px -22px rgba(0,0,0,.9); }
.trench img { width: 100%; aspect-ratio: 2/1; object-fit: cover; display: block; }
.trench-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 11px;
  font-family: "Alegreya", Georgia, serif; font-style: italic; font-size: 16px; color: #eaf4ee;
  background: linear-gradient(180deg, transparent, rgba(3,16,20,.85)); }

/* ---------- the floor ---------- */
.dz-floor { min-height: 70vh; display: flex; align-items: flex-end; }
.floor-inner { width: 100%; text-align: center; padding-bottom: 12vh; }
.floor-line { font-family: "Gloock", Georgia, serif; font-size: clamp(26px,3.4vw,44px); color: #dcebe4;
  margin: 20px auto 26px; max-width: 24ch; line-height: 1.2; }
.floor-ctas { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ---------- whispers ---------- */
.whisper { position: absolute; z-index: 3; font-family: "Alegreya", Georgia, serif; font-style: italic;
  font-size: clamp(15px,1.4vw,20px); color: rgba(159,196,184,.4); max-width: 24ch; pointer-events: none; }
.wsp-1 { right: 8%; bottom: 20%; transform: rotate(2.5deg); }
.wsp-2 { right: 4%; top: 34%; transform: rotate(-2deg); }
.wsp-3 { left: 6%; bottom: 12%; transform: rotate(1.5deg); }
.wsp-4 { right: 10%; bottom: 8%; transform: rotate(-1.8deg); }
@media (max-width: 900px) { .whisper { display: none; } }

/* ---------- underwater lighting ---------- */
/* twilight: the last god rays, slowly sweeping */
.light-shafts { position: absolute; inset: 0 0 auto 0; height: 62%; z-index: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: .5;
  background:
    linear-gradient(168deg, transparent 22%, rgba(169,246,201,.12) 30%, transparent 38%),
    linear-gradient(186deg, transparent 40%, rgba(127,212,193,.1) 49%, transparent 58%),
    linear-gradient(174deg, transparent 60%, rgba(196,222,210,.08) 67%, transparent 74%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  transform-origin: 50% -20%;
  animation: shaft-sway 26s ease-in-out infinite alternate; }
@keyframes shaft-sway { from { transform: rotate(-1.4deg) translateX(-26px); } to { transform: rotate(1.6deg) translateX(30px); } }
/* midnight: distant creatures light up (spawned by deep.mjs) */
.bio-bloom { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(140,200,255,.5), rgba(110,168,255,.16) 45%, transparent 70%);
  animation: bloom-pulse var(--bt, 7s) ease-in-out forwards; }
.bio-bloom.teal { background: radial-gradient(circle, rgba(169,246,201,.45), rgba(127,212,193,.14) 45%, transparent 70%); }
@keyframes bloom-pulse { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: .8; } 100% { opacity: 0; transform: scale(1.35); } }
/* the floor lantern: a warm pool of light, breathing like a flame */
.lantern-glow { position: absolute; left: 34%; bottom: 4%; width: 46vw; max-width: 780px;
  aspect-ratio: 2 / 1; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 68%, rgba(255,214,140,.32), rgba(232,180,100,.12) 45%, transparent 72%);
  animation: lantern-breathe 5s ease-in-out infinite alternate; }
@keyframes lantern-breathe {
  from { opacity: .68; transform: scale(.98); }
  55% { opacity: 1; }
  to { opacity: .82; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .light-shafts, .bio-bloom { display: none; }
  .lantern-glow { animation: none; opacity: .7; }
}

/* ---------- disturbed plankton (cursor effect below the hero) ---------- */
.plk { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 40% 35%, rgba(196,246,225,.95), rgba(127,212,193,.4) 55%, transparent 72%);
  animation: plk-drift var(--pt, 1.5s) ease-out forwards; }
.dz-midnight .plk { background: radial-gradient(circle at 40% 35%, rgba(190,216,255,.95), rgba(110,168,255,.35) 55%, transparent 72%); }
.dz-floor .plk { background: radial-gradient(circle at 40% 35%, rgba(255,238,200,.9), rgba(232,207,135,.3) 55%, transparent 72%); }
@keyframes plk-drift {
  0% { opacity: 0; transform: translate(0,0) scale(.4); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--px, 8px), var(--py, -46px)) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .plk { display: none; } }

/* ---------- marine snow canvas ---------- */
.snow { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(26px); filter: blur(4px);
  transition: opacity .9s ease var(--bd, 0s), transform .9s cubic-bezier(.22,.9,.25,1) var(--bd, 0s), filter .9s ease var(--bd, 0s); }
.rv.in { opacity: 1; transform: none; filter: none; }

/* ---------- creature pass-bys (sprites arrive with the art; CSS shadows now) ---------- */
.creature { position: absolute; z-index: 2; pointer-events: none; opacity: 0; }
.creature.swim { animation: swim-across var(--ct, 46s) linear forwards; }
@keyframes swim-across {
  0% { opacity: 0; transform: translateX(-16vw) translateY(0); }
  8% { opacity: var(--co, .5); }
  92% { opacity: var(--co, .5); }
  100% { opacity: 0; transform: translateX(116vw) translateY(var(--cy, -30px)); } }
.creature-shadow { width: clamp(180px,22vw,380px); height: clamp(48px,6vw,100px); border-radius: 50%;
  background: radial-gradient(ellipse at 45% 50%, rgba(3,16,20,.75), rgba(3,16,20,.35) 55%, transparent 72%);
  filter: blur(10px); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .station { grid-template-columns: 1fr; min-height: 0; margin: 10vh 0; }
  .station-depth { display: none; }
  .station-body { min-height: 0; display: flex; flex-direction: column; gap: 18px; }
  .station-fig { position: static !important; width: min(88vw, 420px) !important;
    transform: none !important; margin: 0 auto; filter: none; opacity: 1; }
  .station-log { position: static !important; transform: none !important; max-width: 60ch; }
  .scene-depth { font-size: 120px; right: 0 !important; left: auto !important; top: 0 !important; }
  .dz-surface { min-height: 78vh; }
}

/* ---------- reduced motion: still, painted, instant ---------- */
@media (prefers-reduced-motion: reduce) {
  .plunge { display: none !important; }
  .pw, .hw, .plunge-plate, .plunge-invite, .plunge-skip { animation: none; opacity: 1; transform: none; clip-path: none; }
  .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .station-glass, .creature, .snow { display: none; }
  .dz-twilight::before, .dz-midnight::before, .dz-floor::before { animation: none; }
  .station-cut { animation: none; }
  .station.rv.in .tw { animation: none; opacity: 1; transform: none; clip-path: none; }
  .station.rv.in .station-depth span { animation: none; }
  .drifter, .bstream { display: none; }
  .mg { animation: none; }
  .station-fig { transform: none !important; }
  .bathy, .trench, .crew-chip, .dive-btn { transition: none; }
}