/* -------------------------------------------------------------------------
   Immersive technical — design tokens
   ------------------------------------------------------------------------- */
:root {
  --color-bg: #0a0a0b;
  --color-bg-elevated: #1c1c22;
  --color-bg-muted: #2a2a33;
  --color-text: #ece9e4;
  --color-text-muted: #a3a098;
  --color-accent: #6b7280;
  --color-border: #2a2a33;
  --color-stay: #4a4a52;
  --color-up-glow: rgba(180, 170, 160, 0.35);

  --color-bg-light: #1a1816;
  --color-bg-light-top: #2d2824;
  --color-text-light: #f5f3f0;
  --color-accent-light: #c4b8a8;
  --color-dot: rgba(244, 238, 230, 0.18);

  --transition-slow: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-medium: 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.28s cubic-bezier(0.22, 1, 0.36, 1);

  --hero-scroll-progress: 0;
  --stay-scroll: 0;
  --up-scroll: 0;
  --up-mouse-x: 0.5;
  --up-mouse-y: 0.5;
  --cursor-x: 50%;
  --cursor-y: 50%;

  --tilt-x-deg: 0deg;
  --tilt-y-deg: 0deg;
  --choice-glow-x: 50%;
  --choice-glow-y: 45%;

  --hero-ptr-x: 0;
  --hero-ptr-y: 0;
  --choice-ptr-x: 0;
  --choice-ptr-y: 0;
  --stay-ptr-x: 0;
  --stay-ptr-y: 0;
  --up-ptr-x: 0;
  --up-ptr-y: 0;

  /* Organic “aura” — multiplied with cursor spotlight; JS nudges 0.97–1.03 */
  --aura-breathe: 1;
  --cursor-spot-opacity: 1;

  /* Layout / touch */
  --space-page: clamp(1.25rem, 4vw, 2rem);
  --touch-target: 48px;

  --choice-ptr-x: 0;
  --choice-ptr-y: 0;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) {
    --transition-slow: 0.35s ease;
    --transition-medium: 0.2s ease;
    --transition-fast: 0.15s ease;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  background: rgba(180, 175, 200, 0.35);
  color: var(--color-text);
}

/* Skip link — keyboard / screen reader first stop */
.skip-link {
  position: absolute;
  left: var(--space-page);
  top: calc(var(--space-page) + env(safe-area-inset-top, 0px));
  z-index: 100001;
  padding: 0.6rem 1rem;
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0a0a0c;
  background: #e4e2e6;
  border-radius: 0.25rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.skip-link:focus {
  outline: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid rgba(220, 215, 235, 0.95);
  outline-offset: 3px;
}

.x-float-link {
  position: fixed;
  top: calc(0.9rem + env(safe-area-inset-top, 0px));
  right: calc(0.9rem + env(safe-area-inset-right, 0px));
  z-index: 100002;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(245, 243, 240, 0.95);
  background: rgba(10, 10, 12, 0.35);
  border: 1px solid rgba(220, 215, 235, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35);
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.x-float-link:hover,
.x-float-link:focus-visible {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(220, 215, 235, 0.38);
  background: rgba(10, 10, 12, 0.55);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
}

.x-float-svg {
  width: 22px;
  height: 22px;
  display: block;
  shape-rendering: geometricPrecision;
}

html.no-motion .x-float-link {
  transition: none;
}

a:focus-visible:not(.btn):not(.skip-link) {
  outline: 2px solid rgba(190, 195, 215, 0.85);
  outline-offset: 3px;
  border-radius: 0.15rem;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0.75rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) {
    scroll-behavior: auto;
  }
}

body {
  position: relative;
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: linear-gradient(
    125deg,
    #060608 0%,
    #0f1118 22%,
    #08090e 48%,
    #121520 72%,
    #07080c 100%
  );
  background-size: 320% 320%;
  animation: bodyBackdropShift 48s ease-in-out infinite;
  min-height: 100vh;
  overflow-x: hidden;
}

@keyframes bodyBackdropShift {
  0%,
  100% {
    background-position: 0% 40%;
  }
  33% {
    background-position: 100% 60%;
  }
  66% {
    background-position: 40% 100%;
  }
}

html.no-motion body {
  animation: none;
  background-size: 100% 100%;
}

/* -------------------------------------------------------------------------
   Site-wide ambient aura (fixed layers behind content)
   ------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

body[data-page="home"]::before,
body[data-page="choice"]::before {
  background:
    radial-gradient(ellipse 95% 78% at 50% 36%, rgba(88, 102, 132, 0.1) 0%, transparent 54%),
    radial-gradient(ellipse 50% 42% at 88% 12%, rgba(65, 75, 98, 0.08) 0%, transparent 50%),
    radial-gradient(
      ellipse 108% 96% at 50% 118%,
      rgba(6, 8, 12, 0.5) 0%,
      rgba(4, 5, 8, 0.82) 42%,
      rgba(0, 0, 0, 0.94) 100%
    );
  animation: auraBreathCool 17s ease-in-out infinite;
}

body[data-page="stay"]::before {
  background:
    radial-gradient(ellipse 78% 62% at 48% 48%, rgba(35, 42, 58, 0.24) 0%, transparent 58%),
    radial-gradient(ellipse 62% 48% at 82% 22%, rgba(18, 22, 38, 0.2) 0%, transparent 52%),
    radial-gradient(ellipse 100% 100% at 50% 100%, transparent 0%, rgba(0, 0, 0, 0.76) 100%);
  background-size: 130% 130%, 115% 115%, 100% 100%;
  animation: auraBreathPit 23s ease-in-out infinite, stayAuraSlide 52s ease-in-out infinite;
}

body[data-page="up"]::before {
  background:
    radial-gradient(ellipse 118% 82% at 52% -8%, rgba(255, 248, 232, 0.18) 0%, transparent 48%),
    radial-gradient(ellipse 68% 52% at 22% 72%, rgba(200, 165, 130, 0.11) 0%, transparent 50%),
    radial-gradient(ellipse 88% 72% at 78% 28%, rgba(120, 95, 72, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 92% 88% at 50% 110%, rgba(14, 11, 8, 0.45) 0%, transparent 56%);
  background-size: 115% 115%, 135% 135%, 100% 100%, 100% 100%;
  animation: auraBreathWarm 25s ease-in-out infinite, upAuraSlide 44s ease-in-out infinite;
}

@keyframes auraBreathCool {
  0%,
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.01);
  }
}

@keyframes auraBreathPit {
  0%,
  100% {
    opacity: 0.86;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.006);
  }
}

@keyframes auraBreathWarm {
  0%,
  100% {
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.008);
  }
}

@keyframes stayAuraSlide {
  0%,
  100% {
    background-position: 0% 0%, 100% 20%, 50% 100%;
  }
  33% {
    background-position: 12% 8%, 0% 60%, 50% 100%;
  }
  66% {
    background-position: 6% 14%, 85% 0%, 50% 100%;
  }
}

@keyframes upAuraSlide {
  0%,
  100% {
    background-position: 0% 0%, 0% 0%, 100% 30%, 50% 100%;
  }
  50% {
    background-position: 10% 6%, 18% 12%, 0% 70%, 50% 100%;
  }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

body[data-page="stay"]::after {
  opacity: 0.055;
  mix-blend-mode: soft-light;
}

body[data-page="up"]::after {
  opacity: 0.032;
  mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) body::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html:not(.depressionmax-full-motion) body::after {
    opacity: 0.022;
  }
}

main {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: mainAuraArrive 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}

@keyframes mainAuraArrive {
  from {
    opacity: 0.9;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) main {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Cursor spotlight (disabled via .no-motion on html)
   ------------------------------------------------------------------------- */
.cursor-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(
    85vmax circle at var(--cursor-x) var(--cursor-y),
    rgba(255, 252, 245, 0.028) 0%,
    transparent 58%
  );
  mix-blend-mode: soft-light;
  transition: opacity 0.8s ease;
  opacity: calc(var(--cursor-spot-opacity, 1) * var(--aura-breathe, 1));
}

html.no-motion .cursor-spotlight {
  opacity: 0;
}

/* -------------------------------------------------------------------------
   Full-screen transition overlay ("go up")
   ------------------------------------------------------------------------- */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 100% at 50% 42%,
    rgba(255, 246, 236, 0.82) 0%,
    rgba(210, 190, 170, 0.65) 48%,
    rgba(28, 24, 20, 0.55) 100%
  );
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.55s;
}

.transition-overlay.is-active {
  opacity: 1;
  visibility: visible;
  filter: none;
  transition: opacity 0.75s cubic-bezier(0.33, 1, 0.36, 1), visibility 0s;
}

.transition-overlay.is-fading-out {
  opacity: 0;
  filter: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, filter 0.25s ease;
}

html.no-motion .transition-overlay.is-active {
  filter: none;
}

/* Removed chromatic “flash” on transition — calmer for photosensitivity */
body.go-up-chromatic {
  filter: none;
}

/* -------------------------------------------------------------------------
   Technical HUD corners (decorative)
   ------------------------------------------------------------------------- */
.hud-frame {
  --hud-line: rgba(140, 155, 178, 0.42);
  position: absolute;
  inset: clamp(10px, 2.5vw, 22px);
  z-index: 6;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(var(--hud-line), var(--hud-line)) 0 0 / clamp(18px, 3.5vw, 28px) 1px no-repeat,
    linear-gradient(var(--hud-line), var(--hud-line)) 0 0 / 1px clamp(18px, 3.5vw, 28px) no-repeat,
    linear-gradient(var(--hud-line), var(--hud-line)) 100% 0 / clamp(18px, 3.5vw, 28px) 1px no-repeat,
    linear-gradient(var(--hud-line), var(--hud-line)) 100% 0 / 1px clamp(18px, 3.5vw, 28px) no-repeat,
    linear-gradient(var(--hud-line), var(--hud-line)) 0 100% / clamp(18px, 3.5vw, 28px) 1px no-repeat,
    linear-gradient(var(--hud-line), var(--hud-line)) 0 100% / 1px clamp(18px, 3.5vw, 28px) no-repeat,
    linear-gradient(var(--hud-line), var(--hud-line)) 100% 100% / clamp(18px, 3.5vw, 28px) 1px no-repeat,
    linear-gradient(var(--hud-line), var(--hud-line)) 100% 100% / 1px clamp(18px, 3.5vw, 28px) no-repeat;
  animation: hudFramePulse 4.5s ease-in-out infinite;
}

.outcome .hud-frame {
  --hud-line: rgba(120, 135, 160, 0.38);
}

.outcome-up .hud-frame {
  --hud-line: rgba(220, 200, 180, 0.35);
}

@keyframes hudFramePulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hud-frame {
    animation: none;
    opacity: 0.5;
  }
}

/* Tech status bar — monospace HUD */
.tech-status {
  position: fixed;
  bottom: clamp(10px, 2vw, 18px);
  left: clamp(12px, 2.5vw, 22px);
  z-index: 50;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(140, 155, 178, 0.6);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.85;
}

.tech-status-label {
  color: rgba(100, 115, 140, 0.7);
}

.tech-status-value {
  color: rgba(160, 175, 200, 0.9);
}

.tech-status-meta {
  font-size: 0.58rem;
  color: rgba(90, 105, 130, 0.5);
  margin-left: 0.25rem;
}

.tech-status--stay .tech-status-value {
  color: rgba(140, 138, 135, 0.85);
}

.tech-status--up .tech-status-value {
  color: rgba(220, 205, 190, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .tech-status-meta {
    color: rgba(90, 105, 130, 0.4);
  }
}

/* Glitch on hover — titles */
.choice-heading,
.outcome-stay-title {
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.choice-heading:hover,
.outcome-stay-title:hover {
  animation: textGlitch 0.4s ease-out;
}

@keyframes textGlitch {
  0%,
  100% {
    transform: translate(0, 0);
    text-shadow: 0 0 40px rgba(200, 205, 220, 0.06);
  }
  20% {
    transform: translate(-1px, 1px);
    text-shadow: -1px 0 rgba(180, 190, 220, 0.3), 1px 0 rgba(200, 100, 150, 0.2);
  }
  40% {
    transform: translate(1px, -1px);
    text-shadow: 1px 0 rgba(200, 100, 150, 0.25), -1px 0 rgba(100, 180, 200, 0.2);
  }
  60% {
    transform: translate(-0.5px, 0.5px);
    text-shadow: 0.5px 0 rgba(100, 180, 200, 0.2);
  }
  80% {
    transform: translate(0.5px, -0.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .choice-heading:hover,
  html:not(.depressionmax-full-motion) .outcome-stay-title:hover {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.5rem, env(safe-area-inset-top)) var(--space-page) max(2rem, env(safe-area-inset-bottom));
  isolation: isolate;
  overflow: hidden;
  perspective: 1200px;
}

.hero.in-view .hero-dust {
  opacity: 0.88;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.78;
}

html.no-motion .hero-canvas {
  display: none;
}

.choice-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.58;
}

html.no-motion .choice-canvas {
  display: none;
}

.hero-video-wrap {
  position: absolute;
  inset: -10%;
  z-index: 0;
  will-change: transform;
  transform: translate3d(
      calc(var(--hero-ptr-x, 0) * 36px),
      calc(var(--hero-scroll-progress) * -130px + var(--hero-ptr-y, 0) * 28px),
      0
    )
    scale(1.06);
  transition: transform 0.08s ease-out;
}

html.no-motion .hero-video-wrap,
html.no-motion .hero-overlay {
  transform: none !important;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  transform-origin: 50% 50%;
  animation: heroVideoKenburns 56s ease-in-out infinite alternate;
}

@keyframes heroVideoKenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.05) translate(-1.2%, 0.9%);
  }
}

