/* ═══════════════════════════════════════════════════════════════
   DEPTH — Parallax Starfield & Scroll-Driven Atmosphere

   Creates a multi-layered cosmic scene that transitions from
   sirens (chaos, urgency, scattered evidence) at the top to
   scales (order, balance, defensible record) at the bottom.

   Inspired by Temporal.io's layered depth, extended with:
   - CSS-generated starfield (no images)
   - Planet/horizon silhouette at the bottom
   - 5 parallax layers moving at different speeds
   - Scroll-driven color transition (warm → cool)
   - Floating evidence nodes that resolve into order

   Layer Stack (back → front):
     z: -5  .depth-stars        — static background stars
     z: -4  .depth-nebula       — diffuse gas clouds (warm → cool)
     z: -3  .depth-planet       — horizon silhouette, rises on scroll
     z: -2  .depth-foreground   — distant objects, slowest parallax
     z: -1  .depth-atmosphere   — warm/cool glow overlay
     z:  0  .depth-nodes        — floating evidence (chaos → order)
     z:  1  .depth-content      — page content (all content sits above)

   Usage: Add class "depth-page" to any page wrapper.
   The JS automatically initializes scroll-driven effects.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ───────────────────────────────────────────── */

:root {
  /* Depth layers — z-index values */
  --depth-stars: -7;
  --depth-nebula: -6;
  --depth-planet: -5;
  --depth-foreground: -4;
  --depth-constellation: -3;
  --depth-meridian: -2;
  --depth-atmosphere: -1;
  --depth-nodes: 0;

  /* Star density */
  --depth-stars-small: 180;
  --depth-stars-medium: 60;
  --depth-stars-large: 20;

  /* Planet */
  --depth-planet-size: min(45vw, 600px);
  --depth-planet-y: calc(100% - var(--depth-planet-size) * 0.35);

  /* Scroll progress (0 at top, 1 at bottom) */
  --depth-scroll: 0;

  /* Warm zone — sirens (chaos, urgency) */
  --depth-warm-1: rgb(199 71 94 / 60%); /* ruby */
  --depth-warm-2: rgb(217 175 103 / 50%); /* amber */
  --depth-warm-3: rgb(255 120 80 / 30%); /* coral */

  /* Cool zone — scales (order, balance) */
  --depth-cool-1: rgb(45 120 255 / 60%); /* sapphire */
  --depth-cool-2: rgb(98 181 255 / 50%); /* sky */
  --depth-cool-3: rgb(217 175 103 / 40%); /* gold */

  /* Runtime controls */
  --depth-opacity-multiplier: 1;
  --depth-parallax-scale: 1;
  --depth-node-size: 6px;
  --depth-node-glow: 12px;
}

/* ─── Mode Presets (set via body[data-depth-mode]) ─────────────────────── */

/* Public marketing: full narrative transition */
body[data-depth-mode="conversion"],
body[data-depth-mode="discovery"] {
  --depth-opacity-multiplier: 1;
}

/* Auth: calmer, less red urgency */
body[data-depth-mode="auth"] {
  --depth-opacity-multiplier: 0.78;
  --depth-warm-1: rgb(199 71 94 / 42%);
  --depth-warm-2: rgb(217 175 103 / 34%);
  --depth-warm-3: rgb(255 120 80 / 20%);
}

/* Workspace: readability-first, subtle atmosphere */
body[data-depth-mode="workspace"] {
  --depth-opacity-multiplier: 0.58;
  --depth-warm-1: rgb(199 71 94 / 28%);
  --depth-warm-2: rgb(217 175 103 / 22%);
  --depth-warm-3: rgb(255 120 80 / 14%);
  --depth-cool-1: rgb(45 120 255 / 44%);
  --depth-cool-2: rgb(98 181 255 / 36%);
  --depth-cool-3: rgb(217 175 103 / 24%);
}

/* ─── Quality Presets (set via body[data-depth-quality]) ────────────────── */

body[data-depth-quality="high"] {
  --depth-opacity-multiplier: calc(var(--depth-opacity-multiplier) * 1);
  --depth-node-size: 6px;
  --depth-node-glow: 12px;
}

