/* stars.css — night-sky twinkle overlay for pukhraj-poorva.
 *
 * The stars themselves are BAKED into hero-night/00-base.webp — this overlay never
 * regenerates the sky. It only lays small additive glow sprites directly on top of
 * the brightest baked stars (js/stars.js supplies the coordinates) and pulses their
 * brightness above the resting bake via mix-blend-mode, so those points glint.
 *
 * Coordinate model matches the rest of the hero (see css/hero.css + build/build.cjs):
 * .star-field is inset:0 inside .scene--night, exactly covering the night base image's
 * box (2160x4654 canvas space), so left/top set as x*100% / y*100% land on the same
 * baked pixel every time. Sprite size uses cqw (container-query width of .hero, see
 * --fs elsewhere) so it scales with the hero the same way the hero type does, instead
 * of drifting off scale between the 100vw mobile hero and the 560px desktop cap.
 *
 * Two-layer-free: unlike the flowers/boat/parrots, a star sprite only ever runs ONE
 * transform loop (twinkle), so no wrapper/inner split is needed here.
 *
 * Twinkle shape: mostly dim (opacity 0) with a brief brighten swell near 80-85% of
 * the cycle, so stars glint occasionally rather than throb constantly. Three regular
 * variants for visual variety + one slower, brighter variant for the hero stars.
 * Transform-only + opacity (GPU-composited); js/stars.js sets --dur/--delay per sprite
 * for a desynchronized field. */

.star-field {
  position: absolute;
  inset: 0;
  z-index: 10; /* above the scene's cutouts (z 1-7), below hero-text (z 20) */
  pointer-events: none;
  contain: layout style paint;
}

.star {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 1.6cqw);
  height: var(--size, 1.6cqw);
  margin: calc(var(--size, 1.6cqw) / -2) 0 0 calc(var(--size, 1.6cqw) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 248, 227, 0.55) 35%,
    rgba(255, 248, 227, 0) 72%
  );
  mix-blend-mode: screen; /* fallback for browsers without plus-lighter */
  opacity: 0;
  will-change: transform, opacity;
  animation: star-twinkle-a var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}

@supports (mix-blend-mode: plus-lighter) {
  .star {
    mix-blend-mode: plus-lighter;
  }
}

.star--b {
  animation-name: star-twinkle-b;
}
.star--c {
  animation-name: star-twinkle-c;
}
.star--hero {
  animation-name: star-twinkle-hero;
}

/* mostly dim, brief brighten swell near the end of the cycle */
@keyframes star-twinkle-a {
  0%,
  70% {
    opacity: 0;
    transform: scale(0.6);
  }
  82% {
    opacity: 0.6;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes star-twinkle-b {
  0%,
  62% {
    opacity: 0;
    transform: scale(0.55);
  }
  85% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.55);
  }
}

@keyframes star-twinkle-c {
  0%,
  76% {
    opacity: 0;
    transform: scale(0.6);
  }
  80% {
    opacity: 0.62;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* hero stars: slower, brighter swell */
@keyframes star-twinkle-hero {
  0%,
  55% {
    opacity: 0;
    transform: scale(0.7);
  }
  78% {
    opacity: 0.5;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* the inactive scene is inert (see css/hero.css .scene[data-inert]) — pause the
   twinkle loops instead of letting them run unseen underneath the active scene */
.scene[data-inert] .star {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  /* the baked sky already shows static stars — no sprite field needed */
  .star-field {
    display: none;
  }
}