html.no-motion .hero-video {
  animation: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    rgba(10, 10, 11, 0.78) 38%,
    rgba(10, 10, 11, 0.92) 100%
  );
  pointer-events: none;
  animation: heroOverlayBreathe 28s ease-in-out infinite;
}

@keyframes heroOverlayBreathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.96;
  }
}

html.no-motion .hero-overlay {
  animation: none;
}

/* Landing — bleak mood but background must read clearly (video + depth) */
.hero--bleak .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(4, 4, 7, 0.35) 0%,
    rgba(6, 6, 10, 0.5) 28%,
    rgba(5, 5, 9, 0.68) 58%,
    rgba(3, 3, 6, 0.82) 100%
  );
}

.hero--bleak .hero-video {
  opacity: 0.58;
  filter: contrast(1.06) saturate(1.08) brightness(1.04);
}

.hero--bleak .hero-vignette {
  background: radial-gradient(
    ellipse 82% 72% at 50% 44%,
    transparent 0%,
    rgba(4, 4, 8, 0.22) 52%,
    rgba(0, 0, 0, 0.65) 100%
  );
  opacity: 0.92;
}

.hero--bleak .hero-fog {
  opacity: 0.48;
}

.hero--bleak .hero-dust {
  opacity: 0.48;
}

.hero--bleak .hero-canvas {
  opacity: 0.55;
}

.hero-fog {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}

.hero-fog-1 {
  background: radial-gradient(
    circle at 30% 60%,
    rgba(80, 90, 110, 0.48) 0%,
    transparent 52%
  );
  animation: fogDrift1 16s ease-in-out infinite;
}

.hero-fog-2 {
  background: radial-gradient(
    circle at 70% 40%,
    rgba(40, 45, 55, 0.52) 0%,
    transparent 48%
  );
  animation: fogDrift2 20s ease-in-out infinite;
}

.hero-fog-3 {
  background: radial-gradient(
    circle at 50% 80%,
    rgba(25, 28, 35, 0.5) 0%,
    transparent 40%
  );
  animation: fogDrift3 22s ease-in-out infinite;
}

@keyframes fogDrift1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(14%, -9%) scale(1.14) rotate(4deg);
  }
}

@keyframes fogDrift2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1.06) rotate(0deg);
  }
  50% {
    transform: translate(-16%, 11%) scale(1.02) rotate(-5deg);
  }
}

@keyframes fogDrift3 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5%, 8%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-fog-1,
  html:not(.depressionmax-full-motion) .hero-fog-2,
  html:not(.depressionmax-full-motion) .hero-fog-3 {
    animation: none;
  }
}

.hero-dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: radial-gradient(
      1px 1px at 10% 20%,
      rgba(255, 255, 255, 0.12) 50%,
      transparent 50%
    ),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.08) 50%, transparent 50%),
    radial-gradient(1px 1px at 40% 60%, rgba(200, 200, 210, 0.1) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 30%, rgba(255, 255, 255, 0.06) 50%, transparent 50%),
    radial-gradient(1px 1px at 25% 90%, rgba(255, 255, 255, 0.07) 50%, transparent 50%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: dustFall 72s linear infinite;
  opacity: 0.72;
}

@keyframes dustFall {
  0% {
    transform: translateY(-5%) translateX(0);
  }
  100% {
    transform: translateY(5%) translateX(1.5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-dust {
    animation: none;
  }
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.055;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-grain-2 {
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 5;
  animation: grainShift 0.12s steps(2) infinite;
}

@keyframes grainShift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-1px, 1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-grain-2 {
    animation: none;
  }
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(
    ellipse 65% 55% at 50% 45%,
    transparent 0%,
    rgba(5, 5, 8, 0.5) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
  animation: vignetteDrift 22s ease-in-out infinite;
}

@keyframes vignetteDrift {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.97;
    transform: scale(1.015);
  }
}

html.no-motion .hero-vignette {
  animation: none;
}

.hero-scan {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 3px
  );
  opacity: 0.4;
  animation: scanFlicker 6s ease-in-out infinite;
}

@keyframes scanFlicker {
  0%,
  100% {
    opacity: 0.35;
  }
  48% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-scan {
    animation: none;
    opacity: 0.3;
  }
}

.hero-content {
  position: relative;
  z-index: 8;
  text-align: center;
  max-width: 36rem;
  transform-style: preserve-3d;
  transform: translate3d(
      calc(var(--hero-ptr-x, 0) * 30px),
      calc(var(--hero-ptr-y, 0) * 24px + var(--hero-scroll-progress, 0) * -42px),
      0
    )
    rotateX(var(--tilt-x-deg, 0deg)) rotateY(var(--tilt-y-deg, 0deg));
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* Soft field behind copy: depth without fighting the tilt */
.hero-content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 140%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 55% 50% at 50% 50%,
    rgba(165, 180, 215, 0.07) 0%,
    rgba(80, 95, 130, 0.03) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  animation: heroFieldPulse 14s ease-in-out infinite;
}

@keyframes heroFieldPulse {
  0%,
  100% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

html.no-motion .hero-content {
  transform: none;
  transition: none;
  will-change: auto;
}

html.no-motion .hero-content::before {
  animation: none;
  opacity: 0.7;
}

.hero:not(.in-view) .hero-content {
  opacity: 0.92;
}

.hero.in-view .hero-content {
  opacity: 1;
  transition: transform 0.15s ease-out, opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 4.2vw, 2.35rem);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  line-height: 1.52;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow:
    0 0 48px rgba(195, 205, 230, 0.14),
    0 0 100px rgba(160, 175, 210, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.35);
}

.hero-line-2 {
  margin-top: 0.85rem;
}

.hero-line-3 {
  margin-top: 0.55rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-shadow:
    0 0 36px rgba(170, 178, 195, 0.09),
    0 1px 0 rgba(0, 0, 0, 0.32);
}

.hero-whisper {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.05rem, 2.85vw, 1.28rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(200, 202, 212, 0.88);
  margin: 1.75rem 0 0;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  letter-spacing: 0.01em;
  text-wrap: balance;
  animation: heroWhisperIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 2.55s both;
}

@keyframes heroWhisperIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-whisper {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.65rem);
  animation: heroWordIn var(--transition-slow) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-line-1 .hero-word:nth-child(1) {
  animation-delay: 0.18s;
}
.hero-line-1 .hero-word:nth-child(2) {
  animation-delay: 0.26s;
}
.hero-line-1 .hero-word:nth-child(3) {
  animation-delay: 0.34s;
}
.hero-line-1 .hero-word:nth-child(4) {
  animation-delay: 0.42s;
}
.hero-line-1 .hero-word:nth-child(5) {
  animation-delay: 0.5s;
}
.hero-line-1 .hero-word:nth-child(6) {
  animation-delay: 0.58s;
}
.hero-line-1 .hero-word:nth-child(7) {
  animation-delay: 0.66s;
}
.hero-line-1 .hero-word:nth-child(8) {
  animation-delay: 0.74s;
}
.hero-line-1 .hero-word:nth-child(9) {
  animation-delay: 0.82s;
}
.hero-line-1 .hero-word:nth-child(10) {
  animation-delay: 0.9s;
}

.hero-line-2 .hero-word:nth-child(1) {
  animation-delay: 1.12s;
}
.hero-line-2 .hero-word:nth-child(2) {
  animation-delay: 1.22s;
}
.hero-line-2 .hero-word:nth-child(3) {
  animation-delay: 1.32s;
}
.hero-line-2 .hero-word:nth-child(4) {
  animation-delay: 1.42s;
}
.hero-line-2 .hero-word:nth-child(5) {
  animation-delay: 1.52s;
}
.hero-line-2 .hero-word:nth-child(6) {
  animation-delay: 1.62s;
}

.hero-line-3 .hero-word:nth-child(1) {
  animation-delay: 1.82s;
}
.hero-line-3 .hero-word:nth-child(2) {
  animation-delay: 1.92s;
}
.hero-line-3 .hero-word:nth-child(3) {
  animation-delay: 2.02s;
}
.hero-line-3 .hero-word:nth-child(4) {
  animation-delay: 2.12s;
}
.hero-line-3 .hero-word:nth-child(5) {
  animation-delay: 2.22s;
}
.hero-line-3 .hero-word:nth-child(6) {
  animation-delay: 2.32s;
}

@keyframes heroWordIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-word {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Choice
   ------------------------------------------------------------------------- */
.choice {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) var(--space-page);
  background-color: var(--color-bg);
  background-image: linear-gradient(
    185deg,
    #07080d 0%,
    #101522 38%,
    #0a0b10 55%,
    #121826 100%
  );
  background-size: 100% 240%;
  animation: choiceBackdropScroll 40s ease-in-out infinite;
  overflow: hidden;
}

@keyframes choiceBackdropScroll {
  0%,
  100% {
    background-position: 0% 20%;
  }
  50% {
    background-position: 0% 80%;
  }
}

html.no-motion .choice {
  animation: none;
  background-size: 100% 100%;
}

.choice-cluster-glow {
  position: absolute;
  left: var(--choice-glow-x, 50%);
  top: var(--choice-glow-y, 45%);
  width: min(120vw, 720px);
  height: min(120vw, 720px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(115, 130, 165, 0.28) 0%,
    rgba(55, 62, 82, 0.1) 38%,
    transparent 64%
  );
  opacity: 0.46;
  filter: blur(0.5px);
  transition: opacity 0.35s ease, left 0.12s ease-out, top 0.12s ease-out;
  animation: choiceAuraPulse 14s ease-in-out infinite;
}

@keyframes choiceAuraPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

html.no-motion .choice-cluster-glow {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .choice-cluster-glow {
    animation: none;
    opacity: 0.44;
    transform: translate(-50%, -50%);
    filter: none;
  }
}

.choice-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(35, 38, 48, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(28, 30, 38, 0.35) 0%, transparent 50%);
  pointer-events: none;
  animation: choiceMeshSwell 36s ease-in-out infinite;
}

@keyframes choiceMeshSwell {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: scale(1.025) translate(-0.8%, 0.5%);
    opacity: 0.96;
  }
}

html.no-motion .choice-mesh {
  animation: none;
}

.choice-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.45) 100%);
}

.choice-divider {
  width: min(320px, 70vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-stay), transparent);
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
  flex-shrink: 0;
}

.choice-divider.is-visible {
  opacity: 0.55;
  transform: scaleX(1);
}

.choice-inner {
  text-align: center;
  max-width: 38rem;
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  padding: 2rem 0;
  opacity: 0.72;
  transform: translateY(14px) perspective(900px) rotateX(calc(var(--tilt-x-deg, 0deg) * 0.35))
    rotateY(calc(var(--tilt-y-deg, 0deg) * 0.35));
  transform-style: preserve-3d;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.12s ease-out;
}

.choice-inner::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 70% 55% at 50% 45%,
    rgba(100, 115, 155, 0.12) 0%,
    rgba(45, 52, 72, 0.04) 50%,
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
  animation: choiceInnerGlow 16s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes choiceInnerGlow {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

html.no-motion .choice-inner::before {
  animation: none;
  opacity: 0.8;
}

.choice.in-view .choice-inner {
  opacity: 1;
  transform: translateY(0) perspective(900px) rotateX(calc(var(--tilt-x-deg, 0deg) * 0.35))
    rotateY(calc(var(--tilt-y-deg, 0deg) * 0.35));
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .choice-inner {
    opacity: 1;
    transform: none;
    transition: none;
    transform-style: flat;
  }
}

.choice-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
  opacity: 0.88;
}

.choice-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  font-style: italic;
  line-height: 1.65;
  color: rgba(180, 178, 188, 0.88);
  margin: 0.5rem 0 2.25rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.choice-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  background: linear-gradient(
    105deg,
    var(--color-text-muted) 0%,
    var(--color-text) 35%,
    var(--color-text-muted) 55%,
    var(--color-text) 85%,
    var(--color-text-muted) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: choiceHeadingShimmer 22s ease-in-out infinite;
}

