/* Sensus Communis | sc-stars.css
   Animierte Sterne ueber den Illustrationen (Startseite Nacht/Tag, Zeitgeist-Szene).
   Die Sterne sind aus den Bildern entfernt und liegen hier an genau ihren Stellen:
   Rauten, Punkte und Vierstrahler, die ruhig atmen und mit einem weichen Schein im Bild sitzen.
   --s ist die Groesse in Prozent der Bildbreite. */
.hx-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* gleiche Sterne wie der alte Nachthimmel: gedrehte Quadrate (Rauten), kein Schein,
   die Deckkraft atmet zwischen zwei Werten (stTwinkle) */
.hx-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * .62%);
  aspect-ratio: 1;
  background: var(--c, #F5F1E8);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: var(--lo, .35);
  animation: scStar var(--td, 5s) ease-in-out var(--dl, 0s) infinite both;
}
@keyframes scStar{
  0%,100% { opacity: var(--lo, .35); }
  50%     { opacity: .95; }
}
/* Quer- oder Hochformat: wie die Bilder */
.hx-stars--v { display: none; }
@media (orientation: portrait) {
  .hx-stars--h { display: none; }
  .hx-stars--v { display: block; }
}
.hx-stars--zv { display: none; }
@media (max-aspect-ratio: 1/1) {
  .hx-stars--zh { display: none; }
  .hx-stars--zv { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-stars i {
    animation: none;
    opacity: .85;
  }
}

/* alter Sternenhimmel der Startseite, auf das Nachtbild gelegt */
.hx-oldstars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hx-old {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hx-old--v { display: none; }
@media (orientation: portrait) {
  .hx-old--h { display: none; }
  .hx-old--v { display: block; }
}

/* ===== Gemalte Sterne der Nacht, jetzt funkelnd (Okt. 2026) =====
   Die Sterne des neuen Nachtbildes sind aus dem Bild entfernt und liegen hier an genau ihren
   Stellen: Vierstrahler (.s) und kleine Lichtpunkte. Jeder atmet in eigenem Takt, die
   Vierstrahler wachsen dabei leicht. Nur opacity/transform, laeuft auf der Grafikkarte und
   steht still, solange der Hero nicht im Bild ist. --s: Groesse in Prozent der Bildbreite. */
.hx-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hx-sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 13%, rgba(255,250,236,.6) 22%, rgba(255,246,226,0) 46%);
  opacity: var(--lo, .4);
  animation: hxSpark var(--td, 4s) ease-in-out var(--dl, 0s) infinite both;
}
.hx-sparks i.s {
  background: radial-gradient(circle, rgba(255,250,236,.55) 0, rgba(255,246,226,.18) 30%, rgba(255,246,226,0) 58%);
}
.hx-sparks i.s::before {
  content: "";
  position: absolute;
  inset: 22%;
  background: #FFFBF1;
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
}
@keyframes hxSpark {
  0%, 100% { opacity: var(--lo, .4); transform: scale(.82); }
  50%      { opacity: 1; transform: scale(1.12); }
}
.hx-sparks--v { display: none; }
@media (orientation: portrait) {
  .hx-sparks--h { display: none; }
  .hx-sparks--v { display: block; }
}
.ocean-sticky.is-idle .hx-sparks i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hx-sparks i { animation: none; opacity: .85; transform: none; }
}