body[data-depth-quality="balanced"] {
  --depth-opacity-multiplier: calc(var(--depth-opacity-multiplier) * 0.82);
  --depth-node-size: 5px;
  --depth-node-glow: 9px;
}

body[data-depth-quality="low"] {
  --depth-opacity-multiplier: calc(var(--depth-opacity-multiplier) * 0.62);
  --depth-node-size: 4px;
  --depth-node-glow: 7px;
}

/* ─── Page Container ─────────────────────────────────────────── */

.depth-page {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
  min-height: 100vh;
}

/* All depth layers are fixed to viewport */
.depth-stars,
.depth-shooting-stars,
.depth-nebula,
.depth-planet,
.depth-foreground,
.depth-constellation,
.depth-meridian,
.depth-atmosphere,
.depth-nodes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ─── L-5: Starfield (static background + twinkle) ──────────── */

.depth-stars {
  z-index: var(--depth-stars);
  background: #030508;
}

/* Generate stars using radial gradients */
.depth-stars::before,
.depth-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

/* Twinkle overlay — subtle opacity modulation for starfield depth */
.depth-stars-twinkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 18% 32%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 68%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 73% 14%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 56%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 89%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 72%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 41%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 93%, rgb(255 255 255 / 40%) 0%, transparent 100%);
  background-size: 320px 320px;
  animation: ev-star-twinkle 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .depth-stars-twinkle {
    animation: none;
  }
}

/* Occasional shooting stars — sparse, staggered, CSS-only */
.depth-shooting-stars {
  z-index: var(--depth-nebula);
  overflow: hidden;
  mix-blend-mode: screen;
}

.depth-shooting-star {
  --shooting-star-travel-x: 24vw;
  --shooting-star-travel-y: 16vh;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: clamp(6rem, 10vw, 10rem);
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  transform-origin: left center;
  rotate: -24deg;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 0.95) 22%,
    var(--depth-cool-2) 58%,
    rgb(255 255 255 / 0%) 100%
  );
  box-shadow:
    0 0 10px rgb(255 255 255 / 26%),
    0 0 24px rgb(98 181 255 / 18%);
  filter: blur(0.2px);
  animation: ev-shooting-star var(--shooting-star-duration, 22s) linear infinite;
  animation-delay: var(--shooting-star-delay, 0s);
}

.depth-shooting-star::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px 84%;
  width: 0.45rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 0 16px rgb(255 255 255 / 40%);
}

.depth-shooting-star--1 {
  inset-block-start: 12%;
  inset-inline-start: 8%;
  --shooting-star-travel-x: 30vw;
  --shooting-star-travel-y: 18vh;
  --shooting-star-duration: 19s;
  --shooting-star-delay: -7s;
}

.depth-shooting-star--2 {
  inset-block-start: 19%;
  inset-inline-start: 62%;
  --shooting-star-travel-x: 22vw;
  --shooting-star-travel-y: 14vh;
  --shooting-star-duration: 27s;
  --shooting-star-delay: -15s;
  width: clamp(5rem, 8vw, 8rem);
  opacity: 0;
}

.depth-shooting-star--3 {
  inset-block-start: 31%;
  inset-inline-start: 28%;
  --shooting-star-travel-x: 26vw;
  --shooting-star-travel-y: 16vh;
  --shooting-star-duration: 24s;
  --shooting-star-delay: -20s;
}

.depth-shooting-star--4 {
  inset-block-start: 9%;
  inset-inline-start: 78%;
  --shooting-star-travel-x: 18vw;
  --shooting-star-travel-y: 12vh;
  --shooting-star-duration: 32s;
  --shooting-star-delay: -11s;
  width: clamp(4.5rem, 7vw, 7rem);
}

body[data-depth-quality="low"] .depth-shooting-star--3,
body[data-depth-quality="low"] .depth-shooting-star--4,
body[data-depth-mode="workspace"] .depth-shooting-stars {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .depth-shooting-stars {
    display: none;
  }
}

