/* Constellation sky elements — stars, lines, dust, tooltip.
   Split from styles.css (200-line rule). */

/* connection lines — very dim, brighten when adjacent star is hovered */
.line {
  stroke: rgba(220, 230, 245, 0.08);
  stroke-width: 1;
  transition: stroke 300ms ease, stroke-width 300ms ease;
}
.line.lit {
  stroke: rgba(95, 180, 196, 0.55);
  stroke-width: 1.4;
}

/* background dust — tiny twinkling specks */
.dust {
  fill: #ffffff;
}
.dust.t1 { animation: twinkle 5s ease-in-out infinite; }
.dust.t2 { animation: twinkle 7s ease-in-out infinite 1s; }
.dust.t3 { animation: twinkle 9s ease-in-out infinite 2.5s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.7; }
}

/* main stars — sized by section, colored by section */
.star { cursor: pointer; }
.star-halo {
  opacity: 0.18;
  transition: opacity 300ms ease, r 300ms ease;
}
.star-dot {
  transition: r 300ms cubic-bezier(0.2, 0.7, 0.2, 1.2);
  animation: star-blink 6s ease-in-out infinite;
}
.star-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: #d4cfc1;
  text-anchor: middle;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 300ms ease, fill 300ms ease;
}
.star:hover .star-halo { opacity: 0.55; }
.star:hover .star-dot  { filter: drop-shadow(0 0 8px currentColor); }
.star:hover .star-name { opacity: 1; fill: #ffffff; }

@keyframes star-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* section accent colors via class */
.star.moored  .star-dot, .star.moored  .star-halo { fill: #ffd86c; color: #ffd86c; }
.star.deep    .star-dot, .star.deep    .star-halo { fill: #5fb4c4; color: #5fb4c4; }
.star.signal  .star-dot, .star.signal  .star-halo { fill: #ffffff; color: #ffffff; }
.star.root    .star-dot, .star.root    .star-halo { fill: #c44536; color: #c44536; }

/* "coming soon" placeholders — dimmer, slower blink, dashed orbit halo */
.star.coming .star-dot { opacity: 0.5; animation-duration: 9s; }
.star.coming .star-halo { opacity: 0.08; stroke-dasharray: 2 3; }
.star.coming .star-name {
  opacity: 0.4;
  font-style: italic;
  letter-spacing: 0.12em;
}
.star.coming:hover .star-dot { opacity: 0.85; }
.star.coming:hover .star-name { opacity: 0.85; fill: #8a8576; }

/* tooltip — fixed positioned, shown on hover */
.tooltip {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(220, 230, 245, 0.12);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 10;
  max-width: 260px;
}
.tooltip.show { opacity: 1; transform: translateY(0); }
.tooltip-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #d4cfc1;
}
.tooltip-note {
  margin-top: 3px;
  font-style: italic;
  color: #8a8576;
  font-size: 11px;
}