@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap');

:root {
  --font-display: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-mono: 'Plus Jakarta Sans', monospace;
  --cyan: #d6fbff;
  --blue: #79d9ff;
  --soft: rgba(228, 251, 255, 0.82);
  --dim: rgba(228, 251, 255, 0.48);
  --madre-home-face-image: url('./madre-states/celestial-portrait_front_neutral.png');
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.space, .network, .vignette, .grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.space { z-index: 1; }
.network {
  z-index: 10;
  opacity: 0;
  transition: opacity 1.2s ease;
  mix-blend-mode: screen;
}
.stage.awake .network,
.stage.projects-visible .network { opacity: 0.98; }
.stage.scene-active .network { opacity: 0.15; }

.vignette {
  z-index: 14;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 24%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.65), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.65));
}
.grain {
  z-index: 15;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(rgba(255,255,255,0.58) 0 1px, transparent 1px);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
}

.topbar {
  position: absolute;
  z-index: 40;
  top: 26px;
  left: 34px;
  right: 34px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
.brand span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 22px var(--cyan);
}
.brand strong { font-size: 17px; font-weight: 700; }
.brand em {
  display: block;
  margin-top: 3px;
  margin-left: 20px;
  font-size: 10px;
  letter-spacing: 0.3em;
  font-style: normal;
  color: rgba(233, 252, 255, 0.64);
}
.status {
  margin: 0;
  font: 10px var(--font-display);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(226, 250, 255, 0.76);
}

.left-whisper {
  position: absolute;
  z-index: 26;
  left: 36px;
  top: 34%;
  display: grid;
  gap: 10px;
  color: rgba(234, 252, 255, 0.26);
  font: 11px var(--font-display);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  transition: opacity 0.8s ease;
}
.left-whisper i { width: 84px; height: 1px; background: rgba(233, 252, 255, 0.18); }
.left-whisper small { font-size: 9px; letter-spacing: 0.26em; line-height: 1.8; }
.stage.scene-active .left-whisper { opacity: 0; }

.core-wrap {
  position: absolute;
  z-index: 24;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 430px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  transition: opacity 0.85s ease, filter 0.85s ease, transform 0.85s ease;
}
.stage.sleeping .core-wrap,
.stage.sleeping .core,
.stage.sleeping .sleep-label {
  cursor: pointer;
}
.stage.scene-active .core-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(30px);
  transform: translate(-50%, -50%) scale(0.66);
}

.core {
  position: relative;
  width: 318px;
  height: 318px;
  border-radius: 50%;
  filter: drop-shadow(0 0 80px rgba(156, 239, 255, 0.92));
  opacity: 0.18;
  transform: scale(0.78);
  transition: opacity 1.6s ease, transform 1.6s ease, filter 1.6s ease;
  animation: coreBreath 4.8s ease-in-out infinite;
  animation-play-state: running;
}
.stage.awakening .core,
.stage.awake .core,
.stage.projects-visible .core {
  opacity: 1;
  transform: scale(1);
}

.sphere { position: absolute; inset: 0; border-radius: 50%; }
.sphere.base {
  background: radial-gradient(circle at 43% 34%, #fff 0 6%, #e8fdff 12%, rgba(114, 228, 255, 0.84) 24%, rgba(20, 78, 128, 0.36) 48%, rgba(4, 13, 31, 0.8) 70%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow:
    inset -40px -48px 86px rgba(0, 8, 26, 0.94),
    inset 20px 18px 42px rgba(255, 255, 255, 0.18),
    0 0 90px rgba(118, 226, 255, 0.68),
    0 0 220px rgba(55, 148, 255, 0.24);
}
.sphere.currents {
  inset: 6%;
  background: conic-gradient(from 100deg, rgba(255,255,255,0.84), rgba(88, 223, 255, 0.08), rgba(255,255,255,0.74), rgba(55,147,255,0.16), rgba(255,255,255,0.9));
  mix-blend-mode: screen;
  filter: blur(5px);
  animation: spin 14s linear infinite;
}
.sphere.clouds {
  inset: 12%;
  background:
    radial-gradient(circle at 36% 34%, rgba(255,255,255,0.96), transparent 18%),
    radial-gradient(circle at 66% 54%, rgba(164, 241, 255, 0.7), transparent 32%),
    radial-gradient(circle at 40% 72%, rgba(62, 160, 255, 0.54), transparent 38%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: clouds 8s ease-in-out infinite;
}
.sphere.glass {
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.34), transparent 18%),
    radial-gradient(circle at 60% 62%, transparent 40%, rgba(0,0,0,0.42) 78%);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.14);
}
.sphere.heart {
  inset: 32%;
  background: radial-gradient(circle, #fff 0 12%, rgba(216,253,255,0.96) 20%, rgba(132,236,255,0.18) 56%, transparent 74%);
  animation: heart 2.3s ease-in-out infinite;
}
.sphere.point {
  inset: 46%;
  background: #fff;
  box-shadow: 0 0 26px #fff, 0 0 74px var(--cyan), 0 0 144px #58deff;
}

.home-orb-face {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transform: scale(.96);
}
.stage.awakening .home-orb-face,
.stage.awake .home-orb-face,
.stage.projects-visible .home-orb-face {
  opacity: .72;
  transform: scale(1);
}
.home-face-layer {
  position: absolute;
  inset: -8%;
  background-image: var(--madre-home-face-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 34%;
  transform: scale(1.08);
}
.home-face-layer.base {
  opacity: .31;
  filter: grayscale(.08) sepia(.14) saturate(.7) brightness(1.08) contrast(1.08) blur(12px);
  mask-image:
    radial-gradient(circle at 50% 48%, rgba(0,0,0,.98) 0 31%, rgba(0,0,0,.46) 45%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.88) 22%, rgba(0,0,0,.95) 82%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle at 50% 48%, rgba(0,0,0,.98) 0 31%, rgba(0,0,0,.46) 45%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.88) 22%, rgba(0,0,0,.95) 82%, transparent 100%);
  -webkit-mask-composite: source-in;
}
.home-face-layer.features {
  opacity: .54;
  filter: grayscale(.04) sepia(.2) saturate(.84) brightness(1.18) contrast(1.18) blur(3px);
  background-position: center 32%;
  mask-image:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,.95) 0 18%, rgba(0,0,0,.7) 26%, transparent 40%),
    radial-gradient(circle at 50% 54%, rgba(0,0,0,.88) 0 12%, transparent 24%),
    radial-gradient(circle at 50% 68%, rgba(0,0,0,.62) 0 10%, transparent 20%);
  -webkit-mask-image:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,.95) 0 18%, rgba(0,0,0,.7) 26%, transparent 40%),
    radial-gradient(circle at 50% 54%, rgba(0,0,0,.88) 0 12%, transparent 24%),
    radial-gradient(circle at 50% 68%, rgba(0,0,0,.62) 0 10%, transparent 20%);
}
.home-face-layer.halo {
  inset: -14%;
  opacity: .36;
  filter: blur(16px) brightness(1.1);
  background-size: 112%;
  background-position: center 28%;
  mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,.86) 0 32%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,.86) 0 32%, transparent 60%);
}
.home-face-silk {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.06), transparent 18%),
    linear-gradient(180deg, rgba(214,251,255,.06), transparent 26%, transparent 74%, rgba(255,255,255,.05)),
    radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.28) 100%);
  mix-blend-mode: screen;
  backdrop-filter: blur(1px);
}

