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

.sparkle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: fall linear forwards;
  transform-origin: center;
  background: #fff;
  border-radius: 50%;
  will-change: transform, opacity;
  filter: blur(0.5px);
  transition: opacity 0.2s ease-out;
}

@keyframes fall {
  0% {
    top: -10px;
    opacity: 0.9;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    top: 100vh;
    opacity: 0;
    transform: translateY(10px) rotate(var(--rotationEnd)) scale(var(--scale));
  }
}