/* ===========================================================================
   SpaceSick — System View (Pass 1: Home System bodies in the sky)
   ---------------------------------------------------------------------------
   The Sun rendered on every Home System orbit view, and the Moon rendered on
   Earth's. These bodies sit in a dedicated layer ABOVE the background starfield
   (#stars, z-index 0) and the Star Navigation overlay (#star-nav, z-index 1),
   but BELOW the scene that carries the principal planet sphere and all text
   content (.scene, z-index 2). #system-view is placed AFTER #star-nav in the
   DOM and shares z-index 1, so it stacks just above the host-star markers and
   beneath everything in the scene.

   The container is pointer-events:none. Interaction (hover + click) is hit-
   tested in JS (system-view.js) the same way Star Navigation host stars are,
   so a body never steals a click from the scene, planet, text, or chrome —
   content always wins.
   =========================================================================== */

#system-view {
  position: fixed;
  inset: 0;
  z-index: 1;            /* above #star-nav (also 1, earlier in DOM); below .scene (2) */
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}
#system-view.hidden { opacity: 0; }

/* anchor: width/height (the orb diameter) + left/top are set inline in JS;
   translate centers the body on its (left,top) point. */
.sv-body {
  position: absolute;
  transform: translate(-50%, -50%);
  display: none;            /* shown per-scene by JS */
}

/* the orb wrapper carries the hover scale + opacity so the label stays put */
.sv-orb {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  transform: scale(1);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}
.sv-body.hover .sv-orb {
  opacity: 1;
  transform: scale(1.15);
}

/* ---- core sphere ---- */
.sv-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* The Sun — gold/white core: hot white centre melting out to a warm gold limb.
   Matches the Sun's orbit-view palette (deep #F08E26, mid #FFCA6E, high #FFFAEC). */
.sv-sun .sv-core {
  background: radial-gradient(circle at 50% 44%,
    #fffdf6 0%, #fff1cf 30%, #ffd982 58%, #f9b347 82%, #ef9a2e 100%);
  box-shadow: 0 0 12% 2% rgba(255, 214, 142, 0.45);
}

/* soft halo extending ~30% beyond the core — always present (no breathing
   pulse at this size; the slow pulse is reserved for the Sun's own orbit view) */
.sv-sun .sv-halo {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 222, 150, 0.55) 0%,
    rgba(255, 210, 140, 0.28) 42%,
    rgba(255, 205, 130, 0) 72%);
}

/* The Moon — soft gray-white sphere with subtle crater shading, lit from the
   upper-right (toward the Sun, which sits opposite in Earth's sky). No halo:
   the Moon reflects light, it does not emit it. Matches the Moon's orbit-view
   palette (deep #282828, mid #62605C, high #C8C2B6). */
.sv-moon .sv-core {
  background:
    radial-gradient(circle at 30% 30%, rgba(70,68,64,0.55) 0%, rgba(70,68,64,0) 26%),
    radial-gradient(circle at 66% 62%, rgba(58,56,51,0.45) 0%, rgba(58,56,51,0) 22%),
    radial-gradient(circle at 64% 36%,
      #d8d4ca 0%, #c0bcb1 38%, #8e8a82 66%, #56534d 86%, #34322d 100%);
}

/* hover glow — gold for the Sun, soft white for the Moon. Hidden at rest. */
.sv-glow {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.sv-sun .sv-glow {
  background: radial-gradient(circle, rgba(255, 224, 158, 0.6) 0%, rgba(255, 220, 150, 0) 64%);
}
.sv-moon .sv-glow {
  background: radial-gradient(circle, rgba(232, 234, 240, 0.5) 0%, rgba(232, 234, 240, 0) 64%);
}

/* Moon-system bodies (Pass 2) — Galilean moons in Jupiter's sky, Titan +
   Enceladus in Saturn's. The core gradient and hover glow are set inline per
   entry (from `sky.core` / `sky.glow` in js/planets.js); a faint inner shadow
   deepens the unlit limb so each orb reads as a small lit sphere. No halo —
   moons reflect light, they do not emit it. */
.sv-moon-system .sv-core {
  box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.45);
}
.sv-moon-system .sv-glow {
  background: radial-gradient(circle, rgba(228, 230, 240, 0.5) 0%, rgba(228, 230, 240, 0) 64%);
}

/* Sibling planets (System View 3) — the other worlds of a star system rendered
   in a member's orbit-view sky. They reflect light: a small lit sphere (core
   gradient set inline per planet from SIBLING_TINT) with a faint inner shadow
   on the unlit limb, plus a soft white hover glow. No halo, no emissive aura. */
.sv-sibling .sv-core {
  box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.5);
}
.sv-sibling .sv-glow {
  background: radial-gradient(circle, rgba(228, 230, 240, 0.45) 0%, rgba(228, 230, 240, 0) 64%);
}
.sv-body.hover .sv-glow {
  opacity: 1;
  transform: scale(1);
}

