Fireworks Background

/* Index-derived positions — see StarsBackground for why this must not be random. */
const SPARKS = Array.from({ length: 12 }, (_, i) => ({
  left: 10 + ((i * 29) % 80),
  top: 20 + ((i * 43) % 60),
  delay: i * 0.4,
}));

export function FireworksBackground({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative grid h-40 place-items-center overflow-hidden rounded-xl">
      <div className="absolute inset-0" aria-hidden>
        {SPARKS.map((s, i) => (
          <span key={i} className="absolute size-1 animate-[firework_2s_ease-out_infinite] rounded-full bg-white"
            style={{ left: `${s.left}%`, top: `${s.top}%`, animationDelay: `${s.delay}s` }} />
        ))}
      </div>
      <div className="relative">{children}</div>
    </div>
  );
}