@keyframes choiceHeadingShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .choice-heading {
    color: var(--color-text-muted);
    background: none;
    -webkit-text-fill-color: unset;
    animation: none;
  }

  html:not(.depressionmax-full-motion) .choice-inner::before {
    animation: none;
    opacity: 0.75;
  }
}

.choice-buttons {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.choice-buttons .btn {
  text-align: center;
  max-width: min(100%, 20rem);
  line-height: 1.35;
}

@media (max-width: 36rem) {
  .choice-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    gap: 1rem;
  }

  .choice-buttons .btn-magnetic-wrap {
    width: 100%;
  }

  .choice-buttons .btn {
    width: 100%;
    max-width: none;
  }
}

@keyframes choiceCopyIn {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.choice.in-view .choice-kicker {
  animation: choiceCopyIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

/* Entrance + existing gradient shimmer (shimmer starts after line settles) */
.choice.in-view .choice-heading {
  animation:
    choiceCopyIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both,
    choiceHeadingShimmer 22s ease-in-out 0.75s infinite;
}

.choice.in-view .choice-sub {
  animation: choiceCopyIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .choice.in-view .choice-kicker,
  html:not(.depressionmax-full-motion) .choice.in-view .choice-heading,
  html:not(.depressionmax-full-motion) .choice.in-view .choice-sub {
    animation: none;
  }

  html:not(.depressionmax-full-motion) .choice.in-view .choice-heading {
    color: var(--color-text-muted);
    background: none;
    -webkit-text-fill-color: unset;
  }

  html:not(.depressionmax-full-motion) .skip-link {
    transition: none;
  }
}

.choice.in-view .btn-magnetic-wrap:nth-child(1) {
  animation: choiceStaggerIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.choice.in-view .btn-magnetic-wrap:nth-child(2) {
  animation: choiceStaggerIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

@keyframes choiceStaggerIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .choice.in-view .btn-magnetic-wrap:nth-child(1),
  html:not(.depressionmax-full-motion) .choice.in-view .btn-magnetic-wrap:nth-child(2) {
    animation: none;
  }
}

.btn-magnetic-wrap {
  display: inline-block;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  min-height: var(--touch-target);
  padding: 0.85rem 1.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .btn:active {
    transform: none;
  }
}

.btn::after {
  content: "";
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
}

.btn.is-rippling::after {
  animation: btnRipple 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes btnRipple {
  0% {
    opacity: 0.55;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(22);
  }
}

html.no-motion .btn::after,
html.no-motion .btn.is-rippling::after {
  display: none;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid rgba(200, 200, 210, 0.85);
  outline-offset: 4px;
  animation: focusPulse 2s ease-in-out infinite;
}

@keyframes focusPulse {
  0%,
  100% {
    outline-color: rgba(200, 200, 210, 0.85);
  }
  50% {
    outline-color: rgba(255, 250, 240, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .btn:focus-visible {
    animation: none;
  }
}

.btn-stay:hover,
.btn-stay:focus-visible {
  transform: scale(1.03);
  border-color: var(--color-text-muted);
  color: var(--color-text);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.btn-stay {
  border-color: var(--color-stay);
  color: var(--color-text-muted);
}

.btn-up:hover,
.btn-up:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 0 40px var(--color-up-glow), 0 12px 40px rgba(0, 0, 0, 0.25);
  border-color: var(--color-accent-light);
}

.btn-up {
  border-color: var(--color-accent-light);
  color: var(--color-text);
  box-shadow: 0 0 28px var(--color-up-glow);
}

.btn-up-later {
  border-color: var(--color-stay);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.btn-up-later:hover,
.btn-up-later:focus-visible {
  transform: scale(1.02);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Outcomes
   ------------------------------------------------------------------------- */
.outcome {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.outcome[hidden] {
  display: none !important;
}

.outcome-stay {
  background: linear-gradient(
    128deg,
    #07080b 0%,
    #0e1118 22%,
    #0a0c12 48%,
    #121520 72%,
    #08090d 100%
  );
  background-size: 420% 420%;
  animation: stayBgDrift 38s ease-in-out infinite;
}

@keyframes stayBgDrift {
  0%,
  100% {
    background-position: 8% 35%;
  }
  50% {
    background-position: 92% 65%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay {
    animation: none;
    background-size: 100% 100%;
  }
}

.outcome-stay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
}

html.no-motion .outcome-stay-canvas {
  display: none;
}

.outcome-stay-parallax {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.outcome-stay-parallax-back {
  z-index: 2;
  transform: translate3d(
    calc(var(--stay-ptr-x, 0) * 18px),
    calc(var(--stay-scroll) * -55px + var(--stay-ptr-y, 0) * 12px),
    0
  );
  transition: transform 0.55s ease-out;
}

.outcome-stay-parallax-back .outcome-stay-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(30, 32, 40, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(38, 40, 52, 0.2) 0%, transparent 45%);
  animation: stayMeshDrift 22s ease-in-out infinite;
}

@keyframes stayMeshDrift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-9%, 5%) scale(1.1);
    opacity: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-parallax-back .outcome-stay-mesh {
    animation: none;
  }

  html:not(.depressionmax-full-motion) .outcome-stay-parallax-back {
    transform: none;
  }
}

.outcome-stay-drift {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: radial-gradient(1px 1px at 15% 25%, rgba(255, 255, 255, 0.07) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 45%, rgba(255, 255, 255, 0.05) 50%, transparent 50%),
    radial-gradient(1px 1px at 50% 70%, rgba(200, 205, 220, 0.06) 50%, transparent 50%);
  background-size: 120% 120%;
  animation: stayDriftLayer 95s linear infinite;
  opacity: 0.65;
}

@keyframes stayDriftLayer {
  0% {
    transform: translate(0, -4%) translate3d(0, calc(var(--stay-scroll) * -25px), 0);
  }
  100% {
    transform: translate(2%, 4%) translate3d(0, calc(var(--stay-scroll) * -25px), 0);
  }
}

@keyframes stayDriftLayerPit {
  0% {
    transform: translate(0, -4%)
      translate3d(
        calc(var(--stay-ptr-x, 0) * 14px),
        calc(var(--stay-scroll) * -25px + var(--stay-ptr-y, 0) * 10px),
        0
      );
  }
  100% {
    transform: translate(2%, 4%)
      translate3d(
        calc(var(--stay-ptr-x, 0) * 14px),
        calc(var(--stay-scroll) * -25px + var(--stay-ptr-y, 0) * 10px),
        0
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-drift {
    animation: none;
  }

  html:not(.depressionmax-full-motion) .outcome-stay.stay-pit .outcome-stay-drift--pit {
    animation: none;
  }
}

.outcome-stay-fog-2 {
  position: absolute;
  inset: -15%;
  z-index: 4;
  background: radial-gradient(circle at 20% 30%, rgba(55, 60, 75, 0.2) 0%, transparent 45%);
  filter: blur(50px);
  animation: stayFog2 52s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes stayFog2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(12%, -8%) scale(1.12);
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-fog-2 {
    animation: none;
  }
}

/* Stay — living void: depth field + grain (pointer-linked) */
.stay-pit-atmosphere {
  position: absolute;
  inset: -38%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(
      ellipse 92% 58% at calc(40% + var(--stay-ptr-x, 0) * 22%) calc(64% + var(--stay-ptr-y, 0) * 14%),
      rgba(36, 40, 54, 0.5) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 72% 48% at calc(76% + var(--stay-ptr-x, 0) * -14%) calc(26% + var(--stay-ptr-y, 0) * 10%),
      rgba(20, 18, 28, 0.62) 0%,
      transparent 54%
    ),
    radial-gradient(
      ellipse 48% 38% at calc(18% + var(--stay-ptr-x, 0) * 8%) calc(16% + var(--stay-ptr-y, 0) * -6%),
      rgba(48, 44, 58, 0.28) 0%,
      transparent 50%
    );
  filter: blur(68px);
  transform: translate3d(calc(var(--stay-ptr-x, 0) * 42px), calc(var(--stay-ptr-y, 0) * 32px), 0);
  animation: stayAtmosphereBreathe 36s ease-in-out infinite;
  transition: transform 0.42s ease-out;
}

@keyframes stayAtmosphereBreathe {
  0%,
  100% {
    opacity: 0.58;
    filter: blur(68px) saturate(0.9);
  }
  50% {
    opacity: 0.78;
    filter: blur(78px) saturate(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-pit-atmosphere {
    animation: none;
    transform: none;
    transition: none;
    opacity: 0.65;
  }
}

.stay-pit-noise {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: stayNoiseDrift 26s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes stayNoiseDrift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-7%, 5%) rotate(0.8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-pit-noise {
    animation: none;
    opacity: 0.035;
  }
}

.outcome-stay-fog-2--pit {
  inset: -28%;
  opacity: 0.88;
  filter: blur(78px);
  animation-duration: 58s;
}

.outcome-stay-scan--pit {
  opacity: 0.32;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 4px,
    rgba(195, 200, 215, 0.028) 4px,
    rgba(195, 200, 215, 0.028) 5px
  );
  animation-duration: 40s;
  mix-blend-mode: soft-light;
}

html.no-motion .stay-pit-atmosphere,
html.no-motion .stay-pit-noise,
html.no-motion .outcome-stay-scan--pit {
  display: none;
}

.outcome-stay-vignette-live {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: radial-gradient(ellipse 70% 55% at 50% 48%, transparent 20%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  animation: stayVignettePulse 28s ease-in-out infinite;
}

@keyframes stayVignettePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.96;
    transform: scale(1.008);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-vignette-live {
    animation: none;
  }
}

.outcome-stay-scan {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  opacity: 0.5;
  animation: stayScanDrift 18s linear infinite;
}

@keyframes stayScanDrift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-scan {
    animation: none;
    opacity: 0.35;
  }
}

.outcome-stay-vignette {
  display: none;
}

.outcome-stay > .outcome-stay-fog:not(.outcome-stay-fog-2) {
  position: absolute;
  inset: -10%;
  z-index: 2;
  background: radial-gradient(circle at 50% 60%, rgba(45, 48, 58, 0.28) 0%, transparent 50%);
  filter: blur(40px);
  animation: stayFog 40s ease-in-out infinite;
  pointer-events: none;
}

@keyframes stayFog {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-fog {
    animation: none;
  }
}

.outcome-stay-inner,
.stay-story {
  text-align: center;
  max-width: 30rem;
  position: relative;
  z-index: 30;
  margin: 0 auto;
  padding-inline: var(--space-page);
  box-sizing: content-box;
  pointer-events: auto;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--stay-ptr-x, 0) * 20px), calc(var(--stay-ptr-y, 0) * 14px), 0)
    rotateX(calc(var(--tilt-x-deg, 0deg) * 0.38))
    rotateY(calc(var(--tilt-y-deg, 0deg) * 0.38));
  transition: transform 0.18s ease-out;
}

.outcome-stay.stay-scrolls {
  display: block;
  padding: 0;
  min-height: 100vh;
}

.stay-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

@keyframes outcomeAmbientIn {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}

#outcome-stay.in-view .stay-ambient {
  animation: outcomeAmbientIn 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#outcome-up.in-view .up-ambient {
  animation: outcomeAmbientIn 1.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) #outcome-stay.in-view .stay-ambient,
  html:not(.depressionmax-full-motion) #outcome-up.in-view .up-ambient {
    animation: none;
    opacity: 1;
  }
}

.stay-ambient .outcome-stay-canvas {
  z-index: 1;
}

.stay-chapter--open {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0 4rem;
  box-sizing: border-box;
}

.stay-verse,
.up-verse {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.22rem, 3.9vw, 1.68rem);
  line-height: 1.68;
  color: var(--color-text);
  margin: 0;
  padding: clamp(4rem, 12vh, 7rem) 0;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
}

.stay-seal,
.up-seal {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  padding: clamp(3rem, 10vh, 5rem) 0 5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
}

.stay-seal-mark {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(140, 150, 170, 0.45);
  border-radius: 50%;
  animation: sealRing 16s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(120, 135, 160, 0.15);
}

@keyframes sealRing {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.78;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.92;
  }
}

.up-seal-glow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 220, 0.35) 0%, transparent 70%);
  animation: sealGlow 14s ease-in-out infinite;
}

@keyframes sealGlow {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-seal-mark,
  html:not(.depressionmax-full-motion) .up-seal-glow {
    animation: none;
  }
}

.stay-breathe-wrap {
  margin: 2.5rem 0 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  gap: 0.5rem;
}