/* Small stars — most numerous, faintest */
.depth-stars::before {
  background-image:
    radial-gradient(1px 1px at 12% 23%, rgb(255 255 255 / 70%) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 7%, rgb(255 255 255 / 60%) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 31%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 14%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 42%, rgb(255 255 255 / 70%) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 67%, rgb(255 255 255 / 60%) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 55%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 83%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 91%, rgb(255 255 255 / 70%) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 73%, rgb(255 255 255 / 60%) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 45%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 19%, rgb(255 255 255 / 70%) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 62%, rgb(255 255 255 / 60%) 0%, transparent 100%),
    radial-gradient(1px 1px at 9% 38%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 4%, rgb(255 255 255 / 50%) 0%, transparent 100%);
  background-size: 200px 200px;
}

/* Medium stars — fewer, brighter */
.depth-stars::after {
  background-image:
    radial-gradient(2px 2px at 18% 88%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 35%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 41% 6%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 91% 67%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(2px 2px at 3% 52%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 58% 92%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 19%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(2px 2px at 27% 74%, rgb(255 255 255 / 80%) 0%, transparent 100%);
  background-size: 400px 400px;
  background-position: 100px 50px;
}

/* ─── L-4: Nebula Clouds (warm → cool on scroll) ─────────────── */

.depth-nebula {
  z-index: var(--depth-nebula);
  background: transparent;
  mix-blend-mode: screen;
}

/* Warm nebula — dominant at top of page (sirens) */
.depth-nebula::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 5%, var(--depth-warm-1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 15%, var(--depth-warm-2) 0%, transparent 45%),
    radial-gradient(ellipse 70% 45% at 50% 10%, var(--depth-warm-3) 0%, transparent 40%),
    radial-gradient(ellipse 55% 35% at 8% 35%, var(--depth-warm-1) 0%, transparent 40%),
    radial-gradient(ellipse 65% 42% at 92% 40%, var(--depth-warm-2) 0%, transparent 35%);
  background-size: 110% 110%;
  opacity: calc((1 - var(--depth-scroll, 0) * 0.85) * var(--depth-opacity-multiplier, 1));
  transition: opacity 0.1s linear;
  animation: ev-nebula-drift 28s ease-in-out infinite alternate;
}

/* Cool nebula — emerges at bottom of page (scales) */
.depth-nebula::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 20% 85%, var(--depth-cool-1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 80% 92%, var(--depth-cool-2) 0%, transparent 45%),
    radial-gradient(ellipse 65% 50% at 50% 88%, var(--depth-cool-3) 0%, transparent 40%);
  background-size: 110% 110%;
  opacity: calc(var(--depth-scroll, 0) * 0.8 * var(--depth-opacity-multiplier, 1));
  transition: opacity 0.1s linear;
  animation: ev-nebula-drift-reverse 34s ease-in-out infinite alternate;
}

/* ─── L-3: Planet/Horizon Silhouette ─────────────────────────── */

.depth-planet {
  z-index: var(--depth-planet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.depth-planet__body {
  width: var(--depth-planet-size);
  height: var(--depth-planet-size);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgb(45 120 255 / 15%) 0%,
    rgb(31 58 153 / 25%) 20%,
    rgb(20 40 90 / 40%) 40%,
    rgb(10 25 55 / 60%) 60%,
    rgb(5 15 35 / 85%) 80%,
    rgb(3 10 25) 100%
  );
  box-shadow:
    0 0 calc(var(--depth-planet-size) * 0.3) calc(var(--depth-planet-size) * 0.15) rgb(45 120 255 / 10%),
    inset 0 0 calc(var(--depth-planet-size) * 0.2) calc(var(--depth-planet-size) * 0.1) rgb(0 0 0 / 50%);
  transform: translateY(calc(var(--depth-scroll, 0) * 20%));
  transition: transform 0.1s linear;
  animation: ev-planet-glow 8s ease-in-out infinite;
}

/* Atmospheric ring — thin luminous halo around the planet */
.depth-planet__body::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 44%,
    rgb(45 120 255 / 4%) 46%,
    rgb(98 181 255 / 6%) 48%,
    rgb(45 120 255 / 3%) 50%,
    transparent 52%
  );
  pointer-events: none;
}

/* Surface detail on planet — subtle rings/contour with slow rotation */
.depth-planet__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg at 50% 50%,
    transparent 0deg,
    rgb(98 181 255 / 3%) 30deg,
    transparent 60deg,
    rgb(45 120 255 / 4%) 120deg,
    transparent 150deg
  );
  animation: ev-planet-surface-rotate 120s linear infinite;
}

