Sparkles Particles

{Array.from({ length: 40 }).map((_, i) => {
  const size = Math.random() * 4 + 1;
  const left = Math.random() * 100;
  const delay = Math.random() * 5;
  const duration = Math.random() * 3 + 3;
  return (
    <div key={i} style={{
      position: "absolute",
      width: size, height: size,
      left: `${left}%`,
      top: `${Math.random() * 100}%`,
      borderRadius: "50%",
      backgroundColor: "#E1FF6C",
      animation: `sparkle-float ${duration}s ease-in-out ${delay}s infinite`,
      "--opacity": Math.random() * 0.5 + 0.3,
      "--drift": `${(Math.random() - 0.5) * 20}px`,
    }} />
  );
})}

@keyframes sparkle-float {
  0%, 100% { opacity: var(--opacity); transform: translateY(0) translateX(0); }
  50% { opacity: 1; transform: translateY(-20px) translateX(var(--drift)); }
}