<template>
  <div class="pointer-events-none absolute inset-0 z-0">
    <!-- Light theme (dark stars) -->
    <div class="stars-theme-light absolute inset-0 dark:hidden">
      <div class="stars-layer stars-layer--far" aria-hidden="true" />
      <div class="stars-layer stars-layer--mid" aria-hidden="true" />
      <div class="stars-layer stars-layer--near" aria-hidden="true" />
    </div>

    <!-- Dark theme (bright stars) -->
    <div class="stars-theme-dark absolute inset-0 hidden dark:block">
      <div class="stars-layer stars-layer--far" aria-hidden="true" />
      <div class="stars-layer stars-layer--mid" aria-hidden="true" />
      <div class="stars-layer stars-layer--near" aria-hidden="true" />
    </div>
  </div>
</template>

<style scoped>
:host,
.absolute {
  contain: layout style;
}

.stars-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  animation: starTwinkle 9s ease-in-out infinite;
  will-change: transform, opacity;
}

.stars-layer::before,
.stars-layer::after {
  content: "";
  position: absolute;
  inset: -2%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.45;
  will-change: transform, opacity, filter;
}

.stars-layer--far {
  opacity: 0.45;
  animation-duration: 18s;
  transform: translateZ(0);
}

.stars-layer--mid {
  opacity: 0.7;
  animation-duration: 24s;
  animation-delay: 0.6s;
  transform: translateZ(0);
}

.stars-layer--near {
  opacity: 0.9;
  animation-duration: 36s;
  animation-delay: 1.1s;
  transform: translateZ(0);
}