/* ─── L-2: Foreground Parallax Elements ───────────────────────── */

.depth-foreground {
  z-index: var(--depth-foreground);
}

.depth-foreground__item {
  position: absolute;
  opacity: 0.15;
}

/* Distant horizon line */
.depth-foreground__horizon {
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(98 181 255 / 30%) 20%,
    rgb(98 181 255 / 50%) 50%,
    rgb(98 181 255 / 30%) 80%,
    transparent 100%
  );
  transform: translateY(calc(var(--depth-scroll, 0) * 5%));
}

/* Floating geometric shapes — representing evidence */
.depth-foreground__shape {
  background: rgb(126 157 202 / 8%);
  border: 1px solid rgb(126 157 202 / 12%);
}

.depth-foreground__shape--1 {
  width: 80px;
  height: 60px;
  bottom: 15%;
  left: 5%;
  border-radius: 4px;
  transform: rotate(-5deg) translateY(calc(var(--depth-scroll, 0) * 8%));
}

.depth-foreground__shape--2 {
  width: 120px;
  height: 80px;
  bottom: 25%;
  right: 8%;
  border-radius: 8px;
  transform: rotate(3deg) translateY(calc(var(--depth-scroll, 0) * 12%));
}

.depth-foreground__shape--3 {
  width: 60px;
  height: 60px;
  bottom: 8%;
  left: 35%;
  border-radius: 50%;
  transform: translateY(calc(var(--depth-scroll, 0) * 6%));
}

/* ─── L-1.5: Constellation Mesh + Meridian ───────────────────── */

.depth-constellation {
  z-index: var(--depth-constellation);
  opacity: calc((0.32 + var(--depth-scroll, 0) * 0.3) * var(--depth-opacity-multiplier, 1));
  mix-blend-mode: screen;
}

.depth-constellation__line {
  position: absolute;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 8%) 10%, currentcolor 50%, transparent 100%);
  filter: drop-shadow(0 0 10px currentcolor);
}

/* Pulse points at constellation line endpoints */
.depth-constellation__line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 6px 1px currentcolor;
  animation: ev-pulse-ring 3s var(--ease-decel) infinite;
}

.depth-constellation__line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 6px 1px currentcolor;
  animation: ev-pulse-ring 3s var(--ease-decel) infinite;
  animation-delay: 1.5s;
}

.depth-constellation__line--warm-1::before,
.depth-constellation__line--warm-1::after {
  animation-delay: 0s, 1.5s;
}
.depth-constellation__line--warm-2::before,
.depth-constellation__line--warm-2::after {
  animation-delay: 2s, 3.5s;
}
.depth-constellation__line--bridge::before,
.depth-constellation__line--bridge::after {
  animation-delay: 4s, 5.5s;
}
.depth-constellation__line--cool-1::before,
.depth-constellation__line--cool-1::after {
  animation-delay: 6s, 7.5s;
}
.depth-constellation__line--cool-2::before,
.depth-constellation__line--cool-2::after {
  animation-delay: 8s, 9.5s;
}

.depth-constellation__line--warm-1 {
  top: 16%;
  left: 13%;
  width: 18%;
  color: rgb(199 71 94 / 22%);
  transform: rotate(9deg) translateY(calc(var(--depth-scroll, 0) * 4%));
}

.depth-constellation__line--warm-2 {
  top: 27%;
  left: 23%;
  width: 14%;
  color: rgb(217 175 103 / 22%);
  transform: rotate(-14deg) translateY(calc(var(--depth-scroll, 0) * 5%));
}

.depth-constellation__line--bridge {
  top: 44%;
  left: 39%;
  width: 23%;
  color: rgb(186 197 225 / 16%);
  transform: rotate(7deg) translateY(calc(var(--depth-scroll, 0) * 2%));
}

.depth-constellation__line--cool-1 {
  top: 67%;
  right: 17%;
  width: 19%;
  color: rgb(98 181 255 / 24%);
  transform: rotate(-16deg) translateY(calc(var(--depth-scroll, 0) * -3%));
}

