/* Sparkles Container */
.sparkles-container {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1; /* Place behind the mic button svg */
  left: auto; /* Remove automatic left */
  right: -20px; 
  margin: 0; /* Remove auto margins */
}

/* Sparkle Dots */
.sparkle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(250, 239, 93, 0.8); /* Base color */
  animation: flicker 2s infinite ease-in-out;
  opacity: 0;
  box-shadow: 0 0 6px rgba(250, 239, 93, 0.6); /* Add glow effect */
}

/* Small Dots */
.sparkle.small {
  width: 2px;
  height: 2px;
  animation-duration: 1.5s;
}

/* Medium Dots */
.sparkle.medium {
  width: 4px;
  height: 4px;
  animation-duration: 2s;
}

/* Big Dots */
.sparkle.big {
  width: 6px;
  height: 6px;
  animation-duration: 2.5s;
}

/* Extra sparkle variations */
.sparkle.tiny {
  width: 1px;
  height: 1px;
  animation-duration: 1.2s;
  background-color: rgba(255, 250, 160, 0.9); /* Lighter yellow */
}

.sparkle.large {
  width: 8px;
  height: 8px;
  animation-duration: 3s;
  background-color: rgba(245, 229, 83, 0.85); /* Slightly different gold */
  box-shadow: 0 0 8px rgba(245, 229, 83, 0.7);
}

.sparkle.bright {
  background-color: rgba(255, 255, 255, 0.95); /* White bright sparkle */
  box-shadow: 0 0 10px rgba(250, 239, 93, 0.8);
  animation-duration: 1.8s;
}

/* Add a different flicker pattern for variety */
@keyframes flicker-alt {
  0%, 100% { opacity: 0; }
  25% { opacity: 0.4; }
  50% { opacity: 1; }
  75% { opacity: 0.2; }
}

/* Assign alt animation to some sparkles */
.sparkle.alt-animation {
  animation: flicker-alt 2.2s infinite ease-in-out;
}

/* Flicker Animation */
@keyframes flicker {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}