.stay-breathe-rings {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stay-breathe-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(120, 118, 115, 0.22);
  transform: translate(
      calc(var(--stay-ptr-x, 0) * 10px),
      calc(var(--stay-ptr-y, 0) * 8px)
    )
    scale(1);
  transition: transform 0.35s ease-out, border-color 0.35s ease;
  animation: stayBreathePulse 8s ease-in-out infinite;
  pointer-events: none;
}

.stay-breathe-ring--outer {
  width: 72px;
  height: 72px;
  animation-delay: 0s;
}

.stay-breathe-ring--mid {
  width: 48px;
  height: 48px;
  animation-delay: -0.4s;
  border-color: rgba(100, 98, 95, 0.28);
}

.stay-breathe-ring--inner {
  width: 24px;
  height: 24px;
  animation-delay: -0.8s;
  border-color: rgba(80, 78, 75, 0.35);
}

.stay-breathe-wrap:hover .stay-breathe-ring {
  border-color: rgba(140, 138, 132, 0.45);
  animation-duration: 5s;
}

.stay-breathe-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(100, 98, 95, 0.5);
}

@keyframes stayBreathePulse {
  0%,
  100% {
    transform: translate(
        calc(var(--stay-ptr-x, 0) * 10px),
        calc(var(--stay-ptr-y, 0) * 8px)
      )
      scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: translate(
        calc(var(--stay-ptr-x, 0) * 10px),
        calc(var(--stay-ptr-y, 0) * 8px)
      )
      scale(1.08);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-breathe-ring {
    animation: none;
    transform: translate(0, 0) scale(0.88);
    opacity: 0.65;
  }

  html:not(.depressionmax-full-motion) .stay-breathe-wrap:hover .stay-breathe-ring {
    animation: none;
  }
}

.stay-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(130, 128, 125, 0.5);
  text-decoration: none;
  margin: 0 0 4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(100, 98, 95, 0.25);
  border-radius: 1px;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.stay-back-link:hover,
.stay-back-link:focus-visible {
  color: rgba(160, 158, 155, 0.8);
  border-color: rgba(130, 128, 125, 0.45);
  box-shadow: 0 0 12px rgba(80, 78, 75, 0.15);
}

.up-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(180, 175, 168, 0.55);
  text-decoration: none;
  margin: 2rem 0 4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(150, 145, 138, 0.25);
  border-radius: 1px;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.up-back-link:hover,
.up-back-link:focus-visible {
  color: rgba(210, 205, 198, 0.85);
  border-color: rgba(170, 165, 158, 0.45);
  box-shadow: 0 0 14px rgba(180, 170, 160, 0.12);
}

.up-buy-pill {
  margin: 0;
  padding: 0.56rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(70, 175, 255, 0.35);
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.72), rgba(10, 10, 11, 0.46));
  color: rgba(120, 200, 255, 0.98);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 2px rgba(70, 175, 255, 0.08),
    0 0 22px rgba(70, 175, 255, 0.18),
    0 16px 50px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.up-bottom-dock {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  width: min(95vw, 1100px);
}

.up-bottom-dock > * {
  pointer-events: auto;
}

[class~="up-desc-blue"],
.up-desc-blue {
  color: rgba(120, 200, 255, 1) !important;
  font-weight: 900;
  text-shadow:
    0 0 18px rgba(80, 175, 255, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.75);
}

[data-reveal].up-buy-pill {
  transform: translateY(24px) scale(0.97);
  filter: blur(10px);
}

[data-reveal].up-buy-pill.is-revealed {
  transform: translateY(0) scale(1);
  filter: blur(0);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  filter: blur(8px);
  transition: opacity 1.65s cubic-bezier(0.22, 1, 0.36, 1), transform 1.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Narrative stagger: lead → body → seal */
.stay-story--pit .outcome-stay-lead[data-reveal] {
  transition-delay: 0s;
}

.stay-story--pit .stay-verse[data-reveal] {
  transition-delay: 0.12s;
}

.stay-story--pit .stay-seal[data-reveal] {
  transition-delay: 0.26s;
}

.stay-story--pit .stay-breathe-wrap[data-reveal] {
  transition-delay: 0.42s;
}

.up-story .outcome-up-lead[data-reveal] {
  transition-delay: 0s;
}

.up-story .up-verse[data-reveal] {
  transition-delay: 0.12s;
}

.up-story .up-seal[data-reveal] {
  transition-delay: 0.26s;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  html:not(.depressionmax-full-motion) .stay-story--pit .outcome-stay-lead[data-reveal],
  html:not(.depressionmax-full-motion) .stay-story--pit .stay-verse[data-reveal],
  html:not(.depressionmax-full-motion) .stay-story--pit .stay-seal[data-reveal],
  html:not(.depressionmax-full-motion) .stay-story--pit .stay-breathe-wrap[data-reveal],
  html:not(.depressionmax-full-motion) .up-story .outcome-up-lead[data-reveal],
  html:not(.depressionmax-full-motion) .up-story .up-verse[data-reveal],
  html:not(.depressionmax-full-motion) .up-story .up-seal[data-reveal] {
    transition-delay: 0s;
  }

  html:not(.depressionmax-full-motion) .hero-content::before {
    animation: none;
    opacity: 0.65;
  }
}

.outcome-stay-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 1rem;
  animation: stayTitleFloat 12s ease-in-out infinite, stayTitleBeat 22s ease-in-out infinite;
  text-shadow: 0 0 40px rgba(200, 205, 220, 0.06);
}

@keyframes stayTitleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-title {
    animation: none;
  }
}

.outcome-stay-body,
.outcome-stay-lead,
.outcome-up-lead {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin: 0 0 2rem;
  line-height: 1.65;
  animation: bodyPulse 8s ease-in-out infinite;
}

.outcome-stay-lead,
.outcome-up-lead {
  margin: 1.35rem 0 0;
}

@keyframes bodyPulse {
  0%,
  100% {
    opacity: 1;
    letter-spacing: 0;
  }
  50% {
    opacity: 0.94;
    letter-spacing: 0.006em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-body,
  html:not(.depressionmax-full-motion) .outcome-stay-lead,
  html:not(.depressionmax-full-motion) .outcome-up-lead {
    animation: none;
  }
}

.outcome-stay-breathe {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  pointer-events: none;
  top: 50%;
  left: 50%;
}

.outcome-stay-breathe-outer {
  width: 14rem;
  height: 14rem;
  opacity: 0.18;
  animation: breatheOuter 8s ease-in-out infinite;
  z-index: 6;
}

.outcome-stay-breathe-inner {
  width: 10rem;
  height: 10rem;
  opacity: 0.12;
  animation: breatheInner 11s ease-in-out infinite;
  z-index: 6;
}

.outcome-stay-breathe-tert {
  width: 22rem;
  height: 22rem;
  opacity: 0.06;
  border-width: 1px;
  animation: breatheTert 16s ease-in-out infinite;
  z-index: 6;
}

@keyframes breatheTert {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 0.05;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04) rotate(3deg);
    opacity: 0.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-breathe-tert {
    animation: none;
  }
}

@keyframes breatheOuter {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.15;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.22;
  }
}

@keyframes breatheInner {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 0.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay-breathe-outer,
  html:not(.depressionmax-full-motion) .outcome-stay-breathe-inner {
    animation: none;
  }
}

/* Outcome up */
.outcome-up {
  position: relative;
}

.outcome-up-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.82;
  mix-blend-mode: screen;
}

html.no-motion .outcome-up-canvas {
  display: none;
}

html.no-motion .outcome-up.up-sanctuary .up-visual-layer {
  animation: none !important;
  background-size: 104% 104%;
  transform: none;
  transition: opacity 0.35s ease;
}

html.no-motion .outcome-up.up-sanctuary .up-visual-tech-overlay {
  transform: none;
  transition: none;
}

.outcome-up-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    125deg,
    var(--color-bg-light) 0%,
    #252018 25%,
    var(--color-bg-light-top) 50%,
    #221e1a 75%,
    var(--color-bg-light) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 24s ease-in-out infinite;
}

.up-visual-feed {
  position: absolute;
  inset: -6%;
  z-index: 1;
  pointer-events: none;
  background-color: #0c0a09;
}

.up-visual-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.up-visual-layer {
  position: absolute;
  inset: 0;
  background-color: #161210;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center 44%;
  transition: opacity 0.65s ease;
  pointer-events: none;
  will-change: opacity, transform;
}

.up-visual-stack .up-visual-layer:nth-child(1) {
  opacity: var(--up-fade-0, 1);
  z-index: 1;
}

.up-visual-stack .up-visual-layer:nth-child(2) {
  opacity: var(--up-fade-1, 0);
  z-index: 2;
}

.up-visual-stack .up-visual-layer:nth-child(3) {
  opacity: var(--up-fade-2, 0);
  z-index: 3;
}

.up-visual-stack .up-visual-layer:nth-child(4) {
  opacity: var(--up-fade-3, 0);
  z-index: 4;
}

.up-visual-layer--summit {
  background-image: url("New_Project_35.png");
  background-position: center 42%;
}

.up-visual-layer--load {
  background-image: url("New_Project_33ddd.png");
  background-position: center 48%;
}

.up-visual-layer--leap {
  background-image: url("ddawdasd.png");
  background-position: center 44%;
}

.up-visual-layer--twin {
  background-image: url("New_Project_35ddd.png");
  background-position: center 38%;
}

.up-visual-tech-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform: translateY(calc(var(--up-scroll, 0) * -8px));
  transition: transform 0.45s ease-out;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.045) 2px,
      rgba(0, 0, 0, 0.045) 3px
    ),
    linear-gradient(
      168deg,
      rgba(18, 15, 12, 0.38) 0%,
      rgba(14, 12, 10, 0.1) 34%,
      rgba(24, 20, 16, 0.16) 55%,
      rgba(8, 6, 5, 0.62) 100%
    ),
    radial-gradient(
      ellipse 95% 72% at 50% 36%,
      rgba(255, 245, 232, 0.05) 0%,
      transparent 55%
    ),
    radial-gradient(ellipse 88% 55% at 50% 108%, rgba(4, 3, 2, 0.78) 0%, transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 160, 0.1),
    inset 0 0 80px rgba(0, 0, 0, 0.25);
}

.up-visual-tech-overlay::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 200, 160, 0.12);
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.65;
}

.up-visual-tech-overlay::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  top: 14px;
  left: 14px;
  border-top: 2px solid rgba(255, 210, 170, 0.35);
  border-left: 2px solid rgba(255, 210, 170, 0.35);
  pointer-events: none;
  opacity: 0.5;
}

.outcome-up-aurora {
  position: absolute;
  inset: -30%;
  z-index: 3;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.35;
  border-radius: 50%;
}

.outcome-up-aurora-a {
  background: radial-gradient(
    circle at 30% 40%,
    rgba(255, 220, 180, 0.25) 0%,
    rgba(180, 140, 100, 0.08) 40%,
    transparent 70%
  );
  animation: auroraA 42s ease-in-out infinite;
}

.outcome-up-aurora-b {
  background: radial-gradient(
    circle at 70% 55%,
    rgba(240, 210, 170, 0.2) 0%,
    rgba(100, 85, 70, 0.1) 45%,
    transparent 65%
  );
  animation: auroraB 50s ease-in-out infinite;
}

@keyframes auroraA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(8%, -6%) scale(1.08);
  }
  66% {
    transform: translate(-5%, 4%) scale(0.95);
  }
}

@keyframes auroraB {
  0%,
  100% {
    transform: translate(0, 0) scale(1.05);
  }
  50% {
    transform: translate(-10%, 8%) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-aurora-a,
  html:not(.depressionmax-full-motion) .outcome-up-aurora-b {
    animation: none;
  }
}

.outcome-up-parallax {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
}

.outcome-up-parallax-mid {
  transform: translate3d(
    calc((var(--up-mouse-x, 0.5) - 0.5) * 24px + var(--up-scroll) * -30px),
    calc((var(--up-mouse-y, 0.5) - 0.5) * 20px + var(--up-scroll) * -18px),
    0
  );
  transition: transform 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-parallax-mid {
    transform: translate3d(0, calc(var(--up-scroll) * -20px), 0);
  }
}

.outcome-up-glow-orb {
  position: absolute;
  width: min(90vw, 480px);
  height: min(90vw, 480px);
  left: calc(50% + (var(--up-mouse-x, 0.5) - 0.5) * 80px);
  top: calc(42% + (var(--up-mouse-y, 0.5) - 0.5) * 60px);
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 245, 230, 0.12) 0%,
    rgba(255, 230, 200, 0.04) 35%,
    transparent 60%
  );
  filter: blur(40px);
  animation: orbPulse 18s ease-in-out infinite;
  transition: left 0.35s ease-out, top 0.35s ease-out;
}

