/* OOTW.CO — Brand System v3 */

:root {
  --void: #07060B;
  --void-deep: #030208;
  --cosmos: #14122A;
  --cosmos-2: #1B1840;
  --paper: #F4EFE6;
  --paper-dim: #DCD5C7;
  --magenta: #E5197F;
  --magenta-soft: #FF4FA3;
  --teal: #1FD9C7;
  --teal-soft: #6FF0E2;
  --gold: #D9B45B;
  --gold-soft: #F0CE7A;

  --bg: var(--void);
  --fg: var(--paper);
  --muted: rgba(244, 239, 230, 0.55);
  --hairline: rgba(244, 239, 230, 0.12);
  --hairline-strong: rgba(244, 239, 230, 0.28);

  --font-display: "Newsreader", "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --tracking-tight: -0.04em;
  --tracking-mono: 0.16em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { min-height: 100%; }
html, body {
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #02010a;
}

/* === EPIC COSMOS === */
.cosmos-field {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* deep space — flat uniform dark */
  background: linear-gradient(180deg, #03020c 0%, #050316 50%, #03020c 100%);
}

/* Galactic core — disabled, removed centered glow asymmetry */
.cosmos-core {
  display: none;
}

/* Spiral galaxy — distant, slowly rotating, beautiful */
.cosmos-spiral {
  position: absolute;
  width: 1400px;
  height: 1400px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(180, 140, 220, 0.06) 30deg,
      rgba(229, 25, 127, 0.04) 60deg,
      transparent 90deg,
      transparent 180deg,
      rgba(120, 180, 255, 0.05) 210deg,
      rgba(217, 180, 91, 0.04) 240deg,
      transparent 270deg,
      transparent 360deg);
  border-radius: 50%;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: spiralRotate 240s linear infinite;
}
@keyframes spiralRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* === DISTANT UNIVERSES === */
.universe {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* === EPIC UNIVERSES === */

.universe {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Spiral galaxy 1 — majestic, top-right */
.universe-spiral-1 {
  width: 520px;
  height: 520px;
  right: -100px;
  top: 4%;
  background:
    /* bright bulge */
    radial-gradient(circle at 50% 50%, rgba(255, 240, 220, 0.95) 0%, rgba(255, 210, 170, 0.6) 4%, rgba(255, 170, 130, 0.3) 8%, transparent 14%),
    /* spiral arms via conic */
    conic-gradient(from 30deg at 50% 50%,
      transparent 0deg,
      rgba(229, 130, 180, 0.32) 20deg,
      rgba(180, 100, 220, 0.28) 50deg,
      rgba(120, 80, 200, 0.20) 75deg,
      transparent 100deg,
      transparent 180deg,
      rgba(120, 180, 255, 0.24) 200deg,
      rgba(229, 130, 180, 0.30) 230deg,
      rgba(255, 180, 140, 0.22) 260deg,
      transparent 290deg,
      transparent 360deg);
  border-radius: 50%;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 5%, rgba(0,0,0,0.85) 25%, rgba(0,0,0,0.4) 55%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 5%, rgba(0,0,0,0.85) 25%, rgba(0,0,0,0.4) 55%, transparent 78%);
  filter: blur(2.5px);
  transform: rotate(20deg);
  opacity: 0.9;
  animation: universeRotate1 240s linear infinite, universeFloat1 60s ease-in-out infinite alternate;
}
.universe-spiral-1::before {
  /* dust lanes between arms */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 30deg at 50% 50%,
      transparent 0deg,
      transparent 18deg,
      rgba(20, 5, 30, 0.5) 28deg,
      transparent 42deg,
      transparent 200deg,
      rgba(20, 5, 30, 0.45) 215deg,
      transparent 230deg,
      transparent 360deg);
  mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, transparent 8%, black 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, transparent 8%, black 25%, transparent 70%);
  filter: blur(2px);
}
.universe-spiral-1::after {
  /* embedded bright stars in arms */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(1.2px 1.2px at 30% 40%, rgba(255, 240, 220, 1), transparent 70%),
    radial-gradient(1px 1px at 28% 35%, rgba(220, 240, 255, 0.95), transparent 70%),
    radial-gradient(1.5px 1.5px at 65% 55%, rgba(255, 230, 240, 1), transparent 70%),
    radial-gradient(1.2px 1.2px at 60% 60%, rgba(255, 240, 200, 0.95), transparent 70%),
    radial-gradient(1.8px 1.8px at 50% 65%, rgba(255, 240, 200, 1), transparent 70%),
    radial-gradient(1px 1px at 40% 30%, rgba(220, 240, 255, 0.9), transparent 70%),
    radial-gradient(1.2px 1.2px at 38% 70%, rgba(255, 220, 240, 0.95), transparent 70%),
    radial-gradient(1px 1px at 70% 35%, rgba(244, 239, 230, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 25% 60%, rgba(255, 230, 220, 1), transparent 70%),
    radial-gradient(1px 1px at 75% 45%, rgba(220, 240, 255, 0.85), transparent 70%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 8%, rgba(0,0,0,0.7) 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 8%, rgba(0,0,0,0.7) 35%, transparent 75%);
}

/* Edge-on disk galaxy — slim luminous bar, mid-right area */
.universe-elliptical {
  width: 280px;
  height: 70px;
  right: 14%;
  bottom: 24%;
  background:
    /* glowing core */
    radial-gradient(ellipse 18% 90% at 50% 50%, rgba(255, 240, 210, 0.9), rgba(255, 200, 160, 0.5) 40%, transparent 80%),
    /* extended disk */
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(220, 180, 240, 0.32), rgba(180, 120, 220, 0.18) 50%, transparent 85%),
    /* outer halo */
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(120, 80, 200, 0.10), transparent 80%);
  border-radius: 50%;
  filter: blur(1.5px);
  transform: rotate(-12deg);
  opacity: 0.8;
  animation: universeFloat3 90s ease-in-out infinite alternate;
}
.universe-elliptical::before {
  /* dust lane crossing the disk */
  content: "";
  position: absolute;
  inset: 38% 4%;
  background: linear-gradient(90deg, transparent, rgba(15, 5, 25, 0.6) 20%, rgba(15, 5, 25, 0.7) 50%, rgba(15, 5, 25, 0.6) 80%, transparent);
  filter: blur(2px);
}
.universe-elliptical::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(0.8px 0.8px at 35% 45%, rgba(255, 230, 240, 1), transparent 70%),
    radial-gradient(0.8px 0.8px at 65% 55%, rgba(255, 240, 220, 1), transparent 70%),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 240, 200, 1), transparent 70%);
}

