/* starfield.css
   A fixed, full-viewport animated night-sky background: twinkling dot
   stars plus occasional shooting stars streaking across. Positions,
   sizes, and timings are randomized per-star via inline custom
   properties set by starfield.js — the keyframes here just consume
   them. No canvas, no images, no dependencies. */

.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #050505;
  pointer-events: none;
}

/* Used when the starfield is mounted inside a smaller, already-clipped
   container (like the editor's phone-shaped live preview) instead of
   covering the whole browser viewport. `position: fixed` on a plain
   descendant ignores its parent's `overflow: hidden` and would otherwise
   render behind the entire page. */
.starfield--contained {
  position: absolute;
}

.starfield .star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  animation-name: star-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: var(--star-min, 0.2);
    transform: scale(1);
  }
  50% {
    opacity: var(--star-max, 1);
    transform: scale(1.2);
  }
}

.starfield .shooting-star {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  opacity: 0;
  animation-name: star-shoot;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}

@keyframes star-shoot {
  0% {
    transform: translate(0, 0) rotate(var(--shoot-angle, -35deg));
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  24% {
    transform: translate(-360px, 240px) rotate(var(--shoot-angle, -35deg));
    opacity: 0;
  }
  100% {
    transform: translate(-360px, 240px) rotate(var(--shoot-angle, -35deg));
    opacity: 0;
  }
}