@keyframes orbPulse {
  0%,
  100% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-glow-orb {
    left: 50%;
    top: 42%;
    animation: none;
    transition: none;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-bg {
    animation: none;
    background-size: 100% 100%;
  }
}

.outcome-up-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.outcome-up-stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 18%, var(--color-dot) 1.5px, transparent 1.5px),
    radial-gradient(circle at 88% 22%, var(--color-dot) 1px, transparent 1px),
    radial-gradient(circle at 45% 8%, var(--color-dot) 1px, transparent 1px),
    radial-gradient(circle at 72% 65%, var(--color-dot) 1.5px, transparent 1.5px),
    radial-gradient(circle at 28% 78%, var(--color-dot) 1px, transparent 1px),
    radial-gradient(circle at 55% 45%, var(--color-dot) 1px, transparent 1px),
    radial-gradient(circle at 92% 88%, var(--color-dot) 1px, transparent 1px),
    radial-gradient(circle at 8% 55%, var(--color-dot) 1.5px, transparent 1.5px);
  background-size: 100% 100%;
  animation: twinkle 20s ease-in-out infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.52;
  }
  33% {
    opacity: 0.6;
  }
  66% {
    opacity: 0.56;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-stars {
    animation: none;
    opacity: 0.55;
  }
}

/* Fine dust — extra parallax vs main star field */
.outcome-up-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle at 8% 12%, rgba(255, 252, 245, 0.22) 1px, transparent 1px),
    radial-gradient(circle at 92% 8%, rgba(255, 250, 240, 0.16) 1px, transparent 1px),
    radial-gradient(circle at 33% 44%, rgba(255, 248, 238, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 71% 38%, rgba(250, 245, 230, 0.14) 1px, transparent 1px),
    radial-gradient(circle at 18% 72%, rgba(255, 252, 248, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 86% 68%, rgba(248, 240, 228, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 52% 22%, rgba(255, 250, 242, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 44% 88%, rgba(255, 248, 235, 0.11) 1px, transparent 1px);
  background-size: 100% 100%;
  opacity: 0.42;
  transform: translate3d(
    calc((var(--up-mouse-x, 0.5) - 0.5) * 42px + var(--up-scroll) * -8px),
    calc((var(--up-mouse-y, 0.5) - 0.5) * 34px + var(--up-scroll) * -6px),
    0
  );
  transition: transform 0.3s ease-out;
  animation: upDustTwinkle 14s ease-in-out infinite;
}

@keyframes upDustTwinkle {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.52;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-dust {
    animation: none;
    transform: translate3d(0, calc(var(--up-scroll) * -6px), 0);
    transition: none;
    opacity: 0.4;
  }
}

.up-warm-shimmer {
  position: absolute;
  inset: -12%;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(
    ellipse 75% 58% at calc(46% + (var(--up-mouse-x, 0.5) - 0.5) * 26%) calc(38% + (var(--up-mouse-y, 0.5) - 0.5) * 22%),
    rgba(255, 248, 238, 0.2) 0%,
    rgba(255, 235, 210, 0.06) 42%,
    transparent 62%
  );
  filter: blur(48px);
  animation: warmShimmerBreath 22s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.62;
}

@keyframes warmShimmerBreath {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .up-warm-shimmer {
    animation: none;
    opacity: 0.55;
    transform: none;
  }
}

html.no-motion .outcome-up-dust,
html.no-motion .up-warm-shimmer {
  display: none;
}

.outcome-up-rise {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background-image: radial-gradient(ellipse 2px 6px at 15% 90%, rgba(255, 250, 240, 0.15) 50%, transparent 50%),
    radial-gradient(ellipse 2px 5px at 35% 95%, rgba(255, 248, 235, 0.1) 50%, transparent 50%),
    radial-gradient(ellipse 2px 7px at 55% 88%, rgba(255, 252, 245, 0.12) 50%, transparent 50%),
    radial-gradient(ellipse 2px 5px at 75% 92%, rgba(240, 235, 225, 0.1) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 90% 85%, rgba(255, 250, 240, 0.08) 50%, transparent 50%),
    radial-gradient(ellipse 2px 5px at 22% 82%, rgba(255, 248, 240, 0.09) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 68% 94%, rgba(255, 252, 235, 0.1) 50%, transparent 50%);
  background-size: 100% 100%;
  opacity: 0.85;
}

.outcome-up-rise-1 {
  animation: riseParticles1 11s linear infinite;
}

.outcome-up-rise-2 {
  z-index: 6;
  opacity: 0.55;
  animation: riseParticles2 17s linear infinite reverse;
  background-image: radial-gradient(ellipse 2px 8px at 40% 92%, rgba(255, 240, 220, 0.12) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 60% 88%, rgba(255, 235, 210, 0.08) 50%, transparent 50%),
    radial-gradient(ellipse 2px 7px at 80% 95%, rgba(250, 245, 230, 0.1) 50%, transparent 50%);
}

@keyframes riseParticles1 {
  0% {
    transform: translateY(10%) translate3d(0, calc(var(--up-scroll) * -15px), 0);
    opacity: 0.45;
  }
  50% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(-18%) translate3d(0, calc(var(--up-scroll) * -15px), 0);
    opacity: 0.35;
  }
}

@keyframes riseParticles2 {
  0% {
    transform: translateY(15%) scale(1.05);
    opacity: 0.35;
  }
  100% {
    transform: translateY(-22%) scale(1);
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-rise-1,
  html:not(.depressionmax-full-motion) .outcome-up-rise-2 {
    animation: none;
    transform: none;
  }
}

.outcome-up-inner,
.up-story {
  text-align: center;
  max-width: 34rem;
  position: relative;
  z-index: 30;
  margin: 0 auto;
  padding-inline: var(--space-page);
  box-sizing: content-box;
  pointer-events: auto;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--up-ptr-x, 0) * 22px), calc(var(--up-ptr-y, 0) * 16px), 0)
    rotateX(calc(var(--tilt-x-deg, 0deg) * 0.38))
    rotateY(calc(var(--tilt-y-deg, 0deg) * 0.38));
  transition: transform 0.18s ease-out;
}

.outcome-up.up-scrolls {
  display: block;
  padding: 0;
  min-height: 200vh;
  min-height: 200dvh;
}

.up-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.up-chapter--open {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0 4rem;
  box-sizing: border-box;
}

.outcome-up-line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.85rem, 5.5vw, 3rem);
  font-weight: 400;
  margin: 0 0 1.5rem;
  line-height: 1.28;
  /* Solid text — do not use background-clip:text with .up-line-chunk inline-blocks (Chromium box bug). */
  color: #f2e8dc;
  -webkit-text-fill-color: #f2e8dc;
  text-shadow:
    0 0 48px rgba(255, 248, 238, 0.14),
    0 1px 0 rgba(12, 10, 8, 0.4);
  animation: upLineFloat 16s ease-in-out infinite;
  filter: none;
}

@keyframes upLineGlow {
  0%,
  100% {
    text-shadow: 0 0 50px rgba(255, 248, 240, 0.1), 0 0 90px rgba(255, 220, 180, 0.04);
  }
  50% {
    text-shadow: 0 0 70px rgba(255, 248, 240, 0.18), 0 0 120px rgba(255, 220, 180, 0.08);
  }
}

@keyframes upLineFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-line {
    color: var(--color-text-light);
    -webkit-text-fill-color: unset;
    animation: none;
    filter: none;
    text-shadow: 0 0 60px rgba(255, 248, 240, 0.08);
  }
}

.outcome-up-cta {
  font-size: 0.95rem;
  color: var(--color-accent-light);
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: ctaShimmer 16s ease-in-out infinite;
}

@keyframes ctaShimmer {
  0%,
  100% {
    opacity: 0.88;
    letter-spacing: 0.14em;
  }
  50% {
    opacity: 0.96;
    letter-spacing: 0.14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up-cta {
    animation: none;
  }
}

.outcome.reveal .outcome-stay-inner,
.outcome.reveal .outcome-up-inner {
  animation: outcomeReveal var(--transition-slow) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes outcomeReveal {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome.reveal .outcome-stay-inner,
  html:not(.depressionmax-full-motion) .outcome.reveal .outcome-up-inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.body-transition-up {
  transition: background-color var(--transition-slow);
}

/* -------------------------------------------------------------------------
   Multi-page layout: hero CTA, choice back, full-bleed sections
   ------------------------------------------------------------------------- */
.main-home,
.main-choice,
.main-stay,
.main-up {
  min-height: 100vh;
  min-height: 100dvh;
}

.hero-fullpage,
.choice-fullpage,
.stay-fullpage,
.up-fullpage {
  min-height: 100vh;
  min-height: 100dvh;
}

.hero-cta-wrap {
  margin: 2.35rem 0 0;
  animation: heroCtaIn 1.25s cubic-bezier(0.22, 1, 0.36, 1) 3.1s both;
}

@keyframes heroCtaIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-cta-wrap {
    animation: none;
  }
}

a.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-color: rgba(190, 186, 200, 0.42);
  background: rgba(18, 20, 26, 0.5);
  box-shadow: 0 0 28px rgba(120, 125, 145, 0.1);
  animation: heroCtaGlow 14s ease-in-out infinite;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

a.btn-hero-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(210, 206, 220, 0.55);
  box-shadow: 0 0 36px rgba(130, 140, 170, 0.18), 0 12px 40px rgba(0, 0, 0, 0.35);
}

a.btn-hero-cta:active {
  transform: translateY(-1px) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) a.btn-hero-cta:hover,
  html:not(.depressionmax-full-motion) a.btn-hero-cta:active {
    transform: none;
  }
}

@keyframes heroCtaGlow {
  0%,
  100% {
    box-shadow: 0 0 24px rgba(120, 125, 145, 0.09);
  }
  50% {
    box-shadow: 0 0 36px rgba(145, 150, 175, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) a.btn-hero-cta {
    animation: none;
  }
}

.choice-back {
  margin: 2.5rem 0 0;
  font-size: 0.875rem;
}

.choice-back-link {
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.choice-back-link:hover,
.choice-back-link:focus-visible {
  color: var(--color-text);
  border-bottom-color: var(--color-text-muted);
}

.stay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

a.btn-back-choice {
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   Stay page — obvious motion (orbs, shimmer, word stagger)
   ------------------------------------------------------------------------- */
.stay-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  mix-blend-mode: screen;
  z-index: 5;
  opacity: 0.45;
}

.stay-orb-a {
  width: min(72vw, 420px);
  height: min(72vw, 420px);
  left: -12%;
  top: 18%;
  background: radial-gradient(
    circle at 35% 40%,
    rgba(200, 210, 235, 0.35) 0%,
    rgba(120, 125, 150, 0.12) 42%,
    transparent 68%
  );
  animation: stayOrbDriftA 18s ease-in-out infinite, stayOrbBreathe 5s ease-in-out infinite;
}

.stay-orb-b {
  width: min(58vw, 340px);
  height: min(58vw, 340px);
  right: -8%;
  bottom: 12%;
  background: radial-gradient(
    circle at 55% 55%,
    rgba(170, 185, 210, 0.28) 0%,
    rgba(90, 95, 115, 0.1) 45%,
    transparent 70%
  );
  animation: stayOrbDriftB 22s ease-in-out infinite reverse, stayOrbBreathe 6.5s ease-in-out infinite 0.8s;
}

@keyframes stayOrbDriftA {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(8%, -6%) scale(1.08) rotate(6deg);
  }
  66% {
    transform: translate(-6%, 10%) scale(0.95) rotate(-4deg);
  }
}

@keyframes stayOrbDriftB {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(-10%, -12%) scale(1.12) rotate(-8deg);
  }
}