.power {
  position: absolute;
  z-index: 30;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: radial-gradient(circle, rgba(255,255,255,0.06), rgba(12,26,46,0.48));
  box-shadow: 0 0 28px rgba(255,255,255,0.62), 0 0 86px rgba(156,239,255,0.38), inset 0 0 22px rgba(255,255,255,0.26);
  cursor: pointer;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.power span {
  position: absolute;
  left: 50%;
  top: 21px;
  width: 2px;
  height: 24px;
  background: #fff;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 0 12px #fff;
}
.power::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: transparent;
}
.power:hover { transform: scale(1.08); }
.stage.power-consumed .power,
.stage.awakening .power,
.stage.awake .power,
.stage.projects-visible .power,
.stage.scene-active .power { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.55); }

.sleep-label {
  position: absolute;
  margin-top: 388px;
  text-align: center;
  color: rgba(236,252,255,0.46);
  font: 10px var(--font-display);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.project-names {
  position: absolute;
  inset: -30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.stage.projects-visible .project-names { opacity: 1; pointer-events: auto; }
.project-name {
  position: absolute;
  left: 50%;
  top: 50%;
  --project-x: 0px;
  --project-y: 0px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
  font: 11px var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 12px;
  text-shadow: 0 0 18px rgba(112,213,255,.8), 0 0 40px rgba(80,180,255,.4);
  opacity: 0;
  pointer-events: none;
  filter: blur(14px);
  transform: translate3d(-50%, -50%, 0) scale(0.18);
  transform-origin: center center;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Project name buttons with celeste gradient — dark text */
.stage.projects-visible .project-name,
.stage.awake .project-name {
  color: #04090f;
  text-shadow: none;
  font-weight: 600;
}
.project-name.is-arming {
  opacity: 0.22;
  filter: blur(10px);
  transform: translate3d(-50%, -50%, 0) scale(0.28);
}
.project-name.is-traveling,
.project-name.is-arrived {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(calc(-50% + var(--project-x)), calc(-50% + var(--project-y)), 0) scale(1);
}
.project-name.is-arrived { pointer-events: auto; }
.project-name:hover {
  color: #fff;
  text-shadow: 0 0 38px rgba(168, 244, 255, 0.76);
}
.project-name.is-arrived:hover {
  transform: translate3d(calc(-50% + var(--project-x)), calc(-50% + var(--project-y) - 2px), 0) scale(1.03);
}
.project-name.supra { --project-x: -246px; --project-y: -124px; }
.project-name.odi { --project-x: 246px; --project-y: -124px; }
.project-name.access { --project-x: -278px; --project-y: 124px; }
.project-name.cps { --project-x: 278px; --project-y: 124px; }
.project-name.madre { --project-x: 0px; --project-y: 228px; }

.voice-panel {
  position: absolute;
  z-index: 32;
  left: 50%;
  bottom: 98px;
  width: min(760px, 88vw);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.voice-line {
  min-height: 82px;
  margin: 0;
  color: rgba(245,253,255,0.95);
  text-shadow: 0 0 24px rgba(134, 227, 255, 0.54), 0 0 60px rgba(52, 141, 255, 0.22);
  font: clamp(16px, 1.5vw, 24px) var(--font-display);
  letter-spacing: 0.12em;
  line-height: 1.55;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.voice-line.show { opacity: 1; transform: translateY(0); }
.word { display: inline-block; opacity: 0; animation: wordRise 0.45s ease forwards; }

.footer-note {
  position: absolute;
  z-index: 42;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: auto;
  padding: 15px 24px 18px;
  background: linear-gradient(180deg, transparent, rgba(0, 5, 12, 0.94));
  border-top: 1px solid rgba(200, 248, 255, 0.12);
  font: 9px var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: auto;
  backdrop-filter: blur(14px);
}
.footer-note a {
  pointer-events: auto;
  color: rgba(220,248,255,0.74);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}
.footer-note a:hover {
  color: #fff;
  text-shadow: 0 0 18px rgba(190, 247, 255, 0.74);
  transform: translateY(-1px);
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 18;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(18px);
  transition: opacity 1s ease, filter 1s ease, visibility 1s ease;
  background: radial-gradient(circle at 50% 45%, rgba(10, 36, 60, 0.26), rgba(0,0,0,0.75) 55%, #000 100%);
}
.stage.odi-active .odi-scene,
.stage.supra-active .supra-scene,
.stage.cps-active .cps-scene,
.stage.access-active .access-scene,
.stage.madre-active .madre-scene {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
}
.scene-stars {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.56) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 20%, rgba(185,220,255,0.42) 0 1px, transparent 1px),
    radial-gradient(circle at 55% 60%, rgba(64,130,255,0.12), transparent 44%),
    transparent;
  background-size: 180px 180px, 300px 300px, 100% 100%;
  animation: starsDrift 30s linear infinite;
}

.body-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.02);
  transform-origin: center center;
  opacity: 0;
  filter: blur(34px) brightness(2.15);
  cursor: pointer;
}
.stage.odi-active #odiReturn,
.stage.supra-active #supraReturn,
.stage.cps-active #cpsReturn,
.stage.access-active #accessReturn {
  opacity: 1;
  animation: bodyBirth 2.2s cubic-bezier(0.12, 0.82, 0.16, 1) both;
}
.round-shell {
  width: min(168vmax, 2300px);
  height: min(168vmax, 2300px);
  border-radius: 50%;
  overflow: hidden;
}
#odiReturn { animation-name: earthBirth; }
#supraReturn { animation-name: moonBirth; }
#cpsReturn { animation-name: marsBirth; }
#accessReturn {
  width: min(188vmax, 2700px);
  height: min(188vmax, 2700px);
  animation-name: asteroidBirth;
}
.body-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: spinSlow 84s linear infinite;
  filter: saturate(1.08) contrast(1.06) brightness(1);
}
#supraReturn .body-image { animation-duration: 96s; }
#cpsReturn .body-image { animation-duration: 88s; }