/* Nebula 1 — Carina-style: pillars + bright star-forming region, bottom-left */
.universe-nebula-1 {
  width: 760px;
  height: 600px;
  left: -10%;
  bottom: 2%;
  background:
    /* hot pink core */
    radial-gradient(ellipse 30% 25% at 28% 48%, rgba(255, 60, 140, 0.45), rgba(229, 25, 127, 0.30) 35%, transparent 75%),
    /* purple-magenta cloud */
    radial-gradient(ellipse 38% 32% at 55% 38%, rgba(180, 80, 220, 0.32), rgba(140, 60, 200, 0.20) 40%, transparent 78%),
    /* warm orange edge */
    radial-gradient(ellipse 22% 18% at 72% 58%, rgba(255, 160, 100, 0.28), rgba(229, 100, 80, 0.16) 45%, transparent 80%),
    /* deep violet base */
    radial-gradient(ellipse 28% 22% at 42% 72%, rgba(80, 30, 140, 0.32), rgba(40, 15, 80, 0.20) 50%, transparent 80%),
    /* small blue accent */
    radial-gradient(ellipse 14% 12% at 65% 28%, rgba(120, 180, 255, 0.20), transparent 80%);
  filter: blur(35px);
  opacity: 0.85;
  animation: universeFloat1 90s ease-in-out infinite alternate;
}
.universe-nebula-1::before {
  /* dark dust pillars */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 6% 22% at 35% 55%, rgba(10, 4, 18, 0.55), transparent 75%),
    radial-gradient(ellipse 5% 18% at 48% 62%, rgba(10, 4, 18, 0.45), transparent 75%),
    radial-gradient(ellipse 4% 14% at 22% 65%, rgba(10, 4, 18, 0.40), transparent 75%);
  filter: blur(20px);
}
.universe-nebula-1::after {
  /* embedded young stars */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 28% 48%, rgba(255, 255, 240, 1), rgba(255, 240, 220, 0.5) 25%, transparent 70%),
    radial-gradient(1.5px 1.5px at 32% 42%, rgba(255, 230, 220, 1), transparent 70%),
    radial-gradient(1.2px 1.2px at 50% 55%, rgba(255, 240, 220, 0.95), transparent 70%),
    radial-gradient(1px 1px at 25% 45%, rgba(244, 239, 230, 0.9), transparent 70%),
    radial-gradient(1.8px 1.8px at 55% 38%, rgba(255, 230, 240, 1), transparent 70%),
    radial-gradient(1px 1px at 65% 50%, rgba(220, 240, 255, 0.9), transparent 70%),
    radial-gradient(1.2px 1.2px at 40% 65%, rgba(255, 230, 200, 0.95), transparent 70%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(220, 240, 255, 1), transparent 70%),
    radial-gradient(1px 1px at 45% 30%, rgba(255, 240, 220, 0.9), transparent 70%),
    radial-gradient(0.8px 0.8px at 60% 70%, rgba(244, 239, 230, 0.85), transparent 70%);
  filter: blur(0px);
}

/* Nebula 2 — Veil-style: filamentary teal/violet cloud, top-left */
.universe-nebula-2 {
  width: 600px;
  height: 460px;
  left: 2%;
  top: -10%;
  background:
    /* main teal lobe */
    radial-gradient(ellipse 35% 30% at 45% 50%, rgba(80, 200, 220, 0.32), rgba(50, 150, 200, 0.20) 45%, transparent 80%),
    /* violet companion */
    radial-gradient(ellipse 28% 24% at 65% 55%, rgba(160, 100, 220, 0.28), rgba(100, 60, 180, 0.16) 50%, transparent 80%),
    /* cyan accent */
    radial-gradient(ellipse 22% 18% at 30% 65%, rgba(31, 217, 199, 0.26), transparent 80%),
    /* deep blue base */
    radial-gradient(ellipse 40% 35% at 50% 35%, rgba(40, 80, 180, 0.22), transparent 78%);
  filter: blur(40px);
  opacity: 0.8;
  animation: universeFloat2 110s ease-in-out infinite alternate;
}
.universe-nebula-2::before {
  /* filaments — narrow streaks */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(35deg,
      transparent 0%,
      rgba(120, 220, 230, 0.10) 0.5%,
      transparent 1.2%,
      transparent 4%,
      rgba(160, 100, 220, 0.08) 4.5%,
      transparent 5.5%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 10%, transparent 75%);
  filter: blur(3px);
}
.universe-nebula-2::after {
  /* stars */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 40% 45%, rgba(220, 240, 255, 1), transparent 70%),
    radial-gradient(1px 1px at 55% 55%, rgba(255, 230, 240, 0.9), transparent 70%),
    radial-gradient(1.2px 1.2px at 30% 60%, rgba(244, 239, 230, 0.95), transparent 70%),
    radial-gradient(1px 1px at 65% 40%, rgba(220, 240, 255, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 50% 35%, rgba(255, 240, 220, 1), transparent 70%),
    radial-gradient(0.8px 0.8px at 70% 60%, rgba(220, 240, 255, 0.85), transparent 70%);
}