@keyframes stayOrbBreathe {
  0%,
  100% {
    opacity: 0.35;
    filter: blur(2px);
  }
  50% {
    opacity: 0.65;
    filter: blur(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-orb-a,
  html:not(.depressionmax-full-motion) .stay-orb-b {
    animation: none;
    opacity: 0.35;
  }
}

.stay-shimmer {
  position: absolute;
  inset: -20% -30%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.07) 48%,
    rgba(210, 220, 240, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 52%,
    transparent 65%
  );
  background-size: 200% 100%;
  opacity: 0.85;
  animation: stayShimmerSweep 16s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

@keyframes stayShimmerSweep {
  0% {
    background-position: 130% 50%;
    transform: translateX(-4%) rotate(-2deg);
  }
  50% {
    background-position: -30% 50%;
    transform: translateX(4%) rotate(1deg);
  }
  100% {
    background-position: 130% 50%;
    transform: translateX(-4%) rotate(-2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-shimmer {
    animation: none;
    opacity: 0.25;
  }
}

@keyframes stayTitleBeat {
  0%,
  100% {
    letter-spacing: 0;
  }
  50% {
    letter-spacing: 0.012em;
  }
}

.stay-title-word {
  display: inline-block;
  animation: stayWordBob 9s ease-in-out infinite;
  text-shadow: 0 0 24px rgba(200, 210, 230, 0.15);
}

.stay-title-word:nth-child(1) {
  animation-delay: 0s;
}
.stay-title-word:nth-child(2) {
  animation-delay: 0.15s;
}
.stay-title-word:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes stayWordBob {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.92;
  }
  45% {
    transform: translateY(-5px) scale(1.02);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-title-word {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Up page — light rays, sweep, chunky headline motion
   ------------------------------------------------------------------------- */
.up-light-ray {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  width: 2px;
  height: 140%;
  top: -20%;
  left: 50%;
  transform-origin: 50% 0%;
  background: linear-gradient(
    180deg,
    rgba(255, 252, 245, 0) 0%,
    rgba(255, 248, 235, 0.35) 45%,
    rgba(255, 250, 240, 0) 100%
  );
  filter: blur(1px);
  opacity: 0.55;
}

.up-light-ray-1 {
  animation: upRaySwing 44s ease-in-out infinite;
  opacity: 0.42;
}

.up-light-ray-2 {
  left: 42%;
  opacity: 0.28;
  animation: upRaySwing 52s ease-in-out infinite reverse;
}

@keyframes upRaySwing {
  0%,
  100% {
    transform: translateX(-50%) rotate(-18deg) scaleY(1);
  }
  50% {
    transform: translateX(-50%) rotate(14deg) scaleY(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .up-light-ray-1,
  html:not(.depressionmax-full-motion) .up-light-ray-2 {
    animation: none;
    opacity: 0.28;
  }
}

.up-sweep {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    95deg,
    transparent 42%,
    rgba(255, 245, 230, 0.12) 49.5%,
    rgba(255, 250, 240, 0.18) 50%,
    rgba(255, 245, 230, 0.1) 50.5%,
    transparent 58%
  );
  background-size: 220% 100%;
  opacity: 0.75;
  mix-blend-mode: soft-light;
  animation: upSweepMove 26s ease-in-out infinite;
}

@keyframes upSweepMove {
  0% {
    background-position: 180% 40%;
  }
  50% {
    background-position: -40% 60%;
  }
  100% {
    background-position: 180% 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .up-sweep {
    animation: none;
    opacity: 0.2;
  }
}

.up-line-chunk {
  display: inline-block;
  animation: upChunkDrift 14s ease-in-out infinite;
  will-change: transform;
}

.up-line-chunk:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 5.6s;
}

.up-line-chunk:nth-child(2) {
  animation-delay: 0.25s;
  animation-duration: 6.4s;
}

.up-line-chunk:nth-child(3) {
  animation-delay: 0.5s;
  animation-duration: 5.8s;
}

.up-line-italic {
  font-style: italic;
  animation: upChunkDriftItalic 15s ease-in-out infinite 0.25s;
}

@keyframes upChunkDrift {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-6px) scale(1.015);
  }
  55% {
    transform: translateY(-3px) scale(1.008);
  }
}

@keyframes upChunkDriftItalic {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 14px rgba(255, 240, 220, 0.18));
  }
  40% {
    transform: translateY(-6px) scale(1.02);
    filter: brightness(1.05) drop-shadow(0 0 22px rgba(255, 220, 180, 0.28));
  }
  55% {
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.02) drop-shadow(0 0 18px rgba(255, 230, 200, 0.22));
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .up-line-chunk,
  html:not(.depressionmax-full-motion) .up-line-italic {
    animation: none;
  }
}

.up-footer-link {
  margin: 2.25rem 0 0;
  font-size: 0.875rem;
}

.up-back-link {
  color: var(--color-accent-light);
  text-decoration: none;
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.up-back-link:hover,
.up-back-link:focus-visible {
  color: var(--color-text-light);
  border-bottom-color: rgba(255, 248, 240, 0.35);
}

/* Extra scroll depth so “go up” background can crossfade through all images */
.up-scroll-cycle-pad {
  height: clamp(140vh, 220vh, 3200px);
  width: 100%;
  pointer-events: none;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Custom cursor + click pulse (pointer devices)
   ------------------------------------------------------------------------- */
.cursor-follow-dot,
.cursor-follow-ring {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}

.cursor-follow-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: rgba(245, 245, 248, 0.9);
  box-shadow: 0 0 18px rgba(200, 210, 240, 0.35);
}

.cursor-follow-ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(200, 205, 220, 0.35);
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease, border-color 0.2s ease;
}

body.is-cursor-down .cursor-follow-ring {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-color: rgba(255, 248, 240, 0.55);
}

html.no-motion .cursor-follow-dot,
html.no-motion .cursor-follow-ring {
  display: none !important;
}

body.use-custom-cursor {
  cursor: none;
}

body.use-custom-cursor a,
body.use-custom-cursor button,
body.use-custom-cursor .btn {
  cursor: none;
}

.click-ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 65%);
  animation: clickRippleExpand 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes clickRippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

html.no-motion .click-ripple {
  display: none !important;
}

@media (pointer: coarse) {
  body.use-custom-cursor {
    cursor: auto;
  }
  body.use-custom-cursor a,
  body.use-custom-cursor button {
    cursor: pointer;
  }
  .cursor-follow-dot,
  .cursor-follow-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-story,
  html:not(.depressionmax-full-motion) .up-story {
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------
   Living backgrounds — obvious motion (blobs, drift, pulses)
   ------------------------------------------------------------------------- */
.hero-live-blobs,
.choice-live-blobs,
.stay-bg-blobs,
.up-bg-blobs {
  position: absolute;
  inset: -15%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero-live-blobs {
  z-index: 5;
}

.hero-blob,
.choice-blob,
.stay-bg-blob,
.up-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.hero-blob-1 {
  width: 55vw;
  height: 55vw;
  max-width: 520px;
  max-height: 520px;
  left: -8%;
  top: 15%;
  background: radial-gradient(circle, rgba(130, 145, 185, 0.45) 0%, transparent 68%);
  animation: blobWanderA 34s ease-in-out infinite;
}

.hero-blob-2 {
  width: 48vw;
  height: 48vw;
  max-width: 440px;
  right: -5%;
  bottom: 5%;
  background: radial-gradient(circle, rgba(90, 100, 140, 0.4) 0%, transparent 65%);
  animation: blobWanderB 40s ease-in-out infinite;
}

.hero-blob-3 {
  width: 38vw;
  height: 38vw;
  left: 30%;
  top: 40%;
  background: radial-gradient(circle, rgba(180, 190, 220, 0.22) 0%, transparent 58%);
  animation: blobWanderC 46s ease-in-out infinite;
}

@keyframes blobWanderA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.52;
  }
  33% {
    transform: translate(6%, -5%) scale(1.06);
    opacity: 0.6;
  }
  66% {
    transform: translate(-5%, 6%) scale(0.98);
    opacity: 0.5;
  }
}

@keyframes blobWanderB {
  0%,
  100% {
    transform: translate(0, 0) scale(1.02);
    opacity: 0.48;
  }
  50% {
    transform: translate(-8%, -6%) scale(1.08);
    opacity: 0.58;
  }
}

@keyframes blobWanderC {
  0%,
  100% {
    transform: translate(-3%, 3%) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: translate(5%, -4%) scale(1.06);
    opacity: 0.55;
  }
}

.hero-slow-drift {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 48%,
    rgba(200, 210, 235, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 52%,
    transparent 60%
  );
  background-size: 280% 100%;
  mix-blend-mode: soft-light;
  animation: heroSheenSweep 32s ease-in-out infinite;
  opacity: 0.42;
}

@keyframes heroSheenSweep {
  0% {
    background-position: 120% 50%;
  }
  50% {
    background-position: -15% 50%;
  }
  100% {
    background-position: 120% 50%;
  }
}

.choice-live-blobs {
  z-index: 0;
}

.choice-blob {
  filter: blur(52px);
  opacity: 0.5;
}

.choice-blob-1 {
  width: min(90vw, 640px);
  height: min(90vw, 640px);
  left: -20%;
  top: 10%;
  background: radial-gradient(circle, rgba(95, 110, 160, 0.5) 0%, transparent 65%);
  animation: blobWanderA 21s ease-in-out infinite;
}

.choice-blob-2 {
  width: min(70vw, 500px);
  height: min(70vw, 500px);
  right: -15%;
  bottom: 0;
  background: radial-gradient(circle, rgba(60, 70, 110, 0.45) 0%, transparent 62%);
  animation: blobWanderB 25s ease-in-out infinite;
}

.choice-blob-3 {
  width: min(50vw, 380px);
  height: min(50vw, 380px);
  left: 35%;
  top: 45%;
  background: radial-gradient(circle, rgba(120, 135, 180, 0.28) 0%, transparent 58%);
  animation: blobWanderC 18s ease-in-out infinite;
}

.choice-float-drift {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.14) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 40%, rgba(220, 225, 240, 0.1) 50%, transparent 50%),
    radial-gradient(1px 1px at 40% 85%, rgba(255, 255, 255, 0.12) 50%, transparent 50%);
  background-size: 100% 100%;
  animation: choiceSparkDrift 72s linear infinite;
  opacity: 0.32;
}

@keyframes choiceSparkDrift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-4%, -6%);
  }
}

.stay-bg-blobs {
  z-index: 0;
}

.stay-bg-blob {
  filter: blur(55px);
  opacity: 0.5;
}

.stay-bg-blob-1 {
  width: min(100vw, 700px);
  height: min(100vw, 700px);
  left: -25%;
  top: 0;
  background: radial-gradient(circle, rgba(110, 125, 160, 0.38) 0%, transparent 68%);
  animation: blobWanderB 30s ease-in-out infinite;
}

.stay-bg-blob-2 {
  width: min(85vw, 560px);
  height: min(85vw, 560px);
  right: -20%;
  bottom: -10%;
  background: radial-gradient(circle, rgba(70, 80, 115, 0.42) 0%, transparent 65%);
  animation: blobWanderA 24s ease-in-out infinite reverse;
}

.stay-noise-drift {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: stayNoisePan 90s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes stayNoisePan {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-3%, -4%);
  }
}

.up-bg-blobs {
  z-index: 0;
}

.up-bg-blob {
  filter: blur(48px);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.up-bg-blob-1 {
  width: min(95vw, 620px);
  height: min(95vw, 620px);
  left: -15%;
  top: -5%;
  background: radial-gradient(circle, rgba(255, 220, 180, 0.35) 0%, transparent 65%);
  animation: blobWanderA 22s ease-in-out infinite;
}

.up-bg-blob-2 {
  width: min(75vw, 480px);
  height: min(75vw, 480px);
  right: -12%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(255, 200, 150, 0.28) 0%, transparent 62%);
  animation: blobWanderC 26s ease-in-out infinite;
}

.up-bg-blob-3 {
  width: min(55vw, 400px);
  height: min(55vw, 400px);
  left: 25%;
  top: 35%;
  background: radial-gradient(circle, rgba(255, 245, 230, 0.18) 0%, transparent 55%);
  animation: blobWanderB 20s ease-in-out infinite;
}

.up-heat-shift {
  position: absolute;
  inset: -5%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 190, 140, 0.12) 0%, transparent 55%);
  animation: upHeatPulse 26s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes upHeatPulse {
  0%,
  100% {
    opacity: 0.75;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-1.5%) scale(1.02);
  }
}

