// Soft drifting blob background + dotted grid

const Background = () => {
  const blobs = [
    { x: "8%",  y: "12%", size: 420, color: "var(--mint-300)", delay: "-2s",  duration: "32s" },
    { x: "78%", y: "8%",  size: 360, color: "var(--mint-400)", delay: "-8s",  duration: "28s" },
    { x: "62%", y: "62%", size: 480, color: "var(--green-500)", delay: "-14s", duration: "36s" },
    { x: "-6%", y: "70%", size: 380, color: "var(--mint-200)", delay: "-20s", duration: "30s" },
    { x: "30%", y: "120%", size: 520, color: "var(--green-600)", delay: "-6s", duration: "34s" },
  ];
  return (
    <>
      <div className="bg-blobs" aria-hidden="true">
        {blobs.map((b, i) => (
          <div
            key={i}
            className="blob"
            style={{
              left: b.x,
              top: b.y,
              width: b.size,
              height: b.size,
              background: b.color,
              animationDelay: b.delay,
              animationDuration: b.duration,
            }}
          />
        ))}
      </div>
      <div className="bg-grid" aria-hidden="true"></div>
    </>
  );
};

window.Background = Background;