/* Nebula 3 — Orion-style: warm amber dust + bright core, far right */
.universe-nebula-3 {
  width: 540px;
  height: 440px;
  right: -12%;
  bottom: 28%;
  background:
    /* central bright knot */
    radial-gradient(ellipse 22% 20% at 45% 50%, rgba(255, 220, 180, 0.55), rgba(255, 180, 130, 0.30) 50%, transparent 80%),
    /* amber outer cloud */
    radial-gradient(ellipse 45% 38% at 50% 50%, rgba(217, 130, 91, 0.30), rgba(180, 100, 80, 0.18) 50%, transparent 80%),
    /* magenta wisp */
    radial-gradient(ellipse 28% 22% at 35% 65%, rgba(229, 80, 140, 0.22), transparent 80%),
    /* blue young-star halo */
    radial-gradient(ellipse 18% 16% at 60% 40%, rgba(120, 180, 255, 0.20), transparent 80%);
  filter: blur(38px);
  opacity: 0.78;
  animation: universeFloat3 100s ease-in-out infinite alternate;
}
.universe-nebula-3::before {
  /* dark dust lane */
  content: "";
  position: absolute;
  inset: 45% 15% 35% 15%;
  background: linear-gradient(95deg, transparent, rgba(15, 8, 20, 0.45) 30%, rgba(15, 8, 20, 0.5) 50%, rgba(15, 8, 20, 0.45) 70%, transparent);
  filter: blur(15px);
  transform: rotate(-8deg);
}
.universe-nebula-3::after {
  /* embedded stars + Trapezium-like cluster */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2.5px 2.5px at 45% 50%, rgba(255, 255, 240, 1), rgba(255, 240, 220, 0.5) 25%, transparent 70%),
    radial-gradient(1.5px 1.5px at 48% 48%, rgba(220, 240, 255, 1), transparent 70%),
    radial-gradient(1.2px 1.2px at 42% 52%, rgba(255, 230, 240, 0.95), transparent 70%),
    radial-gradient(1px 1px at 55% 45%, rgba(255, 240, 220, 0.9), transparent 70%),
    radial-gradient(1px 1px at 35% 60%, rgba(244, 239, 230, 0.9), transparent 70%),
    radial-gradient(1.2px 1.2px at 65% 55%, rgba(255, 230, 220, 0.95), transparent 70%),
    radial-gradient(0.8px 0.8px at 30% 40%, rgba(220, 240, 255, 0.85), transparent 70%),
    radial-gradient(1px 1px at 70% 35%, rgba(255, 240, 220, 0.9), transparent 70%);
}

@keyframes universeRotate1 {
  from { transform: rotate(20deg); }
  to   { transform: rotate(380deg); }
}
@keyframes universeFloat1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-20px, 14px); }
}
@keyframes universeFloat2 {
  0%   { transform: translate(0, 0) rotate(-15deg); }
  100% { transform: translate(16px, -12px) rotate(-12deg); }
}
@keyframes universeFloat3 {
  0%   { transform: translate(0, 0) rotate(25deg); }
  100% { transform: translate(-12px, -16px) rotate(28deg); }
}

/* Star clusters */
.star-cluster {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.star-cluster-1 {
  width: 240px;
  height: 240px;
  left: 55%;
  top: 60%;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 240, 220, 1), transparent 70%),
    radial-gradient(1.5px 1.5px at 35% 50%, rgba(255, 230, 240, 1), transparent 70%),
    radial-gradient(1px 1px at 50% 25%, rgba(220, 240, 255, 1), transparent 70%),
    radial-gradient(2px 2px at 55% 60%, rgba(255, 240, 200, 1), transparent 70%),
    radial-gradient(1px 1px at 65% 40%, rgba(244, 239, 230, 1), transparent 70%),
    radial-gradient(1.5px 1.5px at 70% 70%, rgba(255, 220, 240, 1), transparent 70%),
    radial-gradient(1px 1px at 40% 80%, rgba(244, 239, 230, 1), transparent 70%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255, 220, 240, 0.06), transparent 70%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  opacity: 0.8;
  animation: clusterPulse 6s ease-in-out infinite alternate;
}
.star-cluster-2 {
  width: 180px;
  height: 180px;
  left: 22%;
  bottom: 18%;
  background:
    radial-gradient(1px 1px at 25% 35%, rgba(255, 240, 220, 1), transparent 70%),
    radial-gradient(1.5px 1.5px at 50% 55%, rgba(255, 230, 240, 1), transparent 70%),
    radial-gradient(1px 1px at 70% 30%, rgba(220, 240, 255, 1), transparent 70%),
    radial-gradient(1px 1px at 60% 70%, rgba(244, 239, 230, 1), transparent 70%),
    radial-gradient(1.5px 1.5px at 35% 75%, rgba(255, 220, 240, 1), transparent 70%),
    radial-gradient(ellipse 55% 55% at 50% 50%, rgba(180, 200, 255, 0.05), transparent 70%);
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 20%, transparent 70%);
  opacity: 0.75;
  animation: clusterPulse 8s ease-in-out infinite alternate;
}
@keyframes clusterPulse {
  0%   { opacity: 0.55; }
  100% { opacity: 0.95; }
}

/* === BEAUTIFUL WORLDS === */
.world {
  position: absolute;
  pointer-events: none;
}
.world-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.world-atmosphere {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  pointer-events: none;
}

/* Gas giant — large ringed Jovian world, bottom-right */
.world-gas-giant {
  width: 360px;
  height: 360px;
  right: -40px;
  bottom: 8%;
  animation: worldFloat1 50s ease-in-out infinite alternate;
}
.world-gas-giant .world-body {
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 220, 200, 0.95) 0%, rgba(240, 160, 130, 0.85) 12%, rgba(200, 100, 110, 0.75) 28%, rgba(140, 60, 110, 0.85) 50%, rgba(60, 25, 80, 0.95) 80%, rgba(20, 10, 35, 1) 100%);
  box-shadow:
    inset -25px -30px 70px rgba(15, 5, 30, 0.95),
    inset 10px 14px 40px rgba(255, 210, 180, 0.18),
    0 0 80px rgba(229, 100, 160, 0.22),
    0 0 160px rgba(180, 80, 200, 0.10);
}
.world-gas-giant .world-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(6deg,
      transparent 0%,
      rgba(80, 30, 60, 0.22) 5%,
      transparent 9%,
      rgba(255, 200, 170, 0.10) 14%,
      transparent 20%,
      rgba(120, 50, 100, 0.18) 26%,
      transparent 32%);
  mix-blend-mode: overlay;
  opacity: 0.7;
  mask-image: radial-gradient(circle at 32% 30%, transparent 0%, transparent 8%, black 30%);
  -webkit-mask-image: radial-gradient(circle at 32% 30%, transparent 0%, transparent 8%, black 30%);
}
.world-gas-giant .world-body::before {
  content: "";
  position: absolute;
  width: 22%;
  height: 12%;
  left: 42%;
  top: 58%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 100, 80, 0.6), rgba(180, 40, 60, 0.4) 60%, transparent 100%);
  filter: blur(2px);
  transform: rotate(-8deg);
}
.world-gas-giant .world-atmosphere {
  background: radial-gradient(circle, transparent 50%, rgba(229, 130, 180, 0.18) 56%, rgba(140, 80, 200, 0.12) 64%, transparent 75%);
  filter: blur(10px);
}
.world-gas-giant .world-ring {
  position: absolute;
  left: -50px; right: -50px;
  top: 50%;
  height: 80px;
  transform: translateY(-50%) rotate(-18deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, transparent 36%, rgba(255, 240, 200, 0.55) 40%, rgba(217, 180, 91, 0.7) 48%, rgba(255, 220, 180, 0.45) 56%, rgba(180, 140, 80, 0.3) 62%, transparent 65%);
  opacity: 0.9;
  filter: blur(0.3px);
}
.world-gas-giant .world-ring-2 {
  height: 96px;
  left: -70px; right: -70px;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(180, 200, 220, 0.18) 48%, rgba(120, 150, 200, 0.25) 52%, transparent 58%);
  opacity: 0.7;
}