.depth-constellation__line--cool-2 {
  top: 78%;
  left: 17%;
  width: 15%;
  color: rgb(45 120 255 / 22%);
  transform: rotate(14deg) translateY(calc(var(--depth-scroll, 0) * -5%));
}

.depth-meridian {
  z-index: var(--depth-meridian);
  opacity: calc((0.34 + var(--depth-scroll, 0) * 0.28) * var(--depth-opacity-multiplier, 1));
  mix-blend-mode: screen;
}

.depth-meridian__arc,
.depth-meridian__beam {
  position: absolute;
}

.depth-meridian__arc {
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgb(148 163 184 / 10%);
  transform: translateX(-50%);
}

.depth-meridian__arc--outer {
  bottom: calc(var(--depth-planet-size) * -0.64);
  width: min(105vw, 1400px);
  height: min(105vw, 1400px);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 1%),
    0 0 90px rgb(45 120 255 / 7%);
  animation: ev-meridian-rotate 180s linear infinite;
}

.depth-meridian__arc--inner {
  bottom: calc(var(--depth-planet-size) * -0.48);
  width: min(74vw, 960px);
  height: min(74vw, 960px);
  border-color: rgb(98 181 255 / 16%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 1%),
    0 0 60px rgb(98 181 255 / 7%);
  animation: ev-meridian-rotate-reverse 240s linear infinite;
}

.depth-meridian__beam {
  inset-block: 10% 12%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgb(217 175 103 / 10%) 20%, rgb(98 181 255 / 24%) 56%, transparent 100%);
  box-shadow: 0 0 26px rgb(98 181 255 / 10%);
  transform: translateX(-50%);
  animation: ev-beam-pulse 8s ease-in-out infinite;
}

/* ─── L-1: Atmospheric Glow Overlay ─────────────────────────── */

.depth-atmosphere {
  z-index: var(--depth-atmosphere);
  background: transparent;
  mix-blend-mode: screen;
}

/* Warm glow — sirens zone (top of page) */
.depth-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgb(199 71 94 / 12%) 0%, transparent 35%),
    radial-gradient(circle at 80% 5%, rgb(217 175 103 / 10%) 0%, transparent 30%),
    radial-gradient(circle at 50% 15%, rgb(255 120 80 / 8%) 0%, transparent 40%),
    radial-gradient(circle at 50% 5%, rgb(217 175 103 / 6%) 0%, transparent 25%);
  opacity: calc((1 - var(--depth-scroll, 0) * 0.7) * var(--depth-opacity-multiplier, 1));
  transition: opacity 0.1s linear;
}

/* Cool glow — scales zone (bottom of page) */
.depth-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 90%, rgb(45 120 255 / 15%) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, rgb(98 181 255 / 12%) 0%, transparent 35%),
    radial-gradient(circle at 50% 95%, rgb(217 175 103 / 8%) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgb(217 175 103 / 5%) 0%, transparent 30%);
  opacity: calc(var(--depth-scroll, 0) * 0.75 * var(--depth-opacity-multiplier, 1));
  transition: opacity 0.1s linear;
}

/* ─── L0: Floating Evidence Nodes (chaos → order) ─────────────── */

.depth-nodes {
  z-index: var(--depth-nodes);
}

.depth-node {
  position: absolute;
  width: var(--depth-node-size, 6px);
  height: var(--depth-node-size, 6px);
  border-radius: 50%;
  background: currentcolor;
  box-shadow:
    0 0 var(--depth-node-glow, 12px) 2px currentcolor,
    0 0 calc(var(--depth-node-glow, 12px) * 2) calc(var(--depth-node-glow, 12px) * 0.5) currentcolor;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* Pulse ring emanating from each evidence node */
.depth-node::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentcolor;
  animation: ev-node-pulse 3s var(--ease-decel) infinite;
  pointer-events: none;
}