html.no-motion .hero-live-blobs,
html.no-motion .hero-slow-drift,
html.no-motion .choice-live-blobs,
html.no-motion .choice-float-drift,
html.no-motion .stay-bg-blobs,
html.no-motion .stay-noise-drift,
html.no-motion .up-bg-blobs,
html.no-motion .up-heat-shift {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .hero-blob,
  html:not(.depressionmax-full-motion) .choice-blob,
  html:not(.depressionmax-full-motion) .stay-bg-blob,
  html:not(.depressionmax-full-motion) .up-bg-blob,
  html:not(.depressionmax-full-motion) .hero-slow-drift,
  html:not(.depressionmax-full-motion) .choice-float-drift,
  html:not(.depressionmax-full-motion) .stay-noise-drift,
  html:not(.depressionmax-full-motion) .up-heat-shift {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   Stay — pit (grim, no shine, near-black)
   ------------------------------------------------------------------------- */
body[data-page="stay"] {
  --cursor-spot-opacity: 0.12;
  background: #020203;
  color: #7d7a76;
}

body[data-page="stay"] .cursor-spotlight {
  background: radial-gradient(
    85vmax circle at var(--cursor-x) var(--cursor-y),
    rgba(255, 255, 255, 0.018) 0%,
    transparent 55%
  );
}

.outcome-stay.stay-pit {
  background: #020203;
  color: #7d7a76;
}

.outcome-stay.stay-pit .outcome-stay-canvas {
  opacity: 0.28;
  filter: grayscale(0.5) brightness(0.7);
  mix-blend-mode: soft-light;
}

.outcome-stay.stay-pit .outcome-stay-parallax-back .outcome-stay-mesh--pit {
  background: radial-gradient(ellipse 110% 85% at 50% 100%, rgba(4, 4, 6, 0.97) 0%, transparent 58%),
    radial-gradient(ellipse 50% 38% at 10% 6%, rgba(14, 12, 16, 0.5) 0%, transparent 52%),
    radial-gradient(ellipse 35% 30% at 92% 18%, rgba(12, 10, 14, 0.35) 0%, transparent 50%);
  animation: stayMeshDrift 42s ease-in-out infinite;
  opacity: 1;
}

.outcome-stay.stay-pit .outcome-stay-drift--pit {
  opacity: 0.28;
  background-image:
    radial-gradient(1px 1px at 14% 28%, rgba(72, 68, 64, 0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 72%, rgba(58, 56, 52, 0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 48% 52%, rgba(80, 76, 72, 0.22) 50%, transparent 50%),
    radial-gradient(1px 1px at 62% 18%, rgba(65, 62, 58, 0.28) 50%, transparent 50%);
  background-size: 115% 115%;
  animation: stayDriftLayerPit 100s linear infinite;
}

.outcome-stay.stay-pit .outcome-stay-vignette-live {
  background: radial-gradient(
    ellipse 54% 48% at calc(50% + var(--stay-ptr-x, 0) * 4%) calc(48% + var(--stay-ptr-y, 0) * 3%),
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.78) 62%,
    rgba(0, 0, 0, 0.96) 100%
  );
  animation: stayVignettePit 48s ease-in-out infinite;
  opacity: 1;
}

@keyframes stayVignettePit {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.94;
    transform: scale(1.018);
  }
}

.outcome-stay.stay-pit .stay-pit-crush {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: multiply;
}

.stay-story--pit {
  color: #76726e;
}

.stay-story--pit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 130%;
  height: 85%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 50% 45% at 50% 50%,
    rgba(45, 48, 58, 0.2) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: -1;
  animation: stayStoryField 20s ease-in-out infinite;
  opacity: 0.85;
}

@keyframes stayStoryField {
  0%,
  100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .stay-story--pit::before {
    animation: none;
    opacity: 0.7;
  }
}

.outcome-stay.stay-pit .outcome-stay-title {
  color: #4f4c48;
  text-shadow: none;
  animation: none;
}

.outcome-stay.stay-pit .stay-title-word {
  animation: none;
  text-shadow: none;
  opacity: 0.9;
}

.outcome-stay.stay-pit .outcome-stay-lead,
.outcome-stay.stay-pit .outcome-stay-body {
  color: #65615c;
  animation: none;
}

.outcome-stay.stay-pit .stay-verse {
  color: #6d6964;
}

.outcome-stay.stay-pit .stay-seal {
  color: #524f4b;
}

.outcome-stay.stay-pit .stay-breathe-ring {
  border-color: rgba(55, 54, 52, 0.35);
}

.outcome-stay.stay-pit .stay-breathe-wrap:hover .stay-breathe-ring {
  border-color: rgba(75, 73, 70, 0.5);
}

.outcome-stay.stay-pit .stay-breathe-label {
  color: rgba(55, 54, 52, 0.6);
}

.outcome-stay.stay-pit .stay-back-link {
  color: rgba(65, 63, 60, 0.45);
  border-color: rgba(50, 48, 46, 0.25);
}

.outcome-stay.stay-pit .stay-back-link:hover,
.outcome-stay.stay-pit .stay-back-link:focus-visible {
  color: rgba(85, 83, 80, 0.65);
  border-color: rgba(65, 63, 60, 0.4);
}

.outcome-stay.stay-pit .stay-seal-mark--pit {
  border-color: rgba(38, 36, 35, 0.95);
  box-shadow: none;
  opacity: 0.4;
  animation: none;
}

.outcome-stay.stay-pit [data-reveal].is-revealed {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-stay.stay-pit .outcome-stay-parallax-back .outcome-stay-mesh--pit,
  html:not(.depressionmax-full-motion) .outcome-stay.stay-pit .outcome-stay-drift--pit {
    animation: none;
  }

  html:not(.depressionmax-full-motion) .outcome-stay.stay-pit .outcome-stay-vignette-live {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Up — sanctuary (soft, angelic calm — no beams or sweeps)
   ------------------------------------------------------------------------- */
body[data-page="up"] {
  --cursor-spot-opacity: 0.95;
  background: #161410;
  /* --up-fade-* live on documentElement via JS; do not set here or they override scroll-driven values */
}

body[data-page="up"] .cursor-spotlight {
  background: radial-gradient(
    85vmax circle at var(--cursor-x) var(--cursor-y),
    rgba(255, 252, 246, 0.042) 0%,
    transparent 58%
  );
}

.transition-overlay--sanctuary {
  background: radial-gradient(
    ellipse 115% 100% at 50% 45%,
    rgba(255, 250, 244, 0.72) 0%,
    rgba(235, 220, 200, 0.55) 42%,
    rgba(40, 34, 28, 0.45) 100%
  );
}

.transition-overlay--sanctuary.is-active {
  filter: none;
}

.up-sanctuary-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    ellipse 130% 75% at 50% -5%,
    rgba(255, 253, 248, 0.2) 0%,
    rgba(255, 248, 240, 0.06) 38%,
    transparent 62%
  );
  opacity: 0.9;
}

.outcome-up.up-sanctuary {
  color: #f3eee6;
}

.outcome-up.up-sanctuary .up-sanctuary-veil {
  animation: sanctuaryVeilGlow 32s ease-in-out infinite alternate;
}

@keyframes sanctuaryVeilGlow {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 0.94;
  }
}

.outcome-up.up-sanctuary .outcome-up-canvas {
  opacity: 0.4;
  mix-blend-mode: soft-light;
}

.outcome-up.up-sanctuary .outcome-up-bg {
  background: linear-gradient(
    135deg,
    #1a1612 0%,
    #252019 30%,
    #2a231c 50%,
    #221c17 72%,
    #1c1814 100%
  );
  background-size: 320% 320%;
  background-position: calc(50% + (var(--up-mouse-x, 0.5) - 0.5) * 18%)
    calc(48% + (var(--up-mouse-y, 0.5) - 0.5) * 14%);
  animation: gradientShift 85s ease-in-out infinite;
  filter: saturate(0.95);
  transition: background-position 0.55s ease-out;
  opacity: 0.92;
}

.outcome-up.up-sanctuary .up-visual-feed {
  inset: -10%;
}

.outcome-up.up-sanctuary .up-visual-layer--summit {
  --up-viz-anchor-y: 42%;
}

.outcome-up.up-sanctuary .up-visual-layer--load {
  --up-viz-anchor-y: 48%;
}

.outcome-up.up-sanctuary .up-visual-layer--leap {
  --up-viz-anchor-y: 44%;
}

.outcome-up.up-sanctuary .up-visual-layer--twin {
  --up-viz-anchor-y: 38%;
}

.outcome-up.up-sanctuary .up-visual-layer {
  background-position: calc(50% + (var(--up-mouse-x, 0.5) - 0.5) * 2.8%)
    calc(var(--up-viz-anchor-y) + (var(--up-mouse-y, 0.5) - 0.5) * 2.2%);
  background-size: 105% 105%;
  transform: translate3d(
    calc((var(--up-mouse-x, 0.5) - 0.5) * 14px + var(--up-scroll) * -8px),
    calc(
      (var(--up-mouse-y, 0.5) - 0.5) * 11px + var(--up-scroll) * -5px + var(--up-scroll) * var(--up-layer-y, 0px)
    ),
    0
  );
  transform-origin: center 44%;
  filter: brightness(0.84) contrast(1.05) saturate(0.88) grayscale(0.12) sepia(0.1);
  mix-blend-mode: soft-light;
  transition:
    opacity 0.65s ease,
    transform 0.5s ease-out,
    filter 0.45s ease-out;
}

.outcome-up.up-sanctuary .up-visual-stack .up-visual-layer:nth-child(1) {
  --up-layer-y: -12px;
}

.outcome-up.up-sanctuary .up-visual-stack .up-visual-layer:nth-child(2) {
  --up-layer-y: -22px;
}

.outcome-up.up-sanctuary .up-visual-stack .up-visual-layer:nth-child(3) {
  --up-layer-y: -32px;
}

.outcome-up.up-sanctuary .up-visual-stack .up-visual-layer:nth-child(4) {
  --up-layer-y: -42px;
}

.outcome-up.up-sanctuary .up-visual-layer--kb-a {
  animation: upPhotoKenBurns 128s ease-in-out infinite alternate;
  animation-delay: -8s;
}

.outcome-up.up-sanctuary .up-visual-layer--kb-b {
  animation: upPhotoKenBurnsRev 152s ease-in-out infinite alternate;
  animation-delay: -42s;
}

.outcome-up.up-sanctuary .up-visual-layer--kb-c {
  animation: upPhotoKenBurns 108s ease-in-out infinite alternate;
  animation-delay: -24s;
}

.outcome-up.up-sanctuary .up-visual-layer--kb-d {
  animation: upPhotoKenBurnsRev 168s ease-in-out infinite alternate;
  animation-delay: -70s;
}

@keyframes upPhotoKenBurns {
  0% {
    background-size: 108% 108%;
  }
  100% {
    background-size: 101% 101%;
  }
}

@keyframes upPhotoKenBurnsRev {
  0% {
    background-size: 101% 101%;
  }
  100% {
    background-size: 109% 109%;
  }
}

.outcome-up.up-sanctuary .outcome-up-aurora-a {
  inset: -35%;
  opacity: 0.38;
  filter: blur(95px);
  animation: auroraSanctuary 90s ease-in-out infinite;
  background: radial-gradient(
    circle at calc(48% + (var(--up-mouse-x, 0.5) - 0.5) * 8%) calc(38% + (var(--up-mouse-y, 0.5) - 0.5) * 6%),
    rgba(255, 238, 220, 0.22) 0%,
    rgba(230, 200, 175, 0.08) 45%,
    transparent 72%
  );
}

.outcome-up.up-sanctuary .outcome-up-aurora-b {
  inset: -40%;
  opacity: 0.28;
  filter: blur(90px);
  animation: auroraSanctuaryB 72s ease-in-out infinite;
  background: radial-gradient(
    circle at calc(62% + (var(--up-mouse-x, 0.5) - 0.5) * -10%) calc(58% + (var(--up-mouse-y, 0.5) - 0.5) * 8%),
    rgba(255, 232, 210, 0.18) 0%,
    rgba(180, 150, 120, 0.06) 48%,
    transparent 70%
  );
}

@keyframes auroraSanctuaryB {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate(-4%, 3%) scale(1.06);
    opacity: 1;
  }
}

@keyframes auroraSanctuary {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(1.2%, -0.8%) scale(1.03);
  }
}

.outcome-up.up-sanctuary .outcome-up-parallax-mid {
  transform: translate3d(
    calc((var(--up-mouse-x, 0.5) - 0.5) * 22px + var(--up-scroll) * -12px),
    calc((var(--up-mouse-y, 0.5) - 0.5) * 18px + var(--up-scroll) * -10px),
    0
  );
  transition: transform 0.45s ease-out;
}

.outcome-up.up-sanctuary .outcome-up-stars {
  animation: twinkleSoft 22s ease-in-out infinite;
  opacity: 0.52;
}

.outcome-up.up-sanctuary .outcome-up-dust {
  opacity: 0.38;
  animation: upDustTwinkle 11s ease-in-out infinite;
  transform: translate3d(
    calc((var(--up-mouse-x, 0.5) - 0.5) * 56px + var(--up-scroll) * -10px),
    calc((var(--up-mouse-y, 0.5) - 0.5) * 44px + var(--up-scroll) * -8px),
    0
  );
}

.outcome-up.up-sanctuary .outcome-up-rise-1 {
  opacity: 0.72;
  animation-duration: 14s;
}

.outcome-up.up-sanctuary .outcome-up-rise-2 {
  opacity: 0.48;
  animation-duration: 19s;
}

.outcome-up.up-sanctuary .up-warm-shimmer {
  opacity: 0.48;
  animation-duration: 26s;
  filter: blur(56px);
}

@keyframes twinkleSoft {
  0%,
  100% {
    opacity: 0.38;
    filter: brightness(0.95);
  }
  33% {
    opacity: 0.48;
    filter: brightness(1.05);
  }
  66% {
    opacity: 0.42;
    filter: brightness(1);
  }
}

