/* Scene elements */
#scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
}

#twinkles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* Star styling */
.star {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 5s infinite ease-in-out;
  transform: scale(0);
  pointer-events: none;
}

/* Shooting star styling */
.shooting-star {
  position: absolute;
  width: calc(var(--size) * 3px);
  height: calc(var(--size) * 1px);
  background: linear-gradient(90deg, 
    hsla(var(--hue), 100%, 80%, 0) 0%, 
    hsla(var(--hue), 100%, 80%, 0.4) 50%, 
    hsla(var(--hue), 100%, 90%, 1) 100%);
  border-radius: 100px;
  filter: blur(1px);
  animation: shoot 5s infinite linear;
  opacity: 0;
  transform: rotate(30deg);
  transform-origin: right;
  pointer-events: none;
}

/* Animations */
@keyframes twinkle {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(30deg) scale(0.5);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  20% {
    transform: translateX(-100vw) translateY(100vh) rotate(30deg) scale(1);
    opacity: 0;
  }
  100% {
    transform: translateX(-100vw) translateY(100vh) rotate(30deg) scale(1);
    opacity: 0;
  }
}

/* Hide twinkles on non-desktop devices */
@media (max-width: 1024px) {
  #twinkles-container,
  .star,
  .shooting-star {
    display: none !important;
  }
}