:root {
  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Inter, Arial, Helvetica, sans-serif;
  --cyan: #d6fbff;
  --blue: #79d9ff;
  --soft: rgba(228, 251, 255, 0.82);
  --dim: rgba(228, 251, 255, 0.48);
}

* { 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: radial-gradient(circle at 50% 45%, rgba(22, 68, 102, 0.48), rgba(4, 14, 27, 0.92) 42%, #000 100%);
}

.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.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;
}

.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;
  border: 0;
  background: transparent;
  color: rgba(238, 252, 255, 0.84);
  font: 11px var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 12px;
  text-shadow: 0 0 28px rgba(112, 213, 255, 0.22);
}
.project-name:hover { color: #fff; text-shadow: 0 0 38px rgba(168, 244, 255, 0.76); }
.project-name.supra { left: -178px; top: 28%; }
.project-name.access { left: -210px; bottom: 28%; }
.project-name.odi { right: -146px; top: 28%; }
.project-name.cps { right: -128px; bottom: 28%; }
.project-name.madre { left: 50%; bottom: -112px; transform: translateX(-50%); }

.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 { left: 2%; top: 26%; }
  .project-name.odi { right: 2%; top: 26%; }
  .project-name.access { left: 2%; bottom: 28%; }
  .project-name.cps { right: 2%; bottom: 28%; }
}

@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.madre { bottom: -76px; }
  .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;
}

.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;
  }
}