/* ── Site-wide twinkling stars ──────────────────────────────────────
   Shared across all pages. Stars are absolutely anchored to the page
   (not the viewport). Animation is CSS time-based only — no scroll
   interaction, no parallax, no JS transforms.
   ──────────────────────────────────────────────────────────────── */

body { position: relative; }

.site-stars {
  position: absolute;
  inset: 0;          /* top:0 right:0 bottom:0 left:0 — spans full body height */
  z-index: 1;
  pointer-events: none;
}

.hstar {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: var(--lo, 0.15);
  animation: hStarTwinkle var(--d, 4s) var(--dl, 0s) ease-in-out infinite alternate;
}

@keyframes hStarTwinkle {
  0%   { opacity: var(--lo, 0.15); transform: scale(1);   }
  100% { opacity: var(--hi, 0.55); transform: scale(1.6); }
}