.home-hero {
  background-image:
    radial-gradient(ellipse at 8% 18%, rgba(124, 58, 237, 0.12), transparent 36%),
    radial-gradient(ellipse at 92% 76%, rgba(167, 139, 250, 0.1), transparent 40%);
}

html.dark .home-hero {
  background-image:
    radial-gradient(ellipse at 8% 18%, rgba(124, 58, 237, 0.18), transparent 38%),
    radial-gradient(ellipse at 92% 76%, rgba(139, 92, 246, 0.14), transparent 42%);
}

.hero-constellations {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

.hero-shooting-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-shooting-star {
  position: absolute;
  display: block;
  color: var(--color-brand-600, #713de0);
  opacity: 0;
  --sparkle-opacity: 0.18;
  --trail-opacity: 0.34;
  --star-delay: 0s;
  pointer-events: none;
  animation: hero-sparkle-rise 12s linear var(--star-delay) infinite both;
}

.hero-shooting-star::after {
  content: "";
  position: absolute;
  top: 68%;
  left: 50%;
  width: 3px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(to bottom, currentColor, transparent);
  box-shadow: 0 0 8px currentColor;
  filter: blur(1.5px);
  opacity: 0;
  transform: translateX(-50%) scaleY(0.2);
  transform-origin: top center;
  animation: hero-sparkle-trail 12s linear var(--star-delay) infinite both;
}

.hero-sparkle { display: block; width: 100%; height: 100%; fill: currentColor; }

html.dark .hero-shooting-star {
  color: var(--color-brand-400, #a78bfa);
  --sparkle-opacity: 0.24;
  --trail-opacity: 0.4;
}

.hero-shooting-star--one { width: 52px; height: 52px; left: 8%; bottom: -56px; --star-delay: 0s; }
.hero-shooting-star--two { width: 36px; height: 36px; right: 10%; bottom: -42px; --star-delay: 2.4s; }
.hero-shooting-star--three { width: 28px; height: 28px; left: 25%; bottom: -34px; --star-delay: 4.8s; }
.hero-shooting-star--four { width: 22px; height: 22px; right: 30%; bottom: -28px; --star-delay: 7.2s; }
.hero-shooting-star--five { width: 16px; height: 16px; left: 56%; bottom: -22px; --star-delay: 9.6s; }

@keyframes hero-sparkle-rise {
  0% { transform: translateY(0) rotate(-12deg) scale(0.7); opacity: 0; }
  14% { opacity: var(--sparkle-opacity); }
  78% { opacity: var(--sparkle-opacity); }
  100% { transform: translateY(-90vh) rotate(16deg) scale(1); opacity: 0; }
}

@keyframes hero-sparkle-trail {
  0%, 8% { opacity: 0; transform: translateX(-50%) scaleY(0.2); }
  18% { opacity: var(--trail-opacity); transform: translateX(-50%) scaleY(0.8); }
  76% { opacity: var(--trail-opacity); transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(0.3); }
}

.audience-sky-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

@media (max-width: 640px) {
  .hero-shooting-star--one { width: 32px; height: 32px; left: 4%; bottom: -36px; }
  .hero-shooting-star--two { width: 24px; height: 24px; right: 5%; bottom: -30px; }
  .hero-shooting-star--three { width: 18px; height: 18px; left: 15%; bottom: -24px; }
  .hero-shooting-star--four { width: 16px; height: 16px; right: 12%; bottom: -20px; }
  .hero-shooting-star--five { display: none; }
  .hero-shooting-star::after { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shooting-star,
  .hero-shooting-star::after { animation: none; opacity: 0; }
}