.body-glow {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 248, 255, 0.18), rgba(84, 176, 255, 0.08) 36%, transparent 72%);
  filter: blur(28px);
}
.body-shade {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, transparent 0 34%, rgba(0,0,0,0.22) 58%, rgba(0,0,0,0.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.04) 42%, rgba(0,0,0,0.66) 78%, #000 100%);
}

.asteroid-shell { overflow: hidden; }
.asteroid-image {
  object-fit: cover;
  animation: asteroidDrift 34s ease-in-out infinite alternate;
  filter: contrast(1.05) brightness(0.96);
}
.asteroid-glow {
  inset: -18%;
  border-radius: 50%;
}
.asteroid-mask {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 48%, transparent 0 38%, rgba(0, 0, 0, 0.08) 58%, rgba(0,0,0,0.86) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.84), transparent 20%, transparent 80%, rgba(0,0,0,0.84)),
    linear-gradient(180deg, rgba(0,0,0,0.84), transparent 20%, transparent 80%, rgba(0,0,0,0.84));
}

.debris-field { position: absolute; inset: -7%; }
.debris {
  position: absolute;
  width: 11px;
  height: 3px;
  border-radius: 999px;
  background: rgba(230, 242, 252, 0.82);
  box-shadow: 0 0 12px rgba(198, 242, 255, 0.32);
  animation: debrisFloat 11s ease-in-out infinite;
}
.debris-a{top:20%;left:14%;width:18px;height:5px}.debris-b{top:28%;left:30%;animation-delay:1s}.debris-c{top:42%;left:8%;width:24px;height:7px}.debris-d{top:18%;right:24%;animation-delay:2s}.debris-e{top:54%;left:18%;width:12px}.debris-f{top:62%;left:36%;width:15px;height:5px}.debris-g{top:72%;left:20%;animation-delay:3s}.debris-h{top:36%;right:30%;width:13px}.debris-i{top:58%;right:20%;width:7px}.debris-j{top:22%;left:48%;width:34px;height:8px}.debris-k{top:46%;left:62%;width:6px;height:6px}.debris-l{top:70%;left:52%;width:44px;height:7px}

.meteor-field span {
  position: absolute;
  left: -18vw;
  width: 180px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), rgba(255,174,102,0.85));
  animation: meteor 5s linear infinite;
}
.meteor-field span:nth-child(1){top:22%}
.meteor-field span:nth-child(2){top:34%;animation-delay:1s}
.meteor-field span:nth-child(3){top:46%;animation-delay:2s}
.meteor-field span:nth-child(4){top:58%;animation-delay:3s}
.meteor-field span:nth-child(5){top:70%;animation-delay:4s}
.meteor-field span:nth-child(6){top:78%;animation-delay:2.5s}

.scene-copy {
  position: absolute;
  z-index: 25;
  width: min(460px, 36vw);
  padding: 26px 28px;
  border-left: 1px solid rgba(193, 235, 255, 0.34);
  background: linear-gradient(90deg, rgba(0, 10, 22, 0.78), rgba(0, 10, 22, 0.18));
  backdrop-filter: blur(10px);
}
.left-copy {
  left: 6vw;
  top: 48%;
  transform: translateY(-50%);
}
.center-copy {
  left: 50%;
  top: 50%;
  width: min(640px, 80vw);
  transform: translate(-50%, -50%);
  text-align: center;
  border-left: 0;
  background: radial-gradient(circle, rgba(0, 12, 24, 0.82), rgba(0, 12, 24, 0.24));
}
.scene-text {
  margin: 0;
  white-space: pre-line;
  color: rgba(245,252,255,0.96);
  text-shadow: 0 0 18px rgba(100,190,255,0.54), 0 0 62px rgba(44,126,255,0.18);
  font: clamp(18px, 1.65vw, 30px) var(--font-display);
  line-height: 1.38;
  letter-spacing: 0.13em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scene-text.show { opacity: 1; transform: translateY(0); }

.scene-back {
  position: absolute;
  z-index: 30;
  top: 92px;
  left: 34px;
  padding: 13px 18px;
  border: 1px solid rgba(220, 246, 255, 0.32);
  background: rgba(2, 8, 18, 0.56);
  color: rgba(236,250,255,0.92);
  font: 10px var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.scene-downloads {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: min(1020px, 92vw);
}
.scene-downloads a {
  min-width: 168px;
  padding: 14px 18px;
  text-align: center;
  border: 1px solid rgba(180, 228, 255, 0.28);
  background: rgba(0, 14, 30, 0.62);
  color: rgba(240,252,255,0.94);
  font: 10px var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 0 34px rgba(70,164,255,0.09);
  backdrop-filter: blur(10px);
}
.scene-downloads a:hover { background: rgba(28, 74, 112, 0.68); }

.madre-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(170, 244, 255, 0.18), rgba(56, 146, 255, 0.06) 28%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), transparent 18%),
    transparent;
}

@keyframes spin { to { transform: rotate(1turn); } }
@keyframes spinSlow { to { transform: rotate(1turn); } }
@keyframes clouds { 50% { transform: translate(2%, -1%) scale(1.08) rotate(8deg); opacity: 0.96; } }
@keyframes heart { 50% { transform: scale(1.2); opacity: 0.8; } }
@keyframes wordRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coreBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 90px rgba(142, 236, 255, 0.98));
  }
  50% {
    transform: scale(1.155);
    filter: drop-shadow(0 0 195px rgba(220, 254, 255, 1));
  }
}
@keyframes starsDrift { to { background-position: 180px 90px, -300px 120px, center; } }
@keyframes bodyBirth {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.02); filter: blur(34px) brightness(2.15); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(0.72); filter: blur(10px) brightness(1.18); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1); }
}
@keyframes earthBirth {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.02); filter: blur(36px) brightness(2.2); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(0.72); filter: blur(10px) brightness(1.16); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1); }
}
@keyframes moonBirth {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.02); filter: blur(36px) brightness(2.3) contrast(1.1); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(0.72); filter: blur(10px) brightness(1.18) contrast(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1) contrast(1); }
}
@keyframes marsBirth {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.02); filter: blur(36px) brightness(2.25) saturate(1.28); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(0.72); filter: blur(10px) brightness(1.18) saturate(1.18); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1) saturate(1.08); }
}
@keyframes asteroidBirth {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.02) rotate(-5deg); filter: blur(36px) brightness(2.15); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(0.72) rotate(-2deg); filter: blur(10px) brightness(1.18); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: blur(0) brightness(1); }
}
@keyframes debrisFloat { 50% { transform: translate(28px, -18px) rotate(12deg); opacity: 0.52; } }
@keyframes meteor {
  0% { opacity: 0; transform: translateX(0) rotate(12deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120vw) rotate(12deg); }
}
@keyframes asteroidDrift {
  0% { transform: scale(1.06) rotate(-5deg) translate(-2%, 1%); }
  100% { transform: scale(1.16) rotate(5deg) translate(2%, -1%); }
}

