/* ===== animated cosmic background (GPU-only transforms) ===== */
.space-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 800px at 75% -10%, color-mix(in srgb, var(--violet-700) 55%, transparent), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, color-mix(in srgb, #14204a 70%, transparent), transparent 55%),
    radial-gradient(600px 600px at 50% 50%, color-mix(in srgb, var(--space-700) 40%, transparent), transparent 70%),
    var(--space-900);
}

/* three star layers; each is a big box-shadow dot field tiled via transform parallax */
.stars { position: absolute; inset: -50% -50%; width: 200%; height: 200%; will-change: transform; }
.stars::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: repeat;
}
.stars.s1 { animation: drift1 120s linear infinite; }
.stars.s2 { animation: drift2 90s linear infinite; }
.stars.s3 { animation: drift3 60s linear infinite; }

.stars.s1::after {
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
                    radial-gradient(1.5px 1.5px at 120px 80px, #cfe, transparent),
                    radial-gradient(1px 1px at 200px 160px, #fff, transparent),
                    radial-gradient(1.5px 1.5px at 300px 40px, #e6f, transparent);
  background-size: 350px 350px; opacity: .55;
  animation: twinkle 6s ease-in-out infinite;
}
.stars.s2::after {
  background-image: radial-gradient(1px 1px at 50px 60px, #fff, transparent),
                    radial-gradient(1px 1px at 160px 200px, #adf, transparent),
                    radial-gradient(1px 1px at 260px 120px, #fff, transparent);
  background-size: 280px 280px; opacity: .4;
  animation: twinkle 8s ease-in-out infinite .5s;
}
.stars.s3::after {
  background-image: radial-gradient(1px 1px at 80px 40px, #fff, transparent),
                    radial-gradient(1px 1px at 180px 150px, #f9f, transparent);
  background-size: 220px 220px; opacity: .3;
  animation: twinkle 5s ease-in-out infinite 1s;
}

@keyframes drift1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-350px,0); } }
@keyframes drift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-120px,-280px,0); } }
@keyframes drift3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(80px,-220px,0); } }
@keyframes twinkle { 0%,100% { opacity: .3; } 50% { opacity: .65; } }

/* occasional shooting star */
.shooting {
  position: absolute; top: 12%; left: -10%;
  width: 160px; height: 2px;
  background: linear-gradient(90deg, transparent, #fff, var(--accent-2));
  border-radius: 2px; opacity: 0;
  transform: rotate(18deg);
  animation: shoot 9s ease-in infinite;
  filter: drop-shadow(0 0 6px var(--accent-2));
}
@keyframes shoot {
  0%, 88% { opacity: 0; transform: translate(0,0) rotate(18deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(120vw, 40vh) rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .stars, .stars::after, .shooting { animation: none !important; }
  .shooting { display: none; }
}