/* Stagger pulse ring delays for organic feel */
.depth-node--warm:nth-child(1)::after {
  animation-delay: 0s;
}
.depth-node--warm:nth-child(2)::after {
  animation-delay: 0.5s;
}
.depth-node--warm:nth-child(3)::after {
  animation-delay: 1.2s;
}
.depth-node--warm:nth-child(4)::after {
  animation-delay: 0.8s;
}
.depth-node--warm:nth-child(5)::after {
  animation-delay: 1.8s;
}
.depth-node--warm:nth-child(6)::after {
  animation-delay: 0.3s;
}
.depth-node--cool:nth-child(7)::after {
  animation-delay: 2.1s;
}
.depth-node--cool:nth-child(8)::after {
  animation-delay: 2.6s;
}
.depth-node--cool:nth-child(9)::after {
  animation-delay: 1.5s;
}
.depth-node--cool:nth-child(10)::after {
  animation-delay: 3.2s;
}
.depth-node--cool:nth-child(11)::after {
  animation-delay: 2.4s;
}
.depth-node--cool:nth-child(12)::after {
  animation-delay: 3.8s;
}

/* Warm nodes — visible at top, scattered (sirens) */
.depth-node--warm {
  color: var(--depth-warm-1);
  opacity: calc((0.7 - var(--depth-scroll, 0) * 0.55) * var(--depth-opacity-multiplier, 1));
}

/* Cool nodes — emerge at bottom, organized (scales) */
.depth-node--cool {
  color: var(--depth-cool-1);
  opacity: calc((0.15 + var(--depth-scroll, 0) * 0.5) * var(--depth-opacity-multiplier, 1));
}

/* Node positions — warm nodes at top, cool nodes at bottom */
.depth-node--warm:nth-child(1) {
  top: 8%;
  left: 12%;
}

.depth-node--warm:nth-child(2) {
  top: 15%;
  left: 78%;
}

.depth-node--warm:nth-child(3) {
  top: 22%;
  left: 45%;
}

.depth-node--warm:nth-child(4) {
  top: 5%;
  left: 88%;
}

.depth-node--warm:nth-child(5) {
  top: 28%;
  left: 23%;
}

.depth-node--warm:nth-child(6) {
  top: 12%;
  left: 56%;
}

.depth-node--cool:nth-child(7) {
  top: 65%;
  left: 15%;
}

.depth-node--cool:nth-child(8) {
  top: 72%;
  left: 82%;
}

.depth-node--cool:nth-child(9) {
  top: 58%;
  left: 48%;
}

.depth-node--cool:nth-child(10) {
  top: 85%;
  left: 30%;
}

.depth-node--cool:nth-child(11) {
  top: 78%;
  left: 65%;
}

.depth-node--cool:nth-child(12) {
  top: 92%;
  left: 50%;
}

/* ─── L0.5: Connection Lines (evidence mesh) ───────────────────── */

/* Thin diagonal lines connecting node clusters — warm connections
   fade as you scroll toward scales, cool connections strengthen */
.depth-nodes::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Warm connections (top half) */
    linear-gradient(
      168deg,
      transparent 0%,
      transparent 7%,
      rgb(199 71 94 / 4%) 7.5%,
      rgb(199 71 94 / 4%) 8%,
      transparent 8.5%,
      transparent 14%,
      rgb(217 175 103 / 3%) 14.5%,
      rgb(217 175 103 / 3%) 15%,
      transparent 15.5%,
      transparent 22%,
      rgb(199 71 94 / 3%) 22.5%,
      rgb(199 71 94 / 3%) 23%,
      transparent 23.5%,
      transparent 100%
    ),
    linear-gradient(
      12deg,
      transparent 0%,
      transparent 10%,
      rgb(217 175 103 / 3%) 10.5%,
      rgb(217 175 103 / 3%) 11%,
      transparent 11.5%,
      transparent 18%,
      rgb(199 71 94 / 4%) 18.5%,
      rgb(199 71 94 / 4%) 19%,
      transparent 19.5%,
      transparent 100%
    );
  opacity: calc((0.6 - var(--depth-scroll, 0) * 0.5) * var(--depth-opacity-multiplier, 1));
  transition: opacity 0.1s linear;
}