.outcome-up.up-sanctuary .outcome-up-glow-orb {
  left: 50% !important;
  top: 34% !important;
  width: min(110vw, 820px);
  height: min(110vw, 820px);
  transition: none;
  background: radial-gradient(
    circle,
    rgba(255, 248, 238, 0.1) 0%,
    rgba(255, 235, 215, 0.05) 38%,
    transparent 62%
  );
  filter: blur(56px);
  animation: sanctuaryOrb 56s ease-in-out infinite;
}

@keyframes sanctuaryOrb {
  0%,
  100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

.outcome-up.up-sanctuary .up-story {
  color: #ebe8e2;
  transform: translate3d(calc(var(--up-ptr-x, 0) * 6px), calc(var(--up-ptr-y, 0) * 5px), 0)
    rotateX(calc(var(--tilt-x-deg, 0deg) * 0.32))
    rotateY(calc(var(--tilt-y-deg, 0deg) * 0.32));
  transition: transform 0.4s ease-out;
}

.outcome-up.up-sanctuary .up-story::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 140%;
  height: 90%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 58% 52% at 50% 48%,
    rgba(255, 250, 242, 0.08) 0%,
    rgba(120, 100, 80, 0.03) 45%,
    transparent 68%
  );
  pointer-events: none;
  z-index: -1;
  animation: upStoryField 22s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes upStoryField {
  0%,
  100% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .up-story::before {
    animation: none;
    opacity: 0.75;
  }
}

.outcome-up.up-sanctuary .outcome-up-lead {
  color: #d4ccc0;
  animation: none;
}

/* Sanctuary: calmer headline — no float; inline chunks avoid subpixel box glitches */
.outcome-up.up-sanctuary .outcome-up-line {
  animation: none;
  transform: none;
  color: #f4ece2;
  -webkit-text-fill-color: #f4ece2;
  text-shadow:
    0 0 36px rgba(255, 248, 238, 0.1),
    0 1px 0 rgba(20, 16, 12, 0.35);
}

.outcome-up.up-sanctuary .up-line-chunk,
.outcome-up.up-sanctuary .up-line-italic {
  display: inline;
  animation: none !important;
  filter: none;
  transform: none;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.outcome-up.up-sanctuary .up-line-italic {
  font-style: italic;
  opacity: 0.95;
}

.outcome-up.up-sanctuary .up-verse {
  color: #e4dfd6;
}

.outcome-up.up-sanctuary .up-seal {
  color: #cbc3b8;
}

.outcome-up.up-sanctuary .up-seal-glow {
  animation: sanctuarySeal 28s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 248, 235, 0.22) 0%, transparent 72%);
}

@keyframes sanctuarySeal {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.68;
    transform: scale(1.05);
  }
}

.outcome-up.up-sanctuary [data-reveal] {
  filter: blur(6px);
}

.outcome-up.up-sanctuary [data-reveal].is-revealed {
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .up-sanctuary-veil,
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-aurora-a,
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-aurora-b,
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-glow-orb,
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .up-seal-glow,
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .up-warm-shimmer {
    animation: none;
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .up-visual-layer {
    animation: none !important;
    background-size: 104% 104%;
    background-position: 50% var(--up-viz-anchor-y, 42%);
    transform: none;
    transition: opacity 0.35s ease;
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .up-visual-tech-overlay {
    transform: none;
    transition: none;
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-bg {
    background-position: 50% 48%;
    transition: none;
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-stars {
    animation: none;
    opacity: 0.4;
    filter: none;
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-dust {
    animation: none;
    transform: translate3d(0, calc(var(--up-scroll) * -8px), 0);
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-rise-1,
  html:not(.depressionmax-full-motion) .outcome-up.up-sanctuary .outcome-up-rise-2 {
    animation: none;
    transform: none;
    opacity: 0.55;
  }
}

/* -------------------------------------------------------------------------
   Up — party / rave layer (five videos, “go up” hype)
   ------------------------------------------------------------------------- */
body.up-rave-body {
  background: #0c0518;
}

.up-portal-video {
  position: absolute;
  inset: -8%;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 650ms ease;
}

body.up-portal-faded .up-portal-video {
  opacity: 0;
}

.up-portal-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  opacity: 1;
  filter: contrast(1.06) saturate(1.15) brightness(1.06);
}

.up-party-stage {
  position: absolute;
  inset: -8%;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.98);
  transition: opacity 700ms ease, transform 700ms ease;
}

.up-party-stage,
.up-party-stage * {
  animation-play-state: paused;
}

body.up-party-live .up-party-stage {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

body.up-party-live .up-party-stage,
body.up-party-live .up-party-stage * {
  animation-play-state: running;
}

.up-party-lights {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(255, 0, 180, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(0, 240, 255, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 50% 90%, rgba(255, 230, 0, 0.22) 0%, transparent 45%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(180, 0, 255, 0.25) 0%, transparent 50%);
  animation: upPartyLights 6s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0.85;
}

@keyframes upPartyLights {
  0% {
    filter: hue-rotate(0deg);
    transform: scale(1);
  }
  100% {
    filter: hue-rotate(45deg);
    transform: scale(1.06);
  }
}

.up-party-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: clamp(6px, 1.2vw, 14px);
  padding: 3%;
  transform: rotate(-1.2deg) scale(1.08);
  transform-origin: center center;
  animation: upPartyGridWobble 4.5s ease-in-out infinite;
}

@keyframes upPartyGridWobble {
  0%,
  100% {
    transform: rotate(-1.2deg) scale(1.08) translate(0, 0);
  }
  33% {
    transform: rotate(-0.4deg) scale(1.1) translate(1%, -0.5%);
  }
  66% {
    transform: rotate(-2deg) scale(1.06) translate(-1.2%, 0.8%);
  }
}

.up-party-tile {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px rgba(255, 0, 200, 0.65),
    0 0 28px rgba(0, 255, 255, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.5);
  animation: upPartyTilePop var(--party-dur, 3s) ease-in-out infinite;
  transform: rotate(var(--party-rot, 0deg));
  transform-origin: center center;
  will-change: transform;
}

.up-party-tile:nth-child(odd) {
  box-shadow:
    0 0 0 3px rgba(0, 255, 255, 0.6),
    0 0 32px rgba(255, 0, 180, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.5);
}

@keyframes upPartyTilePop {
  0%,
  100% {
    transform: rotate(var(--party-rot, 0deg)) scale(1);
    filter: saturate(1.15) contrast(1.08) brightness(1);
  }
  40% {
    transform: rotate(calc(var(--party-rot, 0deg) + 2deg)) scale(1.04);
    filter: saturate(1.45) contrast(1.15) brightness(1.08);
  }
  70% {
    transform: rotate(calc(var(--party-rot, 0deg) - 1.5deg)) scale(0.99);
    filter: saturate(1.25) contrast(1.1) brightness(1.05);
  }
}

.up-party-tile--1 {
  grid-area: 1 / 1 / 3 / 2;
}

.up-party-tile--2 {
  grid-area: 1 / 2 / 2 / 4;
}

.up-party-tile--3 {
  grid-area: 2 / 2 / 3 / 3;
}

.up-party-tile--4 {
  grid-area: 2 / 3 / 4 / 4;
}

.up-party-tile--5 {
  grid-area: 3 / 1 / 4 / 3;
}

.up-party-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  animation: upPartyVidNudge 5s ease-in-out infinite alternate;
}

@keyframes upPartyVidNudge {
  0% {
    transform: scale(1.08) translate(-1%, 0);
  }
  100% {
    transform: scale(1.12) translate(1%, -1%);
  }
}

.up-party-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 0, 150, 0.12) 0%,
    transparent 30%,
    rgba(0, 255, 255, 0.1) 50%,
    transparent 70%,
    rgba(255, 255, 0, 0.08) 100%
  );
  background-size: 200% 200%;
  animation: upPartySheen 8s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes upPartySheen {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.up-party-burst {
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 0, 200, 0.04) 0deg 18deg,
    transparent 18deg 36deg
  );
  animation: upPartyBurst 22s linear infinite;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}

@keyframes upPartyBurst {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.15);
  }
}

.up-party-chant {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(0.65rem, 2.5vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 0 20px rgba(255, 0, 200, 0.9),
    0 0 40px rgba(0, 255, 255, 0.5);
  animation: upPartyChant 1.2s ease-in-out infinite alternate;
  white-space: nowrap;
  pointer-events: none;
}

.up-trend-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(70, 175, 255, 0.28);
  background: linear-gradient(180deg, rgba(16, 18, 26, 0.72), rgba(10, 10, 11, 0.55));
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 2px rgba(70, 175, 255, 0.07),
    0 18px 60px rgba(0, 0, 0, 0.55);
  color: rgba(255, 250, 240, 0.92);
}

@media (max-width: 520px) {
  .up-bottom-dock {
    width: min(94vw, 560px);
    bottom: 34px;
  }
  .up-trend-panel {
    gap: 8px;
    padding: 14px 14px;
  }
  .up-trend-text {
    letter-spacing: 0.09em;
  }
  .up-trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .up-trend-card {
    min-height: 128px;
  }
}

.up-trend-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;
  font-weight: 900;
  color: rgba(120, 200, 255, 1);
}

.up-trend-preview {
  width: 100%;
  border: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(9, 14, 22, 0.58);
  border-radius: 12px;
  padding: 10px 12px;
  overflow: hidden;
}

.up-trend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.up-trend-card {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(120, 200, 255, 0.2);
  background: rgba(12, 20, 30, 0.6);
  min-height: 150px;
  text-decoration: none;
}

.up-trend-thumb {
  width: 100%;
  min-height: 120px;
  height: 100%;
  display: block;
  object-fit: cover;
  background: rgba(20, 28, 40, 0.9);
}

.up-trend-card--fallback {
  padding: 10px;
  display: grid;
  gap: 6px;
  align-content: center;
}

.up-trend-fallback-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.22rem 0.46rem;
  border-radius: 999px;
  border: 1px solid rgba(140, 215, 255, 0.55);
  background: rgba(28, 40, 56, 0.75);
  color: rgba(180, 235, 255, 1);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.up-trend-fallback-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(170, 220, 255, 0.95);
}

.up-trend-fallback-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  line-height: 1.3;
  color: rgba(140, 205, 255, 0.9);
}

.up-trend-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(120, 200, 255, 1);
  text-decoration: none;
  border-bottom: 1px solid rgba(120, 200, 255, 0.55);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  font-weight: 900;
  align-self: flex-start;
}

.up-trend-link:hover,
.up-trend-link:focus-visible {
  color: rgba(180, 235, 255, 1);
  border-bottom-color: rgba(180, 235, 255, 0.8);
  box-shadow: 0 0 18px rgba(255, 0, 200, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .up-trend-panel {
    transition: none;
  }

  html:not(.depressionmax-full-motion) .up-trend-link {
    transition: none;
  }
}

@keyframes upPartyChant {
  0% {
    opacity: 0.75;
    letter-spacing: 0.32em;
  }
  100% {
    opacity: 1;
    letter-spacing: 0.42em;
  }
}

.outcome-up.up-party .up-visual-feed {
  opacity: 0.42;
  filter: saturate(0.75) brightness(0.85);
}

.outcome-up.up-party.up-sanctuary .up-visual-feed {
  opacity: 0.38;
}

.outcome-up.up-party .up-sanctuary-veil {
  opacity: 0.55;
  background: radial-gradient(
    ellipse 120% 80% at 50% 40%,
    rgba(80, 0, 120, 0.35) 0%,
    rgba(10, 5, 30, 0.5) 45%,
    transparent 70%
  );
}

.outcome-up.up-party .outcome-up-canvas {
  opacity: 0.55;
  mix-blend-mode: screen;
}

.outcome-up.up-party .up-story {
  text-shadow:
    0 0 24px rgba(0, 0, 0, 0.95),
    0 0 48px rgba(120, 0, 180, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.8);
}

.outcome-up.up-party.up-sanctuary .outcome-up-line,
.outcome-up.up-party.up-sanctuary .outcome-up-lead,
.outcome-up.up-party.up-sanctuary .up-verse,
.outcome-up.up-party.up-sanctuary .up-seal {
  filter: drop-shadow(0 0 12px rgba(255, 0, 180, 0.25));
}

.outcome-up.up-party .tech-status--up .tech-status-value {
  color: rgba(255, 180, 255, 0.95);
  text-shadow: 0 0 12px rgba(255, 0, 200, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.depressionmax-full-motion) .up-portal-video {
    display: none;
  }

  html:not(.depressionmax-full-motion) .up-party-stage {
    display: none;
  }

  html:not(.depressionmax-full-motion) body.up-rave-body {
    background: #161410;
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-party .up-visual-feed {
    opacity: 1;
    filter: none;
  }

  html:not(.depressionmax-full-motion) .outcome-up.up-party .up-sanctuary-veil {
    opacity: 0.9;
  }
}