.exodus-depth-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .7s ease;
  -webkit-mask-image: radial-gradient(circle at 72% 42%, #000 0 38%, transparent 82%);
  mask-image: radial-gradient(circle at 72% 42%, #000 0 38%, transparent 82%);
}

.exodus-depth .exodus-depth-canvas { opacity: .48; }

.depth-toggle {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 75;
  min-height: 44px;
  padding: .65rem .85rem;
  border: 1px solid rgba(215, 182, 108, .68);
  border-radius: 999px;
  color: var(--cloud);
  background: rgba(5, 11, 19, .88);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .4), inset 0 0 20px rgba(215, 182, 108, .08);
  backdrop-filter: blur(12px);
  font: 850 .75rem/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

.depth-toggle::before {
  content: "";
  display: inline-block;
  width: .48rem;
  height: .48rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold);
}

.depth-toggle[aria-pressed="false"]::before { background: var(--mist); box-shadow: none; }

.exodus-depth body { perspective: 1500px; }
.exodus-depth main,
.exodus-depth section,
.exodus-depth .cinema-stage,
.exodus-depth .cinema-scenes { transform-style: preserve-3d; }

.exodus-depth .cinema-frame {
  transform: perspective(1300px) translateZ(-24px) scale(1.025);
  transform-origin: center;
}

.exodus-depth .cinema-caption {
  position: relative;
  z-index: 2;
  box-shadow: 0 -28px 70px rgba(0, 0, 0, .44);
  transform: translateZ(42px);
}

.exodus-depth .cinema-caption h1,
.exodus-depth .cinema-caption h2 {
  text-shadow: 0 4px 2px rgba(0, 0, 0, .28), 0 18px 50px rgba(0, 0, 0, .72);
}

.depth-surface {
  --depth-rx: 0deg;
  --depth-ry: 0deg;
  --depth-z: 0px;
  position: relative;
  transform: perspective(1100px) rotateX(var(--depth-rx)) rotateY(var(--depth-ry)) translateZ(var(--depth-z));
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform .2s ease-out, border-color .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.depth-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  opacity: var(--depth-shine, 0);
  pointer-events: none;
  background: radial-gradient(circle at var(--depth-light-x, 50%) var(--depth-light-y, 50%), rgba(255, 224, 155, .2), transparent 42%);
  transition: opacity .2s ease;
}

.exodus-depth-motion .depth-surface:hover {
  --depth-z: 16px;
  --depth-shine: 1;
  border-color: rgba(215, 182, 108, .54);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .34), 0 0 35px rgba(125, 213, 220, .06);
}

.exodus-depth .poster-panel > img,
.exodus-depth .episode-art,
.exodus-depth .character-card > div,
.exodus-depth .gallery-card img {
  transform: translateZ(24px);
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .34));
}

.exodus-depth .poster-panel > div,
.exodus-depth .episode-reading,
.exodus-depth .journey-readout,
.exodus-depth .portal-grid h3,
.exodus-depth .launch-grid h3 {
  position: relative;
  z-index: 2;
  transform: translateZ(34px);
}

.exodus-depth .movement-strip article:nth-child(1) { transform: translateZ(8px); }
.exodus-depth .movement-strip article:nth-child(2) { transform: translateZ(18px); }
.exodus-depth .movement-strip article:nth-child(3) { transform: translateZ(28px); }
.exodus-depth .movement-strip article:nth-child(4) { transform: translateZ(38px); }

@media (max-width: 760px), (pointer: coarse) {
  .exodus-depth .exodus-depth-canvas { opacity: .28; }
  .depth-surface { will-change: auto; }
  .exodus-depth .cinema-frame { transform: none; }
  .exodus-depth .cinema-caption { transform: none; }
  .exodus-depth .movement-strip article:nth-child(n) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .exodus-depth-canvas { transition: none; }
  .depth-surface { transform: none; transition: none; will-change: auto; }
  .exodus-depth .cinema-frame,
  .exodus-depth .cinema-caption { transform: none; }
}

@media print {
  .exodus-depth-canvas,
  .depth-toggle { display: none !important; }
  .depth-surface,
  .exodus-depth .cinema-frame,
  .exodus-depth .cinema-caption { transform: none !important; box-shadow: none !important; }
}