/* Terrestrial — earth-like, mid-left */
.world-terrestrial {
  width: 140px;
  height: 140px;
  left: 8%;
  top: 28%;
  animation: worldFloat2 60s ease-in-out infinite alternate;
}
.world-terrestrial .world-body {
  background:
    radial-gradient(circle at 35% 30%, rgba(180, 230, 255, 0.95) 0%, rgba(80, 160, 220, 0.85) 18%, rgba(40, 100, 180, 0.9) 40%, rgba(20, 50, 110, 0.95) 70%, rgba(5, 15, 40, 1) 100%);
  box-shadow:
    inset -10px -14px 30px rgba(5, 10, 30, 0.95),
    inset 4px 6px 16px rgba(200, 240, 255, 0.25),
    0 0 40px rgba(80, 180, 255, 0.25);
}
.world-terrestrial .world-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 30% 18% at 30% 35%, rgba(80, 130, 70, 0.7), transparent 70%),
    radial-gradient(ellipse 22% 14% at 60% 55%, rgba(110, 90, 60, 0.65), transparent 70%),
    radial-gradient(ellipse 18% 12% at 45% 75%, rgba(90, 110, 60, 0.6), transparent 70%);
  mix-blend-mode: overlay;
  opacity: 0.85;
  mask-image: radial-gradient(circle at 35% 30%, transparent 0%, transparent 6%, black 25%);
  -webkit-mask-image: radial-gradient(circle at 35% 30%, transparent 0%, transparent 6%, black 25%);
}
.world-terrestrial .world-atmosphere {
  background: radial-gradient(circle, transparent 50%, rgba(120, 200, 255, 0.25) 55%, rgba(80, 150, 230, 0.12) 62%, transparent 72%);
  filter: blur(6px);
}

/* Ice giant — pale teal/blue, top-right */
.world-ice {
  width: 110px;
  height: 110px;
  right: 14%;
  top: 16%;
  animation: worldFloat3 70s ease-in-out infinite alternate;
}
.world-ice .world-body {
  background:
    radial-gradient(circle at 32% 28%, rgba(220, 255, 250, 0.95) 0%, rgba(140, 220, 220, 0.85) 22%, rgba(80, 170, 200, 0.9) 50%, rgba(30, 80, 130, 0.95) 80%, rgba(10, 25, 50, 1) 100%);
  box-shadow:
    inset -8px -10px 24px rgba(5, 15, 35, 0.95),
    inset 3px 5px 12px rgba(220, 255, 250, 0.25),
    0 0 36px rgba(120, 220, 230, 0.25);
}
.world-ice .world-atmosphere {
  background: radial-gradient(circle, transparent 50%, rgba(140, 230, 220, 0.20) 56%, transparent 70%);
  filter: blur(6px);
}

/* Moon — small rocky body */
.world-moon {
  width: 60px;
  height: 60px;
  right: 32%;
  top: 36%;
  animation: worldFloat4 45s ease-in-out infinite alternate;
}
.world-moon .world-body {
  background:
    radial-gradient(circle at 35% 30%, rgba(230, 220, 210, 0.95) 0%, rgba(170, 160, 165, 0.85) 35%, rgba(80, 70, 90, 0.95) 75%, rgba(20, 15, 30, 1) 100%);
  box-shadow:
    inset -5px -7px 14px rgba(5, 5, 20, 0.95),
    inset 2px 2px 6px rgba(255, 250, 240, 0.2),
    0 0 22px rgba(180, 200, 230, 0.18);
}
.world-moon .world-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle 4px at 40% 35%, rgba(20, 15, 30, 0.5), transparent 70%),
    radial-gradient(circle 3px at 60% 50%, rgba(20, 15, 30, 0.4), transparent 70%),
    radial-gradient(circle 5px at 50% 70%, rgba(20, 15, 30, 0.4), transparent 70%),
    radial-gradient(circle 2px at 30% 60%, rgba(20, 15, 30, 0.5), transparent 70%);
  opacity: 0.8;
}

