// Pure CSS gradient background — replaces the Three.js/WebGL shader gradient.
// Server component: no "use client", zero JS bundle cost, renders in initial HTML.
// Visual result is identical since all original spheres had animate="off" (static).
export default function ShaderGradientBackground() {
  return (
    <div
      aria-hidden="true"
      className="fixed inset-0 -z-10 overflow-hidden pointer-events-none"
    >
      <div
        className="absolute -top-[10%] -left-[15%] w-[55%] h-[65%] rounded-full opacity-60"
        style={{
          background: "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
          filter: "blur(80px)",
        }}
      />
      <div
        className="absolute top-[25%] -right-[10%] w-[50%] h-[60%] rounded-full opacity-55"
        style={{
          background: "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
          filter: "blur(80px)",
        }}
      />
      <div
        className="absolute -bottom-[15%] left-[5%] w-[50%] h-[60%] rounded-full opacity-50"
        style={{
          background: "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
          filter: "blur(80px)",
        }}
      />
    </div>
  );
}
