/* ===========================================================================
   SpaceSick — Star Navigation overlay
   The interactive host-star layer. Sits ABOVE the background starfield canvas
   (#stars, z-index 0) and BELOW every content/UI element (.scene is z-index 2):
   the overlay is z-index 1 and pointer-events:none, so it never blocks a click,
   a planet, a button, a ribbon dot, or a modal. Host stars are hit-tested in JS
   (star-nav.js) only over open background, so content always wins.
   =========================================================================== */

#star-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.55s ease;
}
#star-nav.hidden { opacity: 0; }

/* anchor point — children are centered on it; left/top set inline as % */
.host-star {
  position: absolute;
  width: 0;
  height: 0;
}

/* ---- the visible point: identical to an inert field star at rest, plus a
   barely-perceptible static halo so it can be found on close inspection ---- */
.hs-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: rgba(225, 228, 240, 0.82);
  box-shadow: 0 0 2.5px 0.5px rgba(225, 228, 240, 0.16);
  opacity: 0.6;
  transform: scale(1);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.host-star.hover .hs-dot {
  opacity: 1;
  transform: scale(1.6);
}

/* ---- hover glow halo (type-tinted). Hidden at rest. ---- */
.hs-glow,
.hs-glow2 {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  will-change: opacity, transform;
}
.hs-glow {
  width: 44px;
  height: 44px;
  margin: -22px;
  transform: scale(0.45);
  background: radial-gradient(circle, var(--hs-color, rgba(255, 240, 210, 0.5)) 0%, rgba(255, 240, 210, 0) 64%);
}
.hs-glow2 { display: none; }
.host-star.hover .hs-glow {
  opacity: 1;
  transform: scale(1);
}

/* ---- type tints ---- */
.host-star[data-type="yellow-dwarf"] { --hs-color: rgba(255, 238, 198, 0.6); }
.host-star[data-type="red-dwarf"]    { --hs-color: rgba(255, 138, 78, 0.55); }
/* K-type orange dwarf: cooler and more orange than our Sun, warmer than a red
   dwarf — a soft amber sitting between the yellow- and red-dwarf tints. */
.host-star[data-type="orange-dwarf"] { --hs-color: rgba(255, 192, 132, 0.58); }
.host-star[data-type="blue-giant"]   { --hs-color: rgba(150, 200, 255, 0.7); }
/* young T-Tauri star: warm yellow-white, a touch restless */
.host-star[data-type="young-star"]   { --hs-color: rgba(255, 232, 176, 0.66); }

/* ---- blue giant: intense, steady blue-white with a slow, gentle breath —
   bright and "solar", deliberately UNLIKE the pulsar's fast electric stutter ---- */
.host-star[data-type="blue-giant"] .hs-dot {
  background: rgba(214, 234, 255, 0.92);
  box-shadow: 0 0 3px 1px rgba(150, 200, 255, 0.4);
}
.host-star[data-type="blue-giant"].hover .hs-glow {
  animation: hs-bluegiant 2.6s ease-in-out infinite;
}
@keyframes hs-bluegiant {
  0%, 100% { opacity: 0.92; transform: scale(0.98); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* ---- young star: warm yellow-white with a slow, slightly irregular flicker,
   suggesting a star that has not yet settled ---- */
.host-star[data-type="young-star"].hover .hs-glow {
  animation: hs-youngstar 3.4s ease-in-out infinite;
}
@keyframes hs-youngstar {
  0%   { opacity: 0.9;  transform: scale(1); }
  28%  { opacity: 1;    transform: scale(1.05); }
  46%  { opacity: 0.84; transform: scale(0.97); }
  64%  { opacity: 0.98; transform: scale(1.03); }
  100% { opacity: 0.9;  transform: scale(1); }
}

/* ---- pulsar: cool electric blue with a rapid low-amplitude flicker (~4.5Hz),
   referencing a real pulsar's swept radiation beam ---- */
.host-star[data-type="pulsar"] { --hs-color: rgba(126, 204, 255, 0.72); }
.host-star[data-type="pulsar"].hover .hs-glow {
  animation: hs-pulsar 0.22s steps(2, end) infinite;
}
@keyframes hs-pulsar {
  0%   { opacity: 1;    transform: scale(1.06); }
  50%  { opacity: 0.42; transform: scale(0.86); }
  100% { opacity: 1;    transform: scale(1.06); }
}

/* ---- binary (Kepler-16, the "two suns" system): two offset glows, ~8px apart,
   one slightly larger, both warm — gold + amber — belonging together ---- */
.host-star[data-type="binary"] .hs-glow {
  --hs-color: rgba(255, 226, 152, 0.62);
  width: 42px;
  height: 42px;
  margin: -21px -25px; /* nudge left */
}
.host-star[data-type="binary"] .hs-glow2 {
  display: block;
  width: 32px;
  height: 32px;
  margin: -16px -7px; /* nudge right, ~8px from the first */
  transform: scale(0.45);
  background: radial-gradient(circle, rgba(255, 178, 104, 0.58) 0%, rgba(255, 178, 104, 0) 64%);
}
.host-star[data-type="binary"].hover .hs-glow2 {
  opacity: 1;
  transform: scale(1);
}

/* ---- hover label: Voyager-HUD typography (small caps, soft white) ---- */
.hs-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, 15px);
  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;
}
.host-star.label-above .hs-label { transform: translate(-50%, calc(-100% - 12px)); }
.host-star.hover .hs-label { opacity: 1; }
.host-star.no-label .hs-label { opacity: 0 !important; }

/* reduced motion: drop the pulsar flicker to a steady glow */
@media (prefers-reduced-motion: reduce) {
  .host-star[data-type="pulsar"].hover .hs-glow,
  .host-star[data-type="blue-giant"].hover .hs-glow,
  .host-star[data-type="young-star"].hover .hs-glow { animation: none; }
}