/* Host stars (System View 2) — the curated exoplanets' host stars rendered in
   their planet's sky. They emit light: a bright core (gradient set inline from
   `sky.core`) plus a soft halo and hover glow (both tinted inline from
   `sky.glow`). A faint always-on aura makes them read as small suns even at
   rest. */
.sv-host-star .sv-core {
  box-shadow: 0 0 18% 5% rgba(255, 220, 160, 0.18);
}
.sv-host-star .sv-halo {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  /* background set inline per star from sky.glow */
}
.sv-host-star .sv-orb { opacity: 0.95; }

/* The pulsar — a tiny, intensely blue point with a slow ~10s flicker that
   echoes the lighthouse sweep cadence of its surface view. */
.sv-pulsar .sv-core,
.sv-pulsar .sv-halo {
  animation: svPulsarFlicker 10s ease-in-out infinite;
}
.sv-pulsar .sv-halo { animation-delay: -0.15s; }
@keyframes svPulsarFlicker {
  0%, 88%, 100% { opacity: 0.82; }
  92% { opacity: 1; filter: brightness(1.5); }
  96% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-pulsar .sv-core, .sv-pulsar .sv-halo { animation: none; }
}

/* Star Expansion — a blue giant looming in its planet's sky: a slow, steady
   breath of intense blue-white light (distinct from the pulsar's fast stutter). */
.sv-bluegiant .sv-core,
.sv-bluegiant .sv-halo {
  animation: svBlueGiant 4.5s ease-in-out infinite;
}
.sv-bluegiant .sv-halo { animation-delay: -0.4s; }
@keyframes svBlueGiant {
  0%, 100% { opacity: 0.9; filter: brightness(1); }
  50%      { opacity: 1;   filter: brightness(1.12); }
}

/* Star Expansion — a young star: a slow, slightly irregular flicker that hints
   at a star not yet settled. */
.sv-youngstar .sv-core,
.sv-youngstar .sv-halo {
  animation: svYoungStar 6s ease-in-out infinite;
}
@keyframes svYoungStar {
  0%   { opacity: 0.9;  filter: brightness(1); }
  30%  { opacity: 1;    filter: brightness(1.08); }
  48%  { opacity: 0.86; filter: brightness(0.96); }
  68%  { opacity: 0.98; filter: brightness(1.05); }
  100% { opacity: 0.9;  filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-bluegiant .sv-core, .sv-bluegiant .sv-halo,
  .sv-youngstar .sv-core, .sv-youngstar .sv-halo { animation: none; }
}

/* ---- hover label: Voyager-HUD typography (small caps, soft white) ---- */
.sv-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 10px);
  white-space: nowrap;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(228, 230, 240, 0.86);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* low-in-the-viewport bodies (the Moon) flip their label above so it stays on
   screen and never crosses into the body copy below */
.sv-body.label-above .sv-label {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, -10px);
}
.sv-body.hover .sv-label { opacity: 1; }
.sv-body.no-label .sv-label { opacity: 0 !important; }

@media (max-width: 600px) {
  .sv-label { font-size: 9px; }
}