/*
 * Sternenhimmel – Styles für stars.html
 * Die Sterne selbst erzeugt js/stars.js.
 */

/* Browser-Standardabstände entfernen, damit das SVG randlos ist */
svg  {
  padding: 0;
  margin: 0;
  border: 0
}

/* Bezugsrahmen für #nightsky: Ohne "relative" wäre der Himmel mit
   height: 100% nur so hoch wie das Fenster statt wie die ganze Seite. */
body {
  position: relative
}

/* Nachthimmel: unten heller Blauton (--night-300), nach oben fast Schwarz (--night-000).
   Der Prozentwert hinter --night-000 legt fest, wo der Verlauf endet:
   kleiner (z. B. 40%) = hellere Fläche kleiner, größer (z. B. 80%) = größer.
   Ohne Wert reicht der Verlauf bis 100 % (bis in die oberen Ecken). */
#nightsky {
  /* background: radial-gradient(circle at bottom); */
  background: radial-gradient(circle at bottom, var(--color-horizon-blue), var(--color-black) 10%);
  /* Als Hintergrund der ganzen Seite:
     absolute + 100 %: deckt den ganzen body ab (nicht nur das Fenster)
                       und scrollt mit dem Inhalt mit
     z-index -1:       liegt hinter allen Inhalten
     pointer-events:   Klicks gehen durch den Himmel hindurch */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none
}

/* Funkelnde Sterne (die Klasse setzt stars.js).
   Für die Größenänderung wird "transform: scale()" verwendet statt das
   SVG-Attribut "r" zu animieren, denn Safari kann "r" nicht animieren.
   fill-box + center: Jeder Stern skaliert um seine eigene Mitte. Ohne diese
   beiden Zeilen würden die Sterne über den Bildschirm wandern.
   Die Dauer (6s) muss zur Verzögerung in stars.js passen. */
.animate {
  transform-box: fill-box;
  transform-origin: center;
  animation: starFlash 6s ease-in-out infinite
}

/* Funkeln vor allem über die Helligkeit, die Größe ändert sich nur leicht.
   Stellschrauben im 50%-Schritt:
     opacity: höher (z. B. .6) = dezenter, niedriger (z. B. .2) = deutlicher
     scale:   1 = Größe bleibt gleich
   0% und 100% sind gleich, damit es beim Neustart keinen Sprung gibt. */
@keyframes starFlash {
  0%, 100% {
    opacity: 1;
    transform: scale(1)
  }
  50% {
    opacity: .4;
    transform: scale(.85)
  }
}