@keyframes worldFloat1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-14px, -18px); }
}
@keyframes worldFloat2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(10px, 14px); }
}
@keyframes worldFloat3 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-8px, 12px); }
}
@keyframes worldFloat4 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(12px, -10px); }
}
@keyframes coreBreath {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* Deep star field — multiple layers at different parallax depths */
.cosmos-stars-far {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(0.5px 0.5px at 7% 9%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.5px 0.5px at 13% 23%, rgba(244, 239, 230, 0.5), transparent),
    radial-gradient(0.5px 0.5px at 19% 51%, rgba(244, 239, 230, 0.8), transparent),
    radial-gradient(0.5px 0.5px at 27% 73%, rgba(244, 239, 230, 0.6), transparent),
    radial-gradient(0.5px 0.5px at 32% 11%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.5px 0.5px at 38% 38%, rgba(244, 239, 230, 0.5), transparent),
    radial-gradient(0.5px 0.5px at 43% 87%, rgba(244, 239, 230, 0.8), transparent),
    radial-gradient(0.5px 0.5px at 51% 19%, rgba(244, 239, 230, 0.6), transparent),
    radial-gradient(0.5px 0.5px at 57% 64%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.5px 0.5px at 64% 41%, rgba(244, 239, 230, 0.5), transparent),
    radial-gradient(0.5px 0.5px at 71% 7%, rgba(244, 239, 230, 0.8), transparent),
    radial-gradient(0.5px 0.5px at 77% 81%, rgba(244, 239, 230, 0.6), transparent),
    radial-gradient(0.5px 0.5px at 82% 33%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.5px 0.5px at 89% 58%, rgba(244, 239, 230, 0.5), transparent),
    radial-gradient(0.5px 0.5px at 94% 22%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.5px 0.5px at 97% 91%, rgba(244, 239, 230, 0.5), transparent);
  opacity: 0.6;
  animation: starsTwinkleFar 6s ease-in-out infinite alternate;
}
@keyframes starsTwinkleFar {
  0%   { opacity: 0.4; }
  100% { opacity: 0.7; }
}

.cosmos-stars-mid {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1px 1px at 5% 14%, rgba(244, 239, 230, 1), transparent),
    radial-gradient(1px 1px at 14% 47%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(1px 1px at 23% 81%, rgba(244, 239, 230, 1), transparent),
    radial-gradient(1px 1px at 31% 28%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(1px 1px at 39% 62%, rgba(255, 220, 240, 0.95), transparent),
    radial-gradient(1px 1px at 47% 16%, rgba(244, 239, 230, 1), transparent),
    radial-gradient(1px 1px at 55% 89%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(1px 1px at 63% 35%, rgba(220, 240, 255, 0.95), transparent),
    radial-gradient(1px 1px at 71% 71%, rgba(244, 239, 230, 1), transparent),
    radial-gradient(1px 1px at 79% 24%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(1px 1px at 87% 53%, rgba(244, 239, 230, 1), transparent),
    radial-gradient(1px 1px at 93% 78%, rgba(244, 239, 230, 0.9), transparent);
  opacity: 0.85;
  animation: starsTwinkleMid 4s ease-in-out infinite alternate;
}
@keyframes starsTwinkleMid {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

.cosmos-stars-near {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 11% 32%, rgba(255, 240, 230, 1), rgba(255, 240, 230, 0.3) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 22% 78%, rgba(220, 240, 255, 1), rgba(220, 240, 255, 0.3) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 36% 19%, rgba(244, 239, 230, 1), rgba(244, 239, 230, 0.3) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 48% 54%, rgba(255, 220, 240, 1), rgba(255, 220, 240, 0.3) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 61% 86%, rgba(244, 239, 230, 1), rgba(244, 239, 230, 0.3) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 73% 27%, rgba(255, 240, 200, 1), rgba(255, 240, 200, 0.3) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 84% 64%, rgba(244, 239, 230, 1), rgba(244, 239, 230, 0.3) 30%, transparent 70%),
    radial-gradient(2px 2px at 92% 41%, rgba(255, 240, 220, 1), rgba(255, 240, 220, 0.4) 30%, transparent 70%);
  animation: starsTwinkleNear 3s ease-in-out infinite alternate;
}
@keyframes starsTwinkleNear {
  0%   { opacity: 0.7; transform: scale(0.95); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1.05); }
}

/* Extra dense star layers — scattered everywhere */
.cosmos-stars-extra-1 {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(0.8px 0.8px at 4% 7%, rgba(244, 239, 230, 0.85), transparent),
    radial-gradient(0.8px 0.8px at 9% 41%, rgba(255, 230, 240, 0.7), transparent),
    radial-gradient(0.8px 0.8px at 16% 19%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(0.8px 0.8px at 21% 67%, rgba(220, 240, 255, 0.75), transparent),
    radial-gradient(0.8px 0.8px at 26% 88%, rgba(244, 239, 230, 0.8), transparent),
    radial-gradient(0.8px 0.8px at 33% 53%, rgba(255, 220, 240, 0.85), transparent),
    radial-gradient(0.8px 0.8px at 41% 8%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(0.8px 0.8px at 46% 76%, rgba(220, 240, 255, 0.7), transparent),
    radial-gradient(0.8px 0.8px at 53% 31%, rgba(244, 239, 230, 0.85), transparent),
    radial-gradient(0.8px 0.8px at 59% 95%, rgba(255, 230, 240, 0.75), transparent),
    radial-gradient(0.8px 0.8px at 66% 12%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(0.8px 0.8px at 72% 48%, rgba(220, 240, 255, 0.8), transparent),
    radial-gradient(0.8px 0.8px at 78% 73%, rgba(244, 239, 230, 0.85), transparent),
    radial-gradient(0.8px 0.8px at 84% 26%, rgba(255, 240, 220, 0.7), transparent),
    radial-gradient(0.8px 0.8px at 91% 62%, rgba(244, 239, 230, 0.9), transparent),
    radial-gradient(0.8px 0.8px at 96% 38%, rgba(255, 230, 240, 0.75), transparent),
    radial-gradient(0.8px 0.8px at 99% 83%, rgba(244, 239, 230, 0.85), transparent);
  opacity: 0.9;
  animation: starsTwinkleMid 5s ease-in-out infinite alternate;
}

.cosmos-stars-extra-2 {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(0.6px 0.6px at 2% 24%, rgba(244, 239, 230, 0.6), transparent),
    radial-gradient(0.6px 0.6px at 11% 58%, rgba(220, 240, 255, 0.55), transparent),
    radial-gradient(0.6px 0.6px at 18% 36%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.6px 0.6px at 24% 11%, rgba(255, 230, 240, 0.6), transparent),
    radial-gradient(0.6px 0.6px at 29% 79%, rgba(244, 239, 230, 0.65), transparent),
    radial-gradient(0.6px 0.6px at 36% 44%, rgba(220, 240, 255, 0.55), transparent),
    radial-gradient(0.6px 0.6px at 43% 21%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.6px 0.6px at 49% 89%, rgba(255, 240, 220, 0.6), transparent),
    radial-gradient(0.6px 0.6px at 55% 4%, rgba(244, 239, 230, 0.65), transparent),
    radial-gradient(0.6px 0.6px at 61% 56%, rgba(220, 240, 255, 0.55), transparent),
    radial-gradient(0.6px 0.6px at 68% 33%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.6px 0.6px at 74% 81%, rgba(255, 230, 240, 0.6), transparent),
    radial-gradient(0.6px 0.6px at 81% 17%, rgba(244, 239, 230, 0.65), transparent),
    radial-gradient(0.6px 0.6px at 87% 67%, rgba(220, 240, 255, 0.55), transparent),
    radial-gradient(0.6px 0.6px at 94% 44%, rgba(244, 239, 230, 0.7), transparent),
    radial-gradient(0.6px 0.6px at 98% 2%, rgba(255, 240, 220, 0.6), transparent);
  opacity: 0.75;
  animation: starsTwinkleFar 7s ease-in-out infinite alternate;
}

.cosmos-stars-extra-3 {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(2px 2px at 13% 14%, rgba(255, 240, 220, 1), rgba(255, 240, 220, 0.4) 25%, transparent 70%),
    radial-gradient(2px 2px at 27% 71%, rgba(220, 240, 255, 1), rgba(220, 240, 255, 0.4) 25%, transparent 70%),
    radial-gradient(2.5px 2.5px at 44% 38%, rgba(255, 230, 240, 1), rgba(255, 230, 240, 0.5) 25%, transparent 70%),
    radial-gradient(2px 2px at 58% 84%, rgba(244, 239, 230, 1), rgba(244, 239, 230, 0.4) 25%, transparent 70%),
    radial-gradient(2.5px 2.5px at 71% 23%, rgba(255, 240, 200, 1), rgba(255, 240, 200, 0.5) 25%, transparent 70%),
    radial-gradient(2px 2px at 86% 57%, rgba(220, 240, 255, 1), rgba(220, 240, 255, 0.4) 25%, transparent 70%),
    radial-gradient(2px 2px at 95% 92%, rgba(255, 230, 240, 1), rgba(255, 230, 240, 0.4) 25%, transparent 70%);
  animation: starsTwinkleNear 4s ease-in-out infinite alternate;
}

/* Nebula — disabled, was creating asymmetric centered haze */
.cosmos-nebula {
  display: none;
}
@keyframes nebulaShift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-3%, 2%) scale(1.08) rotate(1.5deg); }
  100% { transform: translate(2%, -3%) scale(0.95) rotate(-1.5deg); }
}

/* Dust clouds — turbulence-based galactic dust */
.cosmos-dust {
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'><filter id='dust'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='4' seed='12'/><feColorMatrix values='0 0 0 0 0.7, 0 0 0 0 0.55, 0 0 0 0 0.85, 0 0 0 0.35 0'/><feGaussianBlur stdDeviation='3'/></filter><rect width='100%25' height='100%25' filter='url(%23dust)'/></svg>");
  background-size: 200% 200%;
  opacity: 0.12;
  mix-blend-mode: screen;
  animation: dustDrift 120s ease-in-out infinite alternate;
}
@keyframes dustDrift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* Galactic plane — diagonal milky way band, very subtle */
.cosmos-galaxy {
  position: absolute;
  left: -20%; right: -20%;
  top: 30%;
  height: 320px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(255, 220, 240, 0.06), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(180, 140, 255, 0.04), transparent 70%);
  filter: blur(50px);
  transform: rotate(-12deg);
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* Shooting stars / comets */
.comet {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
}
.comet::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
  transform: translateY(-50%);
}
.comet-1 {
  top: 15%; left: -5%;
  animation: cometFly1 8s linear infinite;
  animation-delay: 2s;
}
.comet-2 {
  top: 65%; left: -5%;
  animation: cometFly2 11s linear infinite;
  animation-delay: 6s;
}
.comet-3 {
  top: 38%; left: -5%;
  animation: cometFly3 14s linear infinite;
  animation-delay: 10s;
}
@keyframes cometFly1 {
  0%   { transform: translate(0, 0) rotate(20deg); opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  30%  { transform: translate(110vw, 40vh) rotate(20deg); opacity: 0; }
  100% { transform: translate(110vw, 40vh) rotate(20deg); opacity: 0; }
}
@keyframes cometFly2 {
  0%   { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  30%  { transform: translate(110vw, -30vh) rotate(-15deg); opacity: 0; }
  100% { transform: translate(110vw, -30vh) rotate(-15deg); opacity: 0; }
}
@keyframes cometFly3 {
  0%   { transform: translate(0, 0) rotate(8deg); opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  30%  { transform: translate(110vw, 18vh) rotate(8deg); opacity: 0; }
  100% { transform: translate(110vw, 18vh) rotate(8deg); opacity: 0; }
}

/* Subtle data grid — uniform, no mask */
.cosmos-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 239, 230, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 230, 0.018) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px;
  opacity: 0.25;
}

/* Grain */
.cosmos-grain {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainShift 0.8s steps(4) infinite;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  25%  { background-position: -8px 6px; }
  50%  { background-position: 4px -10px; }
  75%  { background-position: -6px -4px; }
  100% { background-position: 0 0; }
}

/* Cinematic vignette — soft, no aggressive darkening */
.cosmos-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
}

/* Cursor */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--paper);
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 200ms ease, height 200ms ease;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(244, 239, 230, 0.4);
  border-radius: 999px;
  pointer-events: none; z-index: 9998;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 250ms ease, height 250ms ease, border-color 250ms ease;
}
.cursor-hover .cursor-dot { width: 10px; height: 10px; background: var(--magenta); }
.cursor-hover .cursor-ring { width: 56px; height: 56px; border-color: var(--magenta); }
@media (max-width: 760px) { body { cursor: auto; } .cursor-dot, .cursor-ring { display: none; } }

