/* ==========================================================================
   /depth/ — The Descent. Disease as depth, drawn in dots.
   Two modes: scrub (JS + motion) and static (no-JS or reduced motion) —
   same DOM, different layout. Scrub = sticky stage + 640svh track.
   ========================================================================== */

body[data-page="depth"] {
  background: var(--drape-4);
}

/* ---------- top bar ---------- */
.depth-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem var(--gutter);
  background: linear-gradient(oklch(0.12 0.03 18 / 0.75), transparent);
}
.d-back {
  text-decoration: none; font-size: 0.8rem; color: var(--enamel-dim);
  display: inline-flex; gap: 0.5em; align-items: center;
  transition: color var(--t-micro) ease;
}
.d-back:hover { color: var(--enamel); }

/* ---------- intro ---------- */
.d-intro {
  min-height: 92svh; display: grid; place-content: center; text-align: center;
  padding: var(--section-pad) var(--gutter) 0;
  background: linear-gradient(var(--drape) 0%, var(--drape-4) 100%);
}
.d-intro h1 { font-size: var(--text-hero); letter-spacing: var(--track-hero); font-weight: 800; margin-bottom: var(--sp-4); }
.d-intro p { color: var(--enamel-dim); font-size: var(--text-lg); max-width: 30ch; margin-inline: auto; }
.d-hint { margin-top: var(--sp-12); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--enamel-faint); display: grid; gap: 0.7rem; justify-items: center; }
.d-hint-dots { display: grid; gap: 5px; justify-items: center; }
.d-hint-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--enamel-faint); animation: sink 1.8s ease-in-out infinite; }
.d-hint-dots i:nth-child(2) { animation-delay: 0.18s; }
.d-hint-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes sink { 0%, 100% { opacity: 0.15; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }

/* ---------- the descent (scrub mode default; static overrides below) ---------- */
.descent { position: relative; height: 640svh; }
.d-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: linear-gradient(var(--drape-4) 0%, var(--abyss) 100%);
}
.d-stage.cut { background: #000; }
.d-stage.cut #pocket, .d-stage.cut .d-ruler, .d-stage.cut .d-readout { visibility: hidden; }
#pocket { position: absolute; inset: 0; width: 100%; height: 100%; }

.d-ruler {
  position: absolute; top: 8svh; bottom: 8svh; right: clamp(0.9rem, 3.5vw, 3rem);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  font-size: 0.68rem; color: var(--enamel-faint); z-index: 3;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px oklch(0.1 0.03 18), 0 0 2px oklch(0.1 0.03 18);
}
.d-ruler span { display: flex; align-items: center; gap: 0.5em; line-height: 1; }
.d-ruler span::after { content: ""; width: 12px; height: 1px; background: oklch(0.72 0.04 15 / 0.6); }
.d-marker {
  position: absolute; right: 0; top: 0; width: 22px; height: 2px;
  background: var(--probe); box-shadow: 0 0 12px oklch(0.78 0.11 10 / 0.7);
}
.d-readout {
  position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(1.2rem, 5vh, 3rem);
  z-index: 3; font-size: 0.8rem; color: var(--enamel-faint); letter-spacing: 0.06em;
}
.d-readout b { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 600; color: var(--enamel); letter-spacing: -0.02em; }

.d-skip {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(1rem, 3.5vh, 2rem);
  z-index: 4; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--enamel-faint);
  text-decoration: none; border-bottom: 1px solid var(--line);
  padding-bottom: 2px; transition: color var(--t-micro) ease;
}
.d-skip:hover { color: var(--enamel); }
.d-stage.cut .d-skip { visibility: hidden; }

.d-cue { display: none; }
.d-stage.cut .d-cue {
  display: grid; position: absolute; left: 50%; bottom: 12svh; transform: translateX(-50%);
  gap: 7px; justify-items: center; z-index: 4;
}
.d-cue i { width: 4px; height: 4px; border-radius: 50%; background: oklch(0.65 0.04 15); animation: sink 1.8s ease-in-out infinite; }
.d-cue i:nth-child(2) { animation-delay: 0.18s; }
.d-cue i:nth-child(3) { animation-delay: 0.36s; }

.d-stops { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stop {
  position: absolute; top: 50%; left: clamp(1.2rem, 7vw, 6rem);
  transform: translateY(-50%) translateY(18px);
  width: min(30rem, calc(100vw - 2 * clamp(1.2rem, 7vw, 6rem)));
  opacity: 0; visibility: hidden;
  transition: opacity 480ms var(--ease), transform 480ms var(--ease), visibility 0s 480ms;
}
.stop.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: 0s; }
.stop-mm {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 600;
  color: var(--probe); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.35em 0.85em; margin-bottom: var(--sp-4);
  background: oklch(0.14 0.03 18 / 0.55); backdrop-filter: blur(4px);
}
.stop-mm-warn { color: var(--bop-text); }
.stop-mm-bad { color: var(--bop-text); border-color: oklch(0.5 0.19 25 / 0.6); }
.stop h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-4); text-shadow: 0 2px 24px oklch(0.1 0.03 18 / 0.8); }
.stop p { color: var(--enamel-dim); font-size: var(--text-md); text-shadow: 0 1px 14px oklch(0.1 0.03 18 / 0.9); }
.stop .say { background: oklch(0.14 0.03 18 / 0.7); backdrop-filter: blur(4px); }

/* ---------- outro: after the cut ---------- */
.d-outro {
  background: #000; text-align: center; max-width: none;
  min-height: 92svh; display: grid; place-content: center; gap: var(--sp-4);
  padding: var(--section-pad) var(--gutter);
}
.o-line1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--track-display); max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.o-line2 { color: var(--probe); font-size: var(--text-md); margin-bottom: var(--sp-8); }
.o-ctas { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.o-note { margin-top: var(--sp-16); font-size: 0.68rem; color: var(--enamel-faint); max-width: 52ch; margin-inline: auto; }

/* ---------- static mode: no JS, or reduced motion ---------- */
html:not(.js) .descent, .descent.static { height: auto; }
html:not(.js) .d-stage, .descent.static .d-stage { position: static; height: auto; overflow: visible; }
html:not(.js) #pocket, .descent.static #pocket,
html:not(.js) .d-ruler, .descent.static .d-ruler,
html:not(.js) .d-skip, .descent.static .d-skip,
html:not(.js) .d-cue, .descent.static .d-cue,
html:not(.js) .d-readout, .descent.static .d-readout { display: none; }
html:not(.js) .d-stops, .descent.static .d-stops { position: static; pointer-events: auto; }
html:not(.js) .stop, .descent.static .stop {
  position: static; transform: none; opacity: 1; visibility: visible;
  width: min(34rem, 100%); margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) var(--gutter);
}
html:not(.js) .stop + .stop, .descent.static .stop + .stop { border-top: 1px solid var(--line-faint); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .stop { top: auto; bottom: 12svh; transform: translateY(18px); }
  .stop.is-on { transform: translateY(0); }
  .stop h2 { font-size: var(--text-xl); }
  .stop p { font-size: 0.95rem; }
  .d-readout { bottom: auto; top: 4.2rem; }
  .d-ruler { top: 12svh; bottom: 12svh; transition: opacity 400ms var(--ease); }
  .d-stage.has-stop .d-ruler { opacity: 0.12; }
  .d-skip { left: auto; right: var(--gutter); transform: none; bottom: 4.4rem; } /* clear of the sound chip */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .d-hint-dots i { animation: none; opacity: 0.6; }
  .stop { transition: none; }
}

/* ── Clinical-light era: the descent stays dark (the depths ARE dark).
     Re-declare the ink tokens light for this page only. ── */
body[data-page="depth"] {
  --drape: oklch(0.30 0.07 18);
  --drape-2: oklch(0.36 0.07 16);
  --drape-3: oklch(0.24 0.06 18);
  --enamel: oklch(0.97 0.008 20);
  --enamel-dim: oklch(0.84 0.02 20);
  --enamel-faint: oklch(0.66 0.03 15);
  --bop-text: oklch(0.78 0.15 25);
  --probe: oklch(0.78 0.11 10);
  --probe-dim: oklch(0.68 0.1 10);
  --line: oklch(0.5 0.06 15 / 0.55);
  --line-faint: oklch(0.5 0.06 15 / 0.3);
  --fill-raise: oklch(0.36 0.07 15 / 0.55);
  color-scheme: dark;
}

body[data-page="depth"] .btn-primary { color: oklch(0.22 0.045 15); }