@media (max-width: 980px) {
  .footer-note { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 8px; gap: 8px; padding-bottom: 12px; }
  .scene-copy { width: min(420px, 88vw); }
  .left-copy { left: 5vw; top: 28%; }
  .scene-downloads { bottom: 82px; flex-direction: column; }
  .project-name.supra { --project-x: -196px; --project-y: -114px; }
  .project-name.odi { --project-x: 196px; --project-y: -114px; }
  .project-name.access { --project-x: -218px; --project-y: 112px; }
  .project-name.cps { --project-x: 218px; --project-y: 112px; }
  .project-name.madre { --project-x: 0px; --project-y: 202px; }
}

@media (max-width: 760px) {
  .topbar { left: 16px; right: 16px; top: 16px; }
  .left-whisper { display: none; }
  .core-wrap { width: 310px; height: 310px; }
  .core { width: 238px; height: 238px; }
  .sleep-label { margin-top: 285px; font-size: 8px; }
  .voice-panel { bottom: 150px; }
  .voice-line { min-height: 62px; font-size: 14px; }
  .project-name { font-size: 9px; }
  .project-name.supra { --project-x: -104px; --project-y: -114px; }
  .project-name.odi { --project-x: 104px; --project-y: -114px; }
  .project-name.access { --project-x: -112px; --project-y: 112px; }
  .project-name.cps { --project-x: 112px; --project-y: 112px; }
  .project-name.madre { --project-x: 0px; --project-y: 188px; }
  .scene-back { top: 72px; left: 16px; }
  .center-copy { width: 88vw; }
  .round-shell { width: min(210vmax, 2300px); height: min(210vmax, 2300px); }
  #accessReturn { width: min(220vmax, 2700px); height: min(220vmax, 2700px); }
}


/* === ULTRA PREMIUM PASS === */
:root {
  --parallax-x: 0px;
  --parallax-y: 0px;
}

.stage::before,
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 13;
}
.stage::before {
  background:
    radial-gradient(circle at 50% 47%, rgba(163, 238, 255, 0.10), transparent 22%),
    radial-gradient(circle at 32% 28%, rgba(68, 164, 255, 0.10), transparent 24%),
    radial-gradient(circle at 70% 66%, rgba(91, 114, 255, 0.10), transparent 22%);
  mix-blend-mode: screen;
}
.stage::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 16%, transparent 84%, rgba(0,0,0,0.18));
}

.topbar {
  padding: 12px 14px;
  border: 1px solid rgba(200, 241, 255, 0.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(6, 14, 28, 0.50), rgba(6, 14, 28, 0.16));
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.brand strong {
  text-shadow: 0 0 16px rgba(160, 238, 255, 0.24);
}
.status {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215, 247, 255, 0.12);
  background: rgba(255,255,255,0.03);
}

.core-wrap {
  transform: translate(calc(-50% + var(--parallax-x) * 0.06), calc(-50% + var(--parallax-y) * 0.06));
}
.stage.scene-active .core-wrap {
  transform: translate(calc(-50% + var(--parallax-x) * 0.06), calc(-50% + var(--parallax-y) * 0.06)) scale(0.66);
}
.core {
  box-shadow: 0 0 0 1px rgba(214, 251, 255, 0.08), 0 0 120px rgba(83, 203, 255, 0.12);
}

.project-name {
  border: 1px solid rgba(206, 243, 255, 0.10);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.52), rgba(8, 18, 34, 0.12));
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.project-name::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(214, 251, 255, 0.92);
  box-shadow: 0 0 12px rgba(214, 251, 255, 0.8);
  vertical-align: middle;
}
.project-name:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(206, 243, 255, 0.28);
  background: linear-gradient(180deg, rgba(18, 44, 72, 0.70), rgba(8, 24, 46, 0.28));
}

.voice-panel.is-visible {
  opacity: 1;
  visibility: visible;
  width: min(880px, 92vw);
  padding: 18px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(6, 14, 28, 0.58), rgba(6, 14, 28, 0.16));
  border: 1px solid rgba(206, 243, 255, 0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  transform: translateX(calc(-50% + var(--parallax-x) * 0.04));
}

.footer-note {
  border-top: 1px solid rgba(200, 248, 255, 0.12);
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, transparent, rgba(0, 5, 12, 0.94));
}
.footer-note a {
  padding: 0;
  border-radius: 0;
}
.footer-note a:hover {
  background: transparent;
  transform: translateY(-1px);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 48%, rgba(33, 113, 255, 0.08), transparent 26%),
    radial-gradient(circle at 32% 52%, rgba(160, 235, 255, 0.08), transparent 18%);
  pointer-events: none;
}
.scene-copy {
  border-left: 1px solid rgba(193, 235, 255, 0.24);
  border-radius: 0 22px 22px 0;
  background: linear-gradient(90deg, rgba(2, 12, 24, 0.84), rgba(2, 12, 24, 0.34));
  box-shadow: 0 24px 52px rgba(0,0,0,0.24);
  transform: translateY(-50%) translateX(calc(var(--parallax-x) * -0.04));
}
.center-copy {
  border-radius: 24px;
  transform: translate(calc(-50% + var(--parallax-x) * -0.03), calc(-50% + var(--parallax-y) * -0.03));
}
.scene-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(214,251,255,0.92), rgba(74,184,255,0.12));
  box-shadow: 0 0 16px rgba(214,251,255,0.42);
}
.center-copy::before { display: none; }
.scene-text {
  text-wrap: balance;
  text-shadow: 0 0 26px rgba(100,190,255,0.42), 0 0 74px rgba(44,126,255,0.18);
}