/* Layout */
.container {
  width: 100%; max-width: 1440px;
  margin: 0 auto; padding: 0 48px;
  position: relative; z-index: 1;
}
@media (max-width: 760px) { .container { padding: 0 24px; } }
section { position: relative; z-index: 1; }
.hairline { display: block; height: 1px; background: var(--hairline); width: 100%; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.mono-coord {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: 0.95;
}
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 18px 28px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform 280ms cubic-bezier(0.6, 0.05, 0.2, 1);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--void); }
.btn:hover::before { transform: translateY(0); }
.btn .btn-arrow { transition: transform 280ms ease; }
.btn:hover .btn-arrow { transform: translateX(6px); }

.btn-primary { background: var(--magenta); border-color: var(--magenta); color: var(--paper); }
.btn-primary::before { background: var(--paper); }
.btn-primary:hover { color: var(--magenta); }

.btn-gold { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn-gold::before { background: var(--gold); }
.btn-gold:hover { color: var(--void); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }
.reveal-d5 { transition-delay: 400ms; }

.aurora-bar {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--magenta) 30%, var(--gold) 50%, var(--teal) 70%, transparent 100%);
  opacity: 0.5;
}

.scroll-rail {
  position: fixed; top: 0; left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--magenta), var(--gold), var(--teal));
  width: 0%; z-index: 9000;
  transition: width 60ms linear;
}

