/* ===========================================================================
   SpaceSick — Constellation Overlay
   Recognizable star figures (Big Dipper, Scorpius) that sit faintly in the
   background sky and draw their connecting lines in on hover / tap.

   LAYER: #constellations is z-index 0 (the background sky), placed AFTER #stars
   in the DOM so it stacks just above the starfield canvas (and its baked Milky
   Way band) but BELOW the Star Navigation overlay (#star-nav, z1), the System
   View bodies (z1) and every content/UI element (.scene, z2). The container is
   pointer-events:none so it never blocks a click on the open field, a host
   star, a planet, a button, the ribbon or a modal — only Hoth's marker opts
   back into pointer events. Hover regions are hit-tested in JS (constellations.js).
   =========================================================================== */

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

/* Scorpius sits on the brightest part of the Milky Way (by the galactic core),
   so the whole figure — its stars, lines and label — is held ~10% quieter than
   the Big Dipper so it doesn't shout against the bright band. Hoth's marker is
   in its own layer and keeps its own (separately calmed) treatment. */
.constellation[data-id="scorpius"] { opacity: 0.9; }

/* a single figure — centered on its left/top %, sized by inline width */
.constellation {
  position: absolute;
  transform: translate(-50%, -50%);
}
.constellation svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- faint figure stars: a touch more present than a background field star
   so the pattern is discoverable on close inspection, but still subtle ---- */
.cn-star {
  fill: rgba(226, 229, 242, 0.5);
  transition: fill 0.45s ease;
}
/* once the figure is assembled, lift the points a little */
.constellation.drawn .cn-star { fill: rgba(232, 235, 247, 0.82); }

/* Antares — the red heart of the scorpion. Faint reddish at rest, a touch
   warmer once Scorpius draws in. */
.cn-star.antares {
  fill: rgba(232, 120, 96, 0.62);
}
.constellation.drawn .cn-star.antares {
  fill: rgba(244, 130, 104, 0.92);
}

/* ---- connecting segments: thin, dim, house-style. Drawn as one continuous
   polyline so a single dash sweep assembles the figure vertex-by-vertex.
   stroke-dasharray is set inline per figure from the polyline's REAL
   getTotalLength() (constellations.js); the offset starts at the full length
   (hidden, via --cn-dash) and the .drawn rule transitions it to 0 — covering
   the ENTIRE figure end-to-end and holding at 100% while hovered. ---- */
.cn-lines {
  fill: none;
  stroke: rgba(196, 206, 234, 0.5);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: var(--cn-dash, 1000);
  opacity: 0;
  transition: stroke-dashoffset 1.05s cubic-bezier(0.33, 0, 0.2, 1),
              opacity 0.45s ease;
}
.constellation.drawn .cn-lines {
  opacity: 0.6;
  stroke-dashoffset: 0;
}

/* ---- the assembling-figure label, in Voyager-HUD typography ---- */
.cn-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(228, 230, 240, 0.82);
  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.45s ease;
  pointer-events: none;
}
.cn-label.below { top: calc(100% + 10px); }
.cn-label.above { bottom: calc(100% + 10px); }
.constellation.drawn .cn-label { opacity: 1; }

/* ---- Hoth's marker — embedded in the HEAD of Scorpius (upper-left, clear of
   Earth). Lives in its OWN layer, #cn-hoth-layer, ABOVE all content (z-index 8)
   so a click ALWAYS lands even where Earth overlaps the open sky. The anchor
   mirrors the Scorpius figure (same left/top/width + viewBox aspect-ratio) so
   the marker stays embedded in the figure at any size. Subtly DISTINCT from the
   decorative stars (an icy ringed point: a place you can go) and the only
   interactive element. The 44px box is a transparent touch target. ---- */