.scene-back,
.scene-downloads a {
  border-radius: 999px;
  backdrop-filter: blur(14px);
}
.scene-back {
  box-shadow: 0 16px 38px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.scene-back:hover {
  transform: translateY(-2px);
  background: rgba(18, 34, 58, 0.76);
  border-color: rgba(220, 246, 255, 0.46);
}
.scene-downloads {
  gap: 14px;
}
.scene-downloads a {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 14, 30, 0.70), rgba(0, 14, 30, 0.36));
  box-shadow: 0 16px 34px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(255,255,255,0.03);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.scene-downloads a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,0.15) 48%, transparent 62% 100%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
.scene-downloads a:hover {
  transform: translateY(-3px);
  border-color: rgba(180, 228, 255, 0.42);
  background: linear-gradient(180deg, rgba(20, 54, 90, 0.82), rgba(8, 28, 52, 0.54));
  box-shadow: 0 18px 42px rgba(0,0,0,0.24), 0 0 40px rgba(88, 192, 255, 0.08);
}
.scene-downloads a:hover::after {
  transform: translateX(120%);
}

.round-shell,
.asteroid-shell {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 80px rgba(96, 179, 255, 0.16),
    0 40px 120px rgba(0,0,0,0.42);
}
.body-image {
  will-change: transform;
}
.body-glow {
  opacity: 0.86;
}
.asteroid-mask {
  background:
    radial-gradient(circle at 52% 48%, transparent 0 34%, rgba(0, 0, 0, 0.10) 52%, rgba(0,0,0,0.92) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.92), transparent 22%, transparent 78%, rgba(0,0,0,0.92)),
    linear-gradient(180deg, rgba(0,0,0,0.92), transparent 22%, transparent 78%, rgba(0,0,0,0.92));
}

.scene-stars {
  filter: saturate(1.12);
}

@media (max-width: 760px) {
  .topbar {
    padding: 10px 10px;
    border-radius: 14px;
  }
  .voice-panel {
    padding: 14px 16px;
    border-radius: 18px;
  }
  .scene-copy {
    transform: translateY(-50%);
  }
}