[data-cursor="hover"] { cursor: none; }

.section-pad { padding: 120px 0; }
@media (max-width: 760px) { .section-pad { padding: 80px 0; } }

.marquee {
  display: flex; white-space: nowrap; overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0; gap: 60px;
}
.marquee-track { display: flex; gap: 60px; animation: marquee 40s linear infinite; flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee-item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 300;
  color: var(--paper-dim);
  display: flex; align-items: center; gap: 60px;
  letter-spacing: -0.01em;
}
.marquee-item::after { content: "✦"; color: var(--magenta); font-size: 14px; font-style: normal; }

.audio-toggle {
  position: fixed; bottom: 32px; left: 32px;
  z-index: 100;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  background: rgba(7, 6, 11, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--paper);
  cursor: none;
  transition: all 200ms ease;
}
.audio-toggle:hover { border-color: var(--paper); }
.audio-bars { display: flex; gap: 2px; align-items: center; height: 12px; }
.audio-bars span { width: 2px; background: var(--paper); animation: audioBar 1.2s ease-in-out infinite; }
.audio-bars span:nth-child(1) { height: 50%; animation-delay: 0s; }
.audio-bars span:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.audio-bars span:nth-child(3) { height: 70%; animation-delay: 0.4s; }
.audio-bars span:nth-child(4) { height: 90%; animation-delay: 0.6s; }
.audio-paused .audio-bars span { animation-play-state: paused; }
@keyframes audioBar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }

/* Theme variants */
body.theme-paper {
  --bg: var(--paper);
  --fg: var(--void);
  --muted: rgba(7, 6, 11, 0.55);
  --hairline: rgba(7, 6, 11, 0.12);
  --hairline-strong: rgba(7, 6, 11, 0.28);
}
body.theme-paper::before { background: var(--paper); }
body.theme-paper .cosmos-field {
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(217, 180, 91, 0.10), transparent 70%),
    linear-gradient(180deg, #f6f1e7 0%, #f0eadd 50%, #ece4d2 100%);
}
body.theme-paper .cosmos-stars-far,
body.theme-paper .cosmos-stars-mid,
body.theme-paper .cosmos-stars-near,
body.theme-paper .comet,
body.theme-paper .world,
body.theme-paper .nebula-cloud,
body.theme-paper .star-cluster,
body.theme-paper .cosmos-spiral,
body.theme-paper .cosmos-galaxy { display: none; }
body.theme-paper .cosmos-core,
body.theme-paper .cosmos-nebula,
body.theme-paper .cosmos-dust { mix-blend-mode: multiply; opacity: 0.25; }
body.theme-paper .cosmos-grain { mix-blend-mode: multiply; opacity: 0.10; }
body.theme-paper .cosmos-grid {
  background-image:
    linear-gradient(rgba(7, 6, 11, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 6, 11, 0.04) 1px, transparent 1px);
}
body.theme-paper .cosmos-vignette {
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.6) 0%, transparent 12%, transparent 88%, rgba(220, 213, 199, 0.5) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cosmos-core, .cosmos-nebula, .cosmos-dust, .cosmos-stars-far, .cosmos-stars-mid, .cosmos-stars-near,
  .comet, .marquee-track, .audio-bars span, .cosmos-grain { animation: none !important; }
  .reveal { transition-duration: 200ms !important; }
}

body[data-motion="still"] .cosmos-core,
body[data-motion="still"] .cosmos-nebula,
body[data-motion="still"] .cosmos-dust,
body[data-motion="still"] .cosmos-stars-far,
body[data-motion="still"] .cosmos-stars-extra-1,
body[data-motion="still"] .cosmos-stars-extra-2,
body[data-motion="still"] .cosmos-stars-extra-3,
body[data-motion="still"] .cosmos-stars-mid,
body[data-motion="still"] .cosmos-stars-near,
body[data-motion="still"] .cosmos-spiral,
body[data-motion="still"] .world,
body[data-motion="still"] .nebula-cloud,
body[data-motion="still"] .star-cluster,
body[data-motion="still"] .comet,
body[data-motion="still"] .cosmos-grain { animation: none !important; }
body[data-motion="subtle"] .cosmos-nebula { animation-duration: 120s !important; }
body[data-motion="subtle"] .comet { display: none !important; }
body[data-motion="subtle"] .cosmos-grain { animation: none !important; }

body[data-density="compact"] .section-pad { padding: 72px 0; }
body[data-density="airy"] .section-pad { padding: 160px 0; }

::selection { background: var(--magenta); color: var(--paper); }

/* =========================================================
   MOBILE PASS — phone-perfect adjustments
   Universe layer (galaxies, nebulae, clusters) optimized for mobile
   ========================================================= */

/* Tablet & smaller (≤ 900px) — most grids already stack here */
@media (max-width: 900px) {
  .container { padding: 0 24px !important; }
  /* Unstick anything that was made sticky for desktop side-rail layouts */
  [style*="position: sticky"], [style*="position:sticky"] { position: static !important; top: auto !important; }
}