.stars-layer--far {
  animation-name: starTwinkle, starFloatFar;
  animation-duration: 10s, 26s;
  animation-delay: 0s, 0s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
.stars-layer--mid {
  animation-name: starTwinkle, starFloatMid;
  animation-duration: 11s, 32s;
  animation-delay: 1.2s, 0.6s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
.stars-layer--near {
  animation-name: starTwinkle, starFloatNear;
  animation-duration: 12s, 38s;
  animation-delay: 2.1s, 1.4s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}

.stars-layer--far::before {
  animation:
    starSparkle 7.5s ease-in-out infinite 0.8s,
    starFloatFar 28s ease-in-out infinite 0.6s alternate;
}
.stars-layer--far::after {
  animation:
    starSparkle 8.5s ease-in-out infinite 1.4s,
    starFloatFar 30s ease-in-out infinite 1s alternate;
}

.stars-layer--mid::before {
  animation:
    starSparkle 7s ease-in-out infinite 0.3s,
    starFloatMid 34s ease-in-out infinite 0.8s alternate;
}
.stars-layer--mid::after {
  animation:
    starSparkle 8s ease-in-out infinite 1.1s,
    starFloatMid 36s ease-in-out infinite 1.2s alternate;
}

.stars-layer--near::before {
  animation:
    starSparkle 6.5s ease-in-out infinite 0.6s,
    starFloatNear 40s ease-in-out infinite 1.4s alternate;
}
.stars-layer--near::after {
  animation:
    starSparkle 7.2s ease-in-out infinite 1.3s,
    starFloatNear 42s ease-in-out infinite 1.8s alternate;
}

/* Theme-specific gradients (like HeroBackgroundGrid approach) */
/* Light theme: dark stars */
.stars-theme-light .stars-layer--far {
  background-image:
    radial-gradient(
      0.9px 0.9px at 3% 7%,
      rgba(0, 0, 0, 0.45) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 8% 26%,
      rgba(0, 0, 0, 0.4) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 15% 78%,
      rgba(0, 0, 0, 0.38) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 22% 42%,
      rgba(0, 0, 0, 0.42) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 29% 13%,
      rgba(0, 0, 0, 0.4) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 35% 56%,
      rgba(0, 0, 0, 0.42) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 41% 88%,
      rgba(0, 0, 0, 0.38) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 48% 34%,
      rgba(0, 0, 0, 0.42) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 53% 9%,
      rgba(0, 0, 0, 0.4) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 59% 49%,
      rgba(0, 0, 0, 0.42) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 65% 73%,
      rgba(0, 0, 0, 0.38) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 71% 22%,
      rgba(0, 0, 0, 0.42) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 77% 60%,
      rgba(0, 0, 0, 0.4) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 83% 84%,
      rgba(0, 0, 0, 0.4) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 90% 31%,
      rgba(0, 0, 0, 0.42) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 96% 12%,
      rgba(0, 0, 0, 0.4) 50%,
      transparent 52%
    );
}
.stars-theme-light .stars-layer--mid {
  background-image:
    radial-gradient(
      1.2px 1.2px at 6% 18%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 12% 68%,
      rgba(0, 0, 0, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 18% 38%,
      rgba(0, 0, 0, 0.58) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 24% 9%,
      rgba(0, 0, 0, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 31% 51%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 37% 82%,
      rgba(0, 0, 0, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 44% 27%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 50% 5%,
      rgba(0, 0, 0, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 56% 44%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 62% 72%,
      rgba(0, 0, 0, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 68% 20%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 74% 58%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 80% 86%,
      rgba(0, 0, 0, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 86% 33%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 92% 11%,
      rgba(0, 0, 0, 0.55) 50%,
      transparent 52%
    );
}
.stars-theme-light .stars-layer--near {
  background-image:
    radial-gradient(
      1.6px 1.6px at 5% 62%,
      rgba(0, 0, 0, 0.65) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.8px 1.8px at 14% 24%,
      rgba(0, 0, 0, 0.7) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.7px 1.7px at 23% 48%,
      rgba(0, 0, 0, 0.65) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.6px 1.6px at 33% 12%,
      rgba(0, 0, 0, 0.7) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.8px 1.8px at 41% 69%,
      rgba(0, 0, 0, 0.68) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.7px 1.7px at 52% 36%,
      rgba(0, 0, 0, 0.7) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.6px 1.6px at 61% 9%,
      rgba(0, 0, 0, 0.68) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.9px 1.9px at 69% 54%,
      rgba(0, 0, 0, 0.7) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.7px 1.7px at 78% 80%,
      rgba(0, 0, 0, 0.65) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.8px 1.8px at 87% 28%,
      rgba(0, 0, 0, 0.7) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.6px 1.6px at 94% 6%,
      rgba(0, 0, 0, 0.68) 50%,
      transparent 52%
    );
}

/* Dark theme: bright stars */
.stars-theme-dark .stars-layer--far {
  background-image:
    radial-gradient(
      0.9px 0.9px at 3% 7%,
      rgba(160, 190, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 8% 26%,
      rgba(200, 220, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 15% 78%,
      rgba(220, 235, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 22% 42%,
      rgba(175, 200, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 29% 13%,
      rgba(190, 210, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 35% 56%,
      rgba(200, 220, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 41% 88%,
      rgba(220, 235, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 48% 34%,
      rgba(175, 200, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 53% 9%,
      rgba(190, 210, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 59% 49%,
      rgba(200, 220, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 65% 73%,
      rgba(220, 235, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 71% 22%,
      rgba(175, 200, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 77% 60%,
      rgba(190, 210, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 83% 84%,
      rgba(200, 220, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 90% 31%,
      rgba(220, 235, 255, 0.55) 50%,
      transparent 52%
    ),
    radial-gradient(
      0.9px 0.9px at 96% 12%,
      rgba(175, 200, 255, 0.55) 50%,
      transparent 52%
    );
}
.stars-theme-dark .stars-layer--mid {
  background-image:
    radial-gradient(
      1.2px 1.2px at 6% 18%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 12% 68%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 18% 38%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 24% 9%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 31% 51%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 37% 82%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 44% 27%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 50% 5%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 56% 44%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 62% 72%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 68% 20%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 74% 58%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 80% 86%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 86% 33%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.2px 1.2px at 92% 11%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 52%
    );
}
.stars-theme-dark .stars-layer--near {
  background-image:
    radial-gradient(
      1.6px 1.6px at 5% 62%,
      rgba(255, 245, 225, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.8px 1.8px at 14% 24%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.7px 1.7px at 23% 48%,
      rgba(255, 248, 235, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.6px 1.6px at 33% 12%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.8px 1.8px at 41% 69%,
      rgba(255, 245, 225, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.7px 1.7px at 52% 36%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.6px 1.6px at 61% 9%,
      rgba(255, 248, 235, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.9px 1.9px at 69% 54%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.7px 1.7px at 78% 80%,
      rgba(255, 245, 225, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.8px 1.8px at 87% 28%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 52%
    ),
    radial-gradient(
      1.6px 1.6px at 94% 6%,
      rgba(255, 248, 235, 0.95) 50%,
      transparent 52%
    );
}

@keyframes starTwinkle {
  0%,
  100% {
    opacity: 0.65;
  }
  40% {
    opacity: 0.92;
  }
  60% {
    opacity: 0.8;
  }
}

@keyframes starSparkle {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    opacity: 0.45;
  }
  50% {
    filter: brightness(1.25) saturate(1.05);
    opacity: 0.7;
  }
}

@keyframes starFloatFar {
  0% {
    transform: translate3d(0px, 0px, 0) scale(1);
  }
  25% {
    transform: translate3d(10px, -6px, 0) scale(1.005);
  }
  50% {
    transform: translate3d(4px, 8px, 0) scale(1);
  }
  75% {
    transform: translate3d(-8px, 2px, 0) scale(0.995);
  }
  100% {
    transform: translate3d(0px, 0px, 0) scale(1);
  }
}

@keyframes starFloatMid {
  0% {
    transform: translate3d(0px, 0px, 0) scale(1);
  }
  25% {
    transform: translate3d(14px, -10px, 0) scale(1.004);
  }
  50% {
    transform: translate3d(6px, 12px, 0) scale(1);
  }
  75% {
    transform: translate3d(-12px, 4px, 0) scale(0.996);
  }
  100% {
    transform: translate3d(0px, 0px, 0) scale(1);
  }
}

@keyframes starFloatNear {
  0% {
    transform: translate3d(0px, 0px, 0) scale(1);
  }
  25% {
    transform: translate3d(18px, -12px, 0) scale(1.003);
  }
  50% {
    transform: translate3d(8px, 16px, 0) scale(1);
  }
  75% {
    transform: translate3d(-16px, 6px, 0) scale(0.997);
  }
  100% {
    transform: translate3d(0px, 0px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars-layer {
    animation: none;
    opacity: 0.5;
  }
}
</style>
