/* One continuous scene: stars, a persistent WebGL Earth, then the existing UI. */
html { overflow-x: hidden; }
body {
  overflow-x: hidden;
  background: linear-gradient(90deg, rgba(1, 2, 7, .7), rgba(1, 2, 7, .22)),
    #010207 url("../../images/background.png") center / cover fixed no-repeat;
  background-attachment: fixed;
}

.site { z-index: 3; background: none; overflow: clip; }
.site::before { opacity: 0.65; }
.site::after { opacity: 0.3; }
#starfield { opacity: .55; }

#earthCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.scene-webgl #earthCanvas { opacity: 1; }

/* Keep the original portrait intact in the first shot, including on phones.
   The scene timeline transforms it around the Earth visible in the window. */
.observatory {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: none;
  overflow: hidden;
  background: #010207;
  pointer-events: none;
}
.scene-pending .observatory { display: block; }
.observatory-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
}
.scene-webgl .orbit-core, .scene-pending .orbit-core {
  background: none;
  animation: none;
  filter: none;
}
.scene-pending body { overflow: hidden; }
.scene-pending .topbar, .scene-pending .intro {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
}
.topbar, .intro {
  transition: opacity 850ms ease, transform 1000ms cubic-bezier(.22, 1, .36, 1), visibility 850ms;
}
.scene-pending .space { opacity: 0; visibility: hidden; }
.space { transition: opacity 1000ms ease, visibility 1000ms; }
.scene-pending.scene-orbits-ready .space { opacity: 1; visibility: visible; }
.scene-pending.scene-copy-ready .topbar, .scene-pending.scene-copy-ready .intro {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.scene-skip {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 30;
  display: none;
  gap: 24px;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(217, 229, 247, .3);
  border-radius: 999px;
  background: rgba(3, 9, 20, .68);
  color: var(--ink);
  font-size: .85rem;
  cursor: pointer;
}
.scene-pending .scene-skip { display: inline-flex; }
.scene-skip:hover { background: rgba(25, 49, 73, .85); }
.scene-skip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
#pageTitle:focus { outline: none; }
.scene-credit {
  position: absolute;
  bottom: 12px;
  right: 24px;
  z-index: 5;
  color: rgba(226, 233, 244, .65);
  font-size: .65rem;
}
.scene-credit a { text-decoration: underline; text-underline-offset: 3px; }
.scene-pending .scene-credit { visibility: hidden; }

@media (max-width: 980px) {
  .universe { padding-top: 8px; gap: 12px; }
  .space { order: -1; height: 560px; min-height: 560px; margin: 0; }
  .orbit-core { width: 280px; min-width: 0; }
  .scene-credit { bottom: 16px; right: 14px; left: 14px; text-align: center; }
}

@media (max-width: 640px) {
  .space { height: 480px; min-height: 480px; }
  .orbit-core { width: 240px; }
  .space::before, .space::after { opacity: .35; }
  .planet { --w: min(var(--orbit-w), 38vw); --h: 70px; padding: 12px; }
  .planet::before { width: 26px; height: 26px; right: 10px; top: 10px; }
  .planet-label { max-width: calc(100% - 26px); font-size: .8rem; }
  .question-panel { max-height: calc(100dvh - 28px); overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-pending .space, .scene-pending .intro, .scene-pending .topbar {
    opacity: 1; visibility: visible; transform: none;
  }
  .scene-pending body { overflow-y: auto; }
  .scene-skip { display: none !important; }
  .scene-pending .observatory { display: none; }
  .space, .intro, .topbar { transition: none; }
}