/* Animated space background — shared across index, invite, secret */

.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

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

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: float var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0.4;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -30px) scale(1.1); }
  66%      { transform: translate(-20px, 20px) scale(0.9); }
}

.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
  transform-origin: right center;
  animation: shoot var(--duration) linear infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes shoot {
  0%   { transform: translate(0, 0) rotate(-26.57deg); opacity: 0; }
  5%   { opacity: 1; }
  20%  { transform: translate(300px, -150px) rotate(-26.57deg); opacity: 0; }
  100% { transform: translate(300px, -150px) rotate(-26.57deg); opacity: 0; }
}