/* === FINAL HOTFIX: footer restored, scene voice panel hidden, stronger MADRE breath === */
.stage.scene-active .voice-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.footer-note {
  position: absolute !important;
  z-index: 22 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: auto !important;
  padding: 15px 24px 18px !important;
  background: linear-gradient(180deg, transparent, rgba(0, 5, 12, 0.94)) !important;
  border-top: 1px solid rgba(200, 248, 255, 0.12) !important;
  pointer-events: auto !important;
  backdrop-filter: blur(14px) !important;
  font: 9px var(--font-display) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.footer-note a {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  color: rgba(220, 248, 255, 0.72) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.footer-note a:hover {
  color: #fff !important;
  background: none !important;
  transform: none !important;
  text-shadow: 0 0 18px rgba(190, 247, 255, 0.64) !important;
}

.scene-downloads {
  z-index: 34 !important;
  bottom: 110px !important;
}

.scene-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.scene-links-center {
  justify-content: center;
}

.scene-links a {
  min-height: 50px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(198, 239, 255, 0.18);
  background: linear-gradient(180deg, rgba(6, 18, 32, 0.84), rgba(6, 18, 32, 0.34));
  color: rgba(245, 252, 255, 0.94);
  font: 10px var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.scene-links a:hover {
  transform: translateY(-3px);
  border-color: rgba(206, 243, 255, 0.34);
  background: linear-gradient(180deg, rgba(18, 48, 78, 0.82), rgba(8, 26, 48, 0.52));
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.24);
}

.scene-launch {
  color: #07121d !important;
  background: linear-gradient(135deg, rgba(222, 248, 255, 1), rgba(123, 220, 255, 0.96)) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: 0 20px 46px rgba(106, 204, 255, 0.22) !important;
}

.scene-launch:hover {
  background: linear-gradient(135deg, rgba(240, 252, 255, 1), rgba(146, 228, 255, 0.98)) !important;
}

.odi-scene .scene-links a,
.odi-scene .scene-downloads a {
  border-color: rgba(99, 229, 255, 0.24);
  box-shadow: 0 18px 36px rgba(33, 86, 145, 0.16);
}

.odi-scene .scene-launch {
  background: linear-gradient(135deg, #7cecff, #dff7ff) !important;
}

.supra-scene .scene-links a,
.supra-scene .scene-downloads a {
  border-color: rgba(244, 213, 157, 0.24);
  box-shadow: 0 18px 36px rgba(74, 56, 29, 0.16);
}

.supra-scene .scene-launch {
  background: linear-gradient(135deg, #ffe6b7, #fff5de) !important;
}

.cps-scene .scene-links a,
.cps-scene .scene-downloads a {
  border-color: rgba(255, 162, 109, 0.24);
  box-shadow: 0 18px 36px rgba(108, 38, 17, 0.18);
}

.cps-scene .scene-launch {
  background: linear-gradient(135deg, #ffc98f, #ffe7c3) !important;
}

.access-scene .scene-links a,
.access-scene .scene-downloads a {
  border-color: rgba(109, 241, 210, 0.24);
  box-shadow: 0 18px 36px rgba(18, 77, 68, 0.18);
}

.access-scene .scene-launch {
  background: linear-gradient(135deg, #7df1d5, #effdff) !important;
}

.madre-scene .scene-links a,
.madre-scene .scene-downloads a {
  border-color: rgba(214, 251, 255, 0.24);
}

.madre-copy {
  top: 34% !important;
  width: min(760px, 84vw) !important;
  padding: 30px 34px !important;
}

.madre-downloads {
  bottom: 126px !important;
  width: min(1080px, 88vw) !important;
}

.madre-downloads a {
  min-width: min(220px, 42vw);
}

.core {
  animation: coreBreath 3.8s ease-in-out infinite !important;
}

.stage.awakening .core,
.stage.awake .core,
.stage.projects-visible .core {
  opacity: 1 !important;
}

.sphere.heart {
  animation: heart 1.85s ease-in-out infinite !important;
}

@keyframes coreBreath {
  0%, 100% {
    transform: scale(0.96);
    filter: drop-shadow(0 0 92px rgba(142, 236, 255, 0.96));
  }
  50% {
    transform: scale(1.16);
    filter: drop-shadow(0 0 190px rgba(220, 254, 255, 1));
  }
}

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

@media (max-width: 980px) {
  .footer-note {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    font-size: 8px !important;
    padding: 12px 16px 14px !important;
  }
  .scene-downloads {
    bottom: 92px !important;
  }
  .madre-copy {
    top: 32% !important;
  }
  .madre-downloads {
    bottom: 96px !important;
  }
}

@media (max-width: 760px) {
  .scene-links {
    justify-content: center;
  }
  .madre-copy {
    top: 28% !important;
    width: 90vw !important;
    padding: 24px 20px !important;
  }
}

/* FINAL POLISH PASS */
.madre-copy {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.madre-copy::before {
  display: none !important;
}

.madre-copy .scene-text {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(14px, 1.15vw, 20px) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 18px rgba(100,190,255,0.22), 0 0 42px rgba(44,126,255,0.10) !important;
}

.madre-copy .scene-links {
  margin-top: 18px;
}

/* === ACTIVATE UPDATE — 20260515 === */

/* Institutional tagline — visible sleeping, fades on wake */
.institutional-tagline {
  position: absolute;
  z-index: 28;
  left: 50%;
  top: calc(50% + 230px);
  transform: translateX(-50%);
  width: min(580px, 80vw);
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s ease;
}
.institutional-tagline p {
  margin: 0;
  font: 11px var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 250, 255, 0.38);
  line-height: 1.9;
}
.stage.awakening .institutional-tagline,
.stage.awake .institutional-tagline,
.stage.projects-visible .institutional-tagline,
.stage.scene-active .institutional-tagline {
  opacity: 0;
}

.home-direct-links {
  position: absolute;
  z-index: 29;
  left: 50%;
  top: calc(50% + 316px);
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 72px));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.home-direct-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(214, 251, 255, 0.18);
  background: rgba(7, 14, 24, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  color: rgba(232, 249, 255, 0.78);
  font: 10px var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.home-direct-link:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: rgba(214, 251, 255, 0.46);
  background: rgba(14, 28, 44, 0.72);
}
.stage.awakening .home-direct-links,
.stage.awake .home-direct-links,
.stage.projects-visible .home-direct-links,
.stage.scene-active .home-direct-links {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

.home-human-signal {
  position: absolute;
  z-index: 30;
  right: 34px;
  top: 118px;
  width: min(350px, calc(100vw - 68px));
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.human-signal-anchor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 18px 18px 20px;
  border-radius: 26px;
  border: 1px solid rgba(214, 251, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(11, 20, 31, 0.74), rgba(5, 12, 20, 0.52)),
    radial-gradient(circle at 82% 26%, rgba(214, 177, 106, 0.16), transparent 34%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 18px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}
.human-signal-copy {
  min-width: 0;
}
.human-signal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(214, 251, 255, 0.58);
  font: 10px var(--font-display);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.human-signal-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(214, 177, 106, 0.86);
  box-shadow: 0 0 18px rgba(214, 177, 106, 0.62);
}
.human-signal-copy h2 {
  margin: 10px 0 8px;
  font: 500 clamp(20px, 2vw, 24px) var(--font-display);
  letter-spacing: 0.02em;
  color: rgba(244, 251, 255, 0.96);
}
.human-signal-copy p {
  margin: 0;
  color: rgba(219, 241, 255, 0.62);
  font: 11px/1.7 var(--font-display);
  letter-spacing: 0.06em;
}
.human-signal-portraits {
  position: relative;
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
}
.human-chip {
  position: absolute;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(214, 251, 255, 0.28), rgba(7, 16, 24, 0.96));
  border: 1px solid rgba(214, 251, 255, 0.24);
  box-shadow: 0 0 26px rgba(139, 212, 255, 0.12);
}
.human-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02) brightness(0.94);
}
.human-chip.maria {
  width: 62px;
  height: 62px;
  left: 28px;
  top: 28px;
  z-index: 2;
  border-color: rgba(214, 177, 106, 0.42);
  box-shadow: 0 0 32px rgba(214, 177, 106, 0.18), 0 0 42px rgba(139, 212, 255, 0.12);
}
.human-chip.samira { width: 34px; height: 34px; left: 0; top: 8px; }
.human-chip.thiago { width: 30px; height: 30px; right: 6px; top: 2px; }
.human-chip.claire { width: 28px; height: 28px; left: 6px; bottom: 16px; }
.human-chip.elias { width: 26px; height: 26px; right: 0; bottom: 20px; }
.human-chip.lina { width: 22px; height: 22px; right: 22px; bottom: 0; }
.human-signal-anchor:hover {
  border-color: rgba(214, 251, 255, 0.24);
}
.human-signal-anchor:hover .human-chip.maria {
  transform: scale(1.03);
}
.human-signal-anchor:hover .human-chip img {
  filter: saturate(0.98) contrast(1.04) brightness(0.98);
}
.stage.awakening .home-human-signal,
.stage.awake .home-human-signal,
.stage.projects-visible .home-human-signal,
.stage.scene-active .home-human-signal {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

@media (max-width: 900px) {
  .home-human-signal {
    right: 20px;
    top: 96px;
    width: min(320px, calc(100vw - 40px));
  }
  .human-signal-anchor {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .human-signal-portraits {
    width: 104px;
    height: 104px;
  }
  .home-direct-links {
    top: calc(50% + 300px);
    width: min(92vw, 560px);
    gap: 10px;
  }
  .home-direct-link {
    flex: 1 1 180px;
    min-height: 40px;
    padding: 10px 14px;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 620px) {
  .institutional-tagline {
    top: calc(50% + 214px);
    width: min(92vw, 420px);
  }
  .home-human-signal {
    left: 50%;
    right: auto;
    top: 92px;
    transform: translateX(-50%);
    width: min(92vw, 380px);
  }
  .human-signal-anchor {
    padding: 16px 16px 16px 18px;
  }
  .human-signal-copy h2 {
    font-size: 20px;
  }
  .home-direct-links {
    top: calc(50% + 292px);
    width: min(92vw, 420px);
  }
  .home-direct-link {
    flex-basis: calc(50% - 8px);
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}

/* Footer — 6-col with about link */
.footer-about-link {
  color: rgba(220, 248, 255, 0.92) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
}
.footer-about-link:hover {
  color: #fff !important;
  text-shadow: 0 0 22px rgba(190, 247, 255, 0.8) !important;
}

/* Left whisper — foundation line */
.left-whisper small {
  color: rgba(234, 252, 255, 0.18);
  line-height: 1.7;
}

/* ============================================================
   MADRE SCENE — 2026-05-16 redesign
   ============================================================ */

/* Info panel — left, low opacity, reveals on hover */
.madre-info-panel {
  position: absolute;
  z-index: 25;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, 28vw);
  padding: 28px 26px;
  border-left: 1px solid rgba(193,235,255,.22);
  background: linear-gradient(90deg,rgba(0,8,18,.72),rgba(0,8,18,.12));
  backdrop-filter: blur(10px);
  opacity: .22;
  transition: opacity .5s ease;
}
.madre-info-panel:hover { opacity: 1; }
.madre-info-panel .scene-text {
  font: clamp(13px,1.1vw,17px) var(--font-body);
  letter-spacing: .04em;
  line-height: 1.7;
  white-space: pre-line;
  color: rgba(230,248,255,.88);
  opacity: 1;
  transform: none;
}
.madre-info-panel .scene-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}
.madre-info-panel .scene-links a {
  font: 10px var(--font-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(230,248,255,.96);
  padding: 10px 14px;
  border: 1px solid rgba(180,230,255,.36);
  background: rgba(0,20,36,.72);
  transition: background .2s, color .2s;
}
.madre-info-panel .scene-links a:hover {
  background: rgba(20,60,100,.52);
  color: rgba(220,248,255,.96);
}
.madre-info-panel .madre-primary-cta {
  min-height: 54px;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(228, 249, 255, 1), rgba(137, 224, 255, .98)) !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: 0 18px 42px rgba(82, 180, 226, .22);
  color: #050b12 !important;
  text-shadow: none !important;
}
.madre-info-panel .madre-primary-cta:hover {
  background: linear-gradient(135deg, rgba(242, 252, 255, 1), rgba(162, 232, 255, 1)) !important;
  color: #02070c !important;
}
.madre-secondary-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(190, 232, 255, .12);
}
.madre-info-panel .madre-secondary-cta {
  min-height: 42px;
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(214,236,248,.74) !important;
  border-color: rgba(167, 212, 235, .18) !important;
  background: rgba(0, 14, 28, .46) !important;
}
.madre-info-panel .madre-secondary-cta:hover {
  color: rgba(234,248,255,.9) !important;
  border-color: rgba(185, 226, 248, .3) !important;
  background: rgba(10, 28, 48, .58) !important;
}
.scene-launch {
  color: rgba(220,248,255,.96) !important;
  border-color: rgba(180,230,255,.32) !important;
}

/* Audio invite — right side */
.madre-audio-invite {
  position: absolute;
  z-index: 25;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  pointer-events: none;
}
.audio-invite-line {
  font: 600 clamp(14px,1.4vw,20px) var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(214,251,255,.82);
  text-shadow: 0 0 32px rgba(134,227,255,.5);
  margin-bottom: 6px;
}
.audio-invite-sub {
  font: 300 clamp(12px,1.1vw,16px) var(--font-body);
  letter-spacing: .08em;
  color: rgba(180,230,255,.52);
  margin-bottom: 20px;
}
.audio-pulse {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.audio-pulse span {
  width: 3px;
  border-radius: 999px;
  background: rgba(134,227,255,.6);
  animation: audioPulse 1.4s ease-in-out infinite;
}
.audio-pulse span:nth-child(1) { height: 12px; animation-delay: 0s; }
.audio-pulse span:nth-child(2) { height: 22px; animation-delay: .18s; }
.audio-pulse span:nth-child(3) { height: 14px; animation-delay: .36s; }
@keyframes audioPulse {
  0%,100% { transform: scaleY(.5); opacity: .4; }
  50%      { transform: scaleY(1);  opacity: 1;  }
}

/* Hide audio invite when not in MADRE scene */
.madre-audio-invite,
.madre-info-panel {
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.stage.madre-active .madre-audio-invite {
  opacity: 1;
  pointer-events: none;
}
.stage.madre-active .madre-info-panel {
  opacity: .22;
  pointer-events: auto;
}
.stage.madre-active .madre-info-panel:hover {
  opacity: 1;
}

/* ============================================================
   TIPOGRAFÍA 2028 — Syne + Space Grotesk + DM Mono
   ============================================================ */
/* Home labels, status, voice */
.status { font-family: var(--font-mono, 'DM Mono', monospace) !important; }
.sleep-label { font-family: var(--font-mono, 'DM Mono', monospace) !important; }
.voice-line { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: .08em !important; }
.brand strong { font-family: var(--font-display) !important; font-weight: 700 !important; }
.brand em { font-family: var(--font-body) !important; font-weight: 300 !important; }
.project-name { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: .18em !important; }
.scene-text { font-family: var(--font-display) !important; font-weight: 600 !important; }
.scene-downloads a { font-family: var(--font-mono, 'DM Mono', monospace) !important; }
.scene-back { font-family: var(--font-mono, 'DM Mono', monospace) !important; }
.footer-note a { font-family: var(--font-mono, 'DM Mono', monospace) !important; }
.left-whisper span { font-family: var(--font-display) !important; font-weight: 700 !important; }

/* ============================================================
   MADRE SCENE HIDDEN PANELS — Override old center-copy rule
   ============================================================ */
.madre-scene .center-copy,
.madre-scene .madre-copy { display: none !important; }

/* ============================================================
   MOBILE RESPONSIVE — vehicles subpages
   ============================================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero { align-items: flex-start; min-height: 100svh; }
  .hero-copy { padding: 100px 20px 40px; max-width: 100%; }
  .hero-copy h1 { font-size: clamp(32px, 8vw, 52px); }
  .hero-lead { font-size: 14px; }
  .hero-metrics { grid-template-columns: repeat(2,1fr); gap:8px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .cta { width: 100%; justify-content: center; }

  /* Planet/moon/asteroid — smaller on mobile */
  .earth-stage, .moon-stage, .planet-stage, .asteroid-stage {
    width: min(70vw, 300px) !important;
    right: 50% !important;
    transform: translate(50%, -50%) !important;
    top: 28% !important;
    opacity: 0.35 !important;
  }

  /* Telem chips — hide on mobile */
  .telem { display: none !important; }

  /* Content grid — single column */
  .content { grid-template-columns: 1fr !important; padding: 0 20px 60px !important; }
  .main-col { padding-right: 0 !important; padding-top: 40px !important; }
  .rail { position: relative !important; top: 0 !important; height: auto !important; padding: 32px 0 0 !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,.08); }

  /* Responsibility block */
  .responsibility { grid-template-columns: 1fr !important; gap: 24px !important; }
  .resp-action { align-items: flex-start !important; }

  /* Rail docs */
  .doc-title { font-size: 14px !important; }
  .doc-desc { font-size: 12px !important; }

  /* Topbar */
  .topbar { padding: 14px 20px !important; }
  .top-nav .nav-pill:not(.primary):not(:last-child) { display: none; }

  /* Cross nav */
  .cross-links { gap: 8px; }
  .cross-link { font-size: 10px; padding: 9px 14px; }

  /* Download feature block — ACCESS */
  .download-feature { margin: 0 20px !important; padding: 28px 20px !important; grid-template-columns: 1fr !important; }
  .df-contents { grid-template-columns: 1fr !important; }
  .df-action-col { align-items: flex-start !important; }
  .df-download-btn { width: 100% !important; }

  /* Code floats — hide on mobile */
  .code-float { display: none !important; }

  /* Alliance block */
  .alliance-block { padding: 24px 20px !important; }
  .alliance-table { font-size: 11px !important; }
}


/* ============================================================
   ODI AUDIO/CTA + MADRE PREPRINT — 20260517-C
   ============================================================ */
.odi-scene .scene-launch,
.odi-scene .scene-links .scene-launch,
.odi-scene .scene-downloads .scene-launch,
.odi-scene .scene-links a.scene-launch,
.odi-scene .scene-downloads a.scene-launch {
  color: #02070c !important;
  background: linear-gradient(135deg, #ecfeff, #7cecff) !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  opacity: 1 !important;
}
.odi-scene .scene-launch:hover,
.odi-scene .scene-links a.scene-launch:hover,
.odi-scene .scene-downloads a.scene-launch:hover {
  color: #00050a !important;
  background: linear-gradient(135deg, #ffffff, #98f0ff) !important;
}
.odi-scene .scene-launch * {
  color: inherit !important;
  text-shadow: none !important;
}

/* keep secondary ODI buttons legible without making them compete with launch */
.odi-scene .scene-downloads a:not(.scene-launch),
.odi-scene .scene-links a:not(.scene-launch) {
  color: rgba(242, 253, 255, .96) !important;
  background: rgba(0, 18, 34, .68) !important;
  border-color: rgba(190, 236, 255, .34) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.72) !important;
}

/* single MADRE preprint button at the bottom */
.madre-preprint-download {
  bottom: 96px !important;
  width: min(780px, 90vw) !important;
  justify-content: center !important;
}
.madre-preprint-download .madre-preprint-link {
  width: min(680px, 90vw) !important;
  min-width: 0 !important;
  padding: 16px 22px !important;
  color: #06111b !important;
  background: linear-gradient(135deg, rgba(240,252,255,1), rgba(143,226,255,.96)) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  text-align: center !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-shadow: none !important;
  box-shadow: 0 18px 46px rgba(102,205,255,.24), 0 0 0 1px rgba(255,255,255,.2) inset !important;
}

/* remove the artificial white spot/line over MADRE face */
.home-madre-presence::before {
  background:
    radial-gradient(circle at 50% 58%, transparent 0 42%, rgba(2,10,22,0.24) 74%, rgba(0,0,0,0.48) 100%) !important;
}
.stage.awakening .sphere.heart,
.stage.awake .sphere.heart,
.stage.projects-visible .sphere.heart {
  opacity: .14 !important;
}
.stage.awakening .sphere.point,
.stage.awake .sphere.point,
.stage.projects-visible .sphere.point {
  opacity: .05 !important;
  box-shadow: 0 0 16px rgba(255,255,255,.18), 0 0 44px rgba(88,222,255,.10) !important;
}
@media (max-width: 760px) {
  .madre-preprint-download {
    bottom: 84px !important;
  }
  .madre-preprint-download .madre-preprint-link {
    font-size: 8.5px !important;
    letter-spacing: .08em !important;
    padding: 14px 16px !important;
  }
}


/* === VEHICLE hierarchy refinement: CRLP + Synthetic Humans as primary lines === */
.home-crlp-signal {
  position:absolute; z-index:30; left:34px; top:118px; width:min(350px, calc(100vw - 68px));
  transition:opacity 1.2s ease, transform 1.2s ease;
}
.crlp-signal-anchor{
  display:block; padding:20px 20px 18px; border-radius:26px;
  border:1px solid rgba(214,251,255,.18);
  background:linear-gradient(180deg,rgba(11,20,31,.78),rgba(5,12,20,.54)), radial-gradient(circle at 14% 18%,rgba(142,236,255,.16),transparent 34%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 18px 60px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
}
.crlp-signal-eyebrow,.signal-open{
  display:inline-flex; color:rgba(214,251,255,.62); font:10px var(--font-display); letter-spacing:.26em; text-transform:uppercase;
}
.crlp-signal-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(142,236,255,.86);box-shadow:0 0 18px rgba(142,236,255,.62);margin-right:8px;}
.crlp-signal-copy h2{margin:10px 0 8px;font:600 clamp(22px,2.2vw,28px) var(--font-display);letter-spacing:.08em;color:rgba(244,251,255,.98)}
.crlp-signal-copy p{margin:0 0 12px;color:rgba(219,241,255,.64);font:11px/1.7 var(--font-display);letter-spacing:.06em}
.crlp-signal-anchor:hover{transform:translateY(-2px);border-color:rgba(214,251,255,.32)}
.stage.awakening .home-crlp-signal,.stage.awake .home-crlp-signal,.stage.projects-visible .home-crlp-signal,.stage.scene-active .home-crlp-signal{opacity:0;pointer-events:none;transform:translateY(-8px)}
.project-name.crlp{--project-x:-176px;--project-y:-226px;}
.project-name.humans{--project-x:176px;--project-y:-226px;}
.project-name.flagship{
  padding:12px 16px;border:1px solid rgba(214,251,255,.38);border-radius:999px;
  background:linear-gradient(135deg,rgba(214,251,255,.92),rgba(214,177,106,.72));
  color:#03101a!important;box-shadow:0 0 34px rgba(142,236,255,.18),0 0 46px rgba(214,177,106,.14);
}
.project-name.flagship:hover{color:#fff!important;background:rgba(12,25,38,.76);border-color:rgba(214,251,255,.66)}
@media (max-width: 900px){
  .home-crlp-signal{left:20px;top:auto;bottom:154px;width:min(320px,calc(100vw - 40px));}
  .project-name.crlp{--project-x:-138px;--project-y:-202px;}
  .project-name.humans{--project-x:138px;--project-y:-202px;}
}
@media (max-width: 640px){
  .home-crlp-signal{display:none;}
  .project-name.crlp{--project-x:-96px;--project-y:-166px;}
  .project-name.humans{--project-x:96px;--project-y:-166px;}
  .project-name.flagship{padding:9px 10px;font-size:8px!important;}
}