---
interface Props {
  class?: string;
  color?: string;
}

const { class: className = "", color = "bg-accent/20" } = Astro.props;
---

<div class={`absolute rounded-full blur-[80px] pointer-events-none mix-blend-multiply ${color} ${className}`}></div>

<style>
  div {
    will-change: transform;
    animation: float 20s ease-in-out infinite;
  }

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