#cn-hoth-layer {
  position: fixed;
  inset: 0;
  z-index: 8;            /* above .scene (2) so the hit-area is never occluded */
  pointer-events: none;  /* only the button itself is clickable */
  opacity: 1;
  transition: opacity 0.55s ease;
}
#cn-hoth-layer.hidden { opacity: 0; pointer-events: none; }
.cn-hoth-anchor {
  position: absolute;
  transform: translate(-50%, -50%);
}
.cn-hoth {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  opacity: 0.9;          /* ~10% calmer than the decorative figure stars */
}
.cn-hoth .cn-hoth-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: rgba(212, 234, 247, 0.85);
  box-shadow: 0 0 5px 1px rgba(150, 206, 236, 0.4);
}
.cn-hoth .cn-hoth-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px;
  border-radius: 50%;
  border: 1px solid rgba(168, 214, 240, 0.4);
  opacity: 0.7;
}
/* a faint, slow breath — quietly present, not a flashing homing beacon */
@media (prefers-reduced-motion: no-preference) {
  .cn-hoth .cn-hoth-ring { animation: cn-hoth-breathe 6.5s ease-in-out infinite; }
}
@keyframes cn-hoth-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.16); opacity: 0.3; }
}
.cn-hoth:hover .cn-hoth-core,
.cn-hoth:focus-visible .cn-hoth-core {
  background: rgba(228, 244, 252, 1);
  box-shadow: 0 0 9px 2px rgba(160, 214, 244, 0.75);
}
.cn-hoth:hover .cn-hoth-ring,
.cn-hoth:focus-visible .cn-hoth-ring {
  border-color: rgba(196, 230, 250, 0.8);
}
.cn-hoth-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 16px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(214, 234, 248, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cn-hoth:hover .cn-hoth-label,
.cn-hoth:focus-visible .cn-hoth-label,
.cn-hoth-anchor.fig-drawn .cn-hoth-label { opacity: 1; }

/* reduced motion: no dash animation — figures appear assembled when active */
@media (prefers-reduced-motion: reduce) {
  .cn-lines { transition: opacity 0.3s ease; }
}

/* ---- wayfinding pointer (Big Dipper → Polaris): a faint dotted guide that
   fades in with the figure. Distinct from the solid figure lines — it is a
   navigation aid, not part of the shape. Drawn with overflow:visible so it can
   run past the viewBox to Polaris, which sits outside the bowl. ---- */
.cn-pointer {
  fill: none;
  stroke: rgba(198, 214, 250, 0.55);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1.5 6;
  opacity: 0;
  transition: opacity 0.6s ease 0.15s;
}
.constellation.drawn .cn-pointer { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .cn-pointer { transition: opacity 0.3s ease; }
}

/* ---- Big Dipper destination markers — calm clickable stars embedded in / around
   the figure (Chalawan below the bowl, Mizar at the handle bend, faint Alcor
   beside it, Polaris out along the pointer). Same mechanism and dimensions as
   Hoth's marker (own z-index 8 layer, 44px transparent touch target, slow
   breath, no homing-beacon flash). Tint is set per marker via custom props:
   gold (Sun-like Chalawan), white (the A-type Mizar/Alcor), polaris (warm-gold
   supergiant). ---- */
#cn-bigdipper-layer {
  position: fixed;
  inset: 0;
  z-index: 8;            /* above .scene (2) so the hit-area is never occluded */
  pointer-events: none;  /* only the buttons themselves are clickable */
  opacity: 1;
  transition: opacity 0.55s ease;
}
#cn-bigdipper-layer.hidden { opacity: 0; pointer-events: none; }
.cn-bd-anchor {
  position: absolute;
  transform: translate(-50%, -50%);
}
.cn-dest {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  opacity: 0.9;          /* ~10% calmer than the decorative figure stars */
  /* default tint — gold (Sun-like) */
  --cd-core: rgba(255, 238, 200, 0.9);
  --cd-core-shadow: rgba(255, 206, 130, 0.45);
  --cd-core-hi: rgba(255, 246, 224, 1);
  --cd-core-hi-shadow: rgba(255, 212, 140, 0.8);
  --cd-ring: rgba(255, 214, 140, 0.42);
  --cd-ring-hi: rgba(255, 226, 168, 0.85);
}
/* white A-type stars (Mizar, Alcor) — cool blue-white instead of gold */
.cn-dest--white {
  --cd-core: rgba(226, 238, 255, 0.9);
  --cd-core-shadow: rgba(150, 196, 255, 0.45);
  --cd-core-hi: rgba(240, 248, 255, 1);
  --cd-core-hi-shadow: rgba(168, 206, 255, 0.8);
  --cd-ring: rgba(186, 212, 255, 0.45);
  --cd-ring-hi: rgba(206, 226, 255, 0.85);
}
/* Polaris — warm-gold supergiant, a touch brighter than Chalawan's gold */
.cn-dest--polaris {
  --cd-core: rgba(255, 240, 200, 0.95);
  --cd-core-shadow: rgba(255, 206, 120, 0.5);
  --cd-core-hi: rgba(255, 248, 226, 1);
  --cd-core-hi-shadow: rgba(255, 214, 150, 0.85);
  --cd-ring: rgba(255, 216, 150, 0.5);
  --cd-ring-hi: rgba(255, 228, 172, 0.9);
}
/* Alcor — the faint rider: dim at rest, revealed when the Big Dipper assembles
   (or on direct hover/focus). */
.cn-dest--faint { opacity: 0.4; }
.cn-bd-anchor.fig-drawn .cn-dest--faint { opacity: 0.9; }

.cn-dest .cn-dest-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--cd-core);
  box-shadow: 0 0 5px 1px var(--cd-core-shadow);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cn-dest--polaris .cn-dest-core { width: 6px; height: 6px; margin: -3px; }
.cn-dest--faint .cn-dest-core { width: 4px; height: 4px; margin: -2px; }
.cn-dest .cn-dest-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px;
  border-radius: 50%;
  border: 1px solid var(--cd-ring);
  opacity: 0.7;
  transition: border-color 0.3s ease;
}
.cn-dest--faint .cn-dest-ring { width: 12px; height: 12px; margin: -6px; }
/* a faint, slow breath — quietly present, not a flashing homing beacon
   (shares Hoth's breathe keyframes) */
@media (prefers-reduced-motion: no-preference) {
  .cn-dest .cn-dest-ring { animation: cn-hoth-breathe 6.5s ease-in-out infinite; }
}
.cn-dest:hover .cn-dest-core,
.cn-dest:focus-visible .cn-dest-core {
  background: var(--cd-core-hi);
  box-shadow: 0 0 9px 2px var(--cd-core-hi-shadow);
}
.cn-dest:hover .cn-dest-ring,
.cn-dest:focus-visible .cn-dest-ring {
  border-color: var(--cd-ring-hi);
}
.cn-dest:hover, .cn-dest:focus-visible { opacity: 1; }

.cn-dest-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232, 236, 246, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cn-dest-label--below { top: calc(50% + 16px); }
.cn-dest-label--above { bottom: calc(50% + 16px); }
/* Chalawan + Polaris labels surface when the whole figure assembles; Mizar and
   Alcor (crowded at the handle bend) reveal only on direct hover/focus. */
.cn-bd-anchor.fig-drawn .cn-dest:not(.cn-dest--hoveronly) .cn-dest-label { opacity: 1; }
.cn-dest:hover .cn-dest-label,
.cn-dest:focus-visible .cn-dest-label { opacity: 1; }