/* Phone (≤ 760px) */
@media (max-width: 760px) {
  body { font-size: 15px; line-height: 1.55; }

  /* === Universe layer — scale down on mobile for performance === */
  .universe-spiral-1, .universe-elliptical,
  .universe-nebula-1, .universe-nebula-2, .universe-nebula-3 {
    transform: scale(0.65) !important;
    transform-origin: center !important;
    opacity: 0.85 !important;
  }
  .star-cluster-1, .star-cluster-2 { transform: scale(0.7) !important; }
  /* Drop the most expensive animations on mobile */
  .cosmos-spiral { animation-duration: 480s !important; }

  /* === NAV: collapse menu, keep brand + EST === */
  nav[style*="position: fixed"] {
    padding: 14px 20px !important;
  }
  nav[style*="position: fixed"] > div:nth-child(2) { display: none !important; } /* center menu */
  nav[style*="position: fixed"] > div:last-child { font-size: 9px !important; }
  nav[style*="position: fixed"] a span.mono-label { font-size: 9px !important; }
  nav[style*="position: fixed"] svg { width: 18px !important; height: 18px !important; }

  /* === HERO === */
  section#top { padding-top: 100px !important; padding-bottom: 80px !important; min-height: auto !important; }
  section#top > div.container > div:first-child { margin-bottom: 12vh !important; flex-direction: column !important; gap: 16px !important; }
  section#top > div.container > div:first-child > div:last-child { text-align: left !important; }

  /* Hero hero-text: kill the giant indent ladder on small screens */
  section#top h1 span[style*="paddingLeft: \"8vw\""],
  section#top h1 span[style*="padding-left: 8vw"] { padding-left: 4vw !important; }
  section#top h1 span[style*="paddingLeft: \"20vw\""],
  section#top h1 span[style*="padding-left: 20vw"] { padding-left: 8vw !important; }
  section#top h1 { font-size: clamp(64px, 18vw, 110px) !important; letter-spacing: -0.04em !important; }

  /* Hero meta column (3-col → 1) */
  .hero-bottom { gap: 28px !important; }
  .hero-bottom > div:last-child { justify-content: flex-start !important; }
  .hero-bottom .btn { width: 100%; justify-content: space-between; padding: 16px 22px; }

  /* Concentric rings — shrink so they stay decorative not dominant */
  section#top > div[style*="min(120vh"] {
    width: min(140vw, 700px) !important;
    height: min(140vw, 700px) !important;
  }

  /* Scroll indicator — hide on mobile */
  section#top > div.container > div[style*="bottom: -20"] { display: none !important; }

  /* === MARQUEE === */
  .marquee { padding: 16px 0 !important; gap: 32px !important; }
  .marquee-track { gap: 32px !important; }
  .marquee-item { font-size: 18px !important; gap: 32px !important; }
  .marquee-item::after { font-size: 10px !important; }

  /* === SECTION PADDING === */
  .section-pad { padding: 64px 0 !important; }

  /* === GRIDS — force single column on phone === */
  .grid-2,
  .wwd-grid,
  .footer-grid,
  [class*="lt-grid"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .hex-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hex-cell { padding: 22px 16px !important; }
  .hex-cell p.display { font-size: 22px !important; }

  /* WWD focus detail panel — reduce padding */
  .wwd-grid > div:last-child { padding: 28px 22px !important; min-height: auto !important; }

  /* Ecosystem table — already compresses to 3 cols at 900, here narrow further */
  .ecosys-header, .ecosys-row { grid-template-columns: 32px 1fr 70px !important; padding: 16px 14px !important; gap: 8px !important; }
  .ecosys-row p.display { font-size: 17px !important; }

  /* WWD list buttons — reduce padding */
  .wwd-list button { padding: 22px 18px !important; gap: 12px !important; grid-template-columns: 28px 1fr 16px !important; }

  /* Long-term cells — tighter */
  .lt-cell { padding: 16px 14px !important; }
  .lt-cell p.display { font-size: 16px !important; }

  /* Investor watermark "Capital" — already responsive but cap it */
  section#investor div[style*="Capital"],
  section#investor > div[style*="font-size: min(40vw"] { font-size: min(60vw, 380px) !important; }

  /* Investor convergence rows — stack icon+label cleanly */
  section#investor div[style*="grid-template-columns: 1fr auto"] { gap: 12px !important; }

  /* Investor right card */
  section#investor [style*="border: 1px solid var(--gold)"] { padding: 28px 22px !important; }

  /* Footer */
  footer { padding-top: 56px !important; padding-bottom: 32px !important; }
  footer > div.container > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; text-align: left !important; }
  footer > div.container > div[style*="text-align: center"] { padding: 28px 0 !important; }

  /* SectionLabel header rows */
  section .container > div:has(> .mono-label) { gap: 12px !important; margin-bottom: 40px !important; padding-bottom: 16px !important; }

  /* === FLOATING UI === */
  .audio-toggle { bottom: 16px !important; left: 16px !important; padding: 8px 11px !important; font-size: 9px !important; }
  .audio-bars { height: 10px !important; }

  /* Hide TweaksPanel on phones — it's a developer/styler tool */
  [class*="tweaks"], [data-tweaks-panel],
  div[style*="position: fixed"][style*="right: 24"][style*="bottom: 80"],
  body > * div[class*="Tweak"] {
    display: none !important;
  }

  /* Larger touch targets */
  a, button, [role="button"] { min-height: 40px; }
  a.btn, button.btn { padding: 14px 20px !important; font-size: 11px !important; }

  /* Reduce backdrop-blur on mobile (perf) */
  [style*="backdrop-filter"] { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
}

/* Small phone (≤ 480px) */
@media (max-width: 480px) {
  .container { padding: 0 18px !important; }
  section#top h1 { font-size: clamp(56px, 19vw, 92px) !important; line-height: 0.9 !important; }
  section#top > div.container > div:first-child { margin-bottom: 10vh !important; }
  .hero-bottom .btn { padding: 14px 18px; font-size: 10px !important; }
  .marquee-item { font-size: 16px !important; }
  .section-pad { padding: 52px 0 !important; }
  .audio-toggle { font-size: 8px !important; padding: 7px 10px !important; }

  /* Universe layer further scaled */
  .universe-spiral-1, .universe-elliptical,
  .universe-nebula-1, .universe-nebula-2, .universe-nebula-3 {
    transform: scale(0.5) !important;
    opacity: 0.75 !important;
  }

  .hex-cell p.display { font-size: 19px !important; }
  .hex-cell { padding: 18px 12px !important; }
  .ecosys-row p.display { font-size: 15px !important; }
}

/* Always — hide TweaksPanel everywhere (production cleanup) */
[class*="tweaks-panel"],
[data-tweaks-panel="true"] {
  display: none !important;
}

/* Smooth touch scrolling + remove tap highlight */
html { -webkit-tap-highlight-color: transparent; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Prevent horizontal scrollbar on any device */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Reduced motion: also disable universe animations */
@media (prefers-reduced-motion: reduce) {
  .universe-spiral-1, .universe-elliptical,
  .universe-nebula-1, .universe-nebula-2, .universe-nebula-3,
  .star-cluster-1, .star-cluster-2,
  .cosmos-stars-extra-1, .cosmos-stars-extra-2, .cosmos-stars-extra-3,
  .cosmos-spiral { animation: none !important; }
}