/* Final restraint pass for the chromatic starfield. */

/* Keep distant stars colourful, but smaller and quieter. */
.stars::after {
  opacity: 0.58;
  background-image:
    radial-gradient(circle, rgba(255, 112, 194, .88) 0 .9px, transparent 1.2px),
    radial-gradient(circle, rgba(74, 226, 255, .88) 0 .9px, transparent 1.2px),
    radial-gradient(circle, rgba(176, 123, 255, .86) 0 .9px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 204, 88, .86) 0 .85px, transparent 1.15px),
    radial-gradient(circle, rgba(83, 244, 177, .82) 0 .85px, transparent 1.15px),
    radial-gradient(circle, rgba(118, 166, 255, .84) 0 .85px, transparent 1.15px);
}

.star {
  width: 1.7px;
  height: 1.7px;
  box-shadow:
    0 0 5px 1px var(--star-glow),
    0 0 13px 3px var(--star-halo);
}

.star.medium {
  width: 2.6px;
  height: 2.6px;
  box-shadow:
    0 0 6px 1.25px var(--star-glow),
    0 0 16px 4px var(--star-halo);
}

.star.large {
  width: 3.3px;
  height: 3.3px;
  box-shadow:
    0 0 7px 1.5px var(--star-glow),
    0 0 20px 5px var(--star-halo);
}

.star.large::before {
  width: clamp(24px, 3.5vw, 46px);
  height: 1px;
  filter: drop-shadow(0 0 3px var(--star-glow));
}

.star.large::after {
  width: 1px;
  height: clamp(28px, 4.2vw, 54px);
  filter: drop-shadow(0 0 3px var(--star-glow));
}

@keyframes twinkle {
  0%, 100% { opacity: .34; transform: scale(.88); filter: brightness(.92); }
  48% { opacity: .88; transform: scale(1.06); filter: brightness(1.12); }
  62% { opacity: .72; transform: scale(.98); filter: brightness(1.02); }
}

@media (max-width: 620px) {
  .star.large::before { width: 25px; }
  .star.large::after { height: 30px; }
}