/* Cool connections (bottom half) */
.depth-nodes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      172deg,
      transparent 0%,
      transparent 55%,
      rgb(45 120 255 / 3%) 55.5%,
      rgb(45 120 255 / 3%) 56%,
      transparent 56.5%,
      transparent 65%,
      rgb(98 181 255 / 4%) 65.5%,
      rgb(98 181 255 / 4%) 66%,
      transparent 66.5%,
      transparent 78%,
      rgb(45 120 255 / 3%) 78.5%,
      rgb(45 120 255 / 3%) 79%,
      transparent 79.5%,
      transparent 100%
    ),
    linear-gradient(
      8deg,
      transparent 0%,
      transparent 60%,
      rgb(98 181 255 / 3%) 60.5%,
      rgb(98 181 255 / 3%) 61%,
      transparent 61.5%,
      transparent 72%,
      rgb(45 120 255 / 4%) 72.5%,
      rgb(45 120 255 / 4%) 73%,
      transparent 73.5%,
      transparent 85%,
      rgb(98 181 255 / 3%) 85.5%,
      rgb(98 181 255 / 3%) 86%,
      transparent 86.5%,
      transparent 100%
    );
  opacity: calc((0.1 + var(--depth-scroll, 0) * 0.5) * var(--depth-opacity-multiplier, 1));
  transition: opacity 0.1s linear;
}

/* ─── L-2.5: Sacred Geometry Layer (order, justice, balance) ──── */

.depth-geometry {
  position: fixed;
  inset: 0;
  z-index: calc(var(--depth-constellation, -3) + 0.5);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc((0.04 + var(--depth-scroll, 0) * 0.06) * var(--depth-opacity-multiplier, 1));
  transition: opacity 0.3s ease;
}

/* Metatron's Cube — primary sacred geometry */
.depth-geometry::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/launch/metatrons-cube.svg") center center / 1800px auto no-repeat;
  animation: ev-geometry-rotate 180s linear infinite;
}

/* Flower of Life — secondary sacred geometry */
.depth-geometry::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/launch/flower-of-life.svg") center center / 1600px auto no-repeat;
  animation: ev-geometry-rotate-reverse 240s linear infinite;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .depth-geometry::before,
  .depth-geometry::after {
    animation: none;
  }
}

/* ─── Scroll Progress Indicator ──────────────────────────────── */

.depth-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  background: rgb(126 157 202 / 10%);
  overflow: hidden;
}

.depth-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--depth-warm-1) 0%, var(--depth-warm-2) 30%, var(--depth-cool-3) 70%, var(--depth-cool-1) 100%);
  width: calc(var(--depth-scroll, 0) * 100%);
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--depth-cool-1);
}

/* Reduce visual chrome in lower quality tiers and workspace contexts */
body[data-depth-quality="low"] .depth-progress,
body[data-depth-mode="workspace"] .depth-progress {
  display: none;
}

body[data-depth-quality="low"] .depth-foreground__shape {
  display: none;
}

body[data-depth-quality="low"] .depth-constellation,
body[data-depth-quality="low"] .depth-meridian {
  opacity: 0.18;
}

/* ─── Reduced Motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .depth-stars::before,
  .depth-stars::after,
  .depth-stars-twinkle,
  .depth-shooting-star,
  .depth-nebula::before,
  .depth-nebula::after,
  .depth-planet__body,
  .depth-planet__body::after,
  .depth-foreground__horizon,
  .depth-foreground__shape,
  .depth-constellation__line,
  .depth-constellation__line::before,
  .depth-constellation__line::after,
  .depth-atmosphere::before,
  .depth-atmosphere::after,
  .depth-node,
  .depth-node::after,
  .depth-meridian__beam,
  .depth-meridian__arc,
  .depth-geometry::before,
  .depth-geometry::after {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .depth-nebula::before,
  .depth-nebula::after,
  .depth-atmosphere::before,
  .depth-atmosphere::after {
    opacity: 0.5;
  }

  .depth-node--warm,
  .depth-node--cool {
    opacity: 0.5;
  }

  .depth-meridian__beam,
  .depth-meridian__arc {
    transition: none !important;
  }
}

/* ─── Dark Mode Overrides (if needed) ─────────────────────────── */

@media (prefers-color-scheme: light) {
  .depth-stars {
    background: #0a0f18;
  }

  .depth-stars::before,
  .depth-stars::after {
    opacity: 0.7;
  }
}