// 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"
      style={{
        position: "fixed",
        inset: 0,
        zIndex: -1,
        overflow: "hidden",
        pointerEvents: "none",
      }}
    >
      {/* Upper-left: crimson → pink (was Sphere 1: posX=-2.5, posY=1.5) */}
      <div
        style={{
          position: "absolute",
          top: "-10%",
          left: "-15%",
          width: "55%",
          height: "65%",
          background:
            "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
          filter: "blur(100px)",
          opacity: 0.6,
        }}
      />
      {/* Right-center: pink → crimson (was Sphere 2: posX=2.0, posY=-0.5) */}
      <div
        style={{
          position: "absolute",
          top: "25%",
          right: "-10%",
          width: "50%",
          height: "60%",
          background:
            "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
          filter: "blur(100px)",
          opacity: 0.55,
        }}
      />
      {/* Lower-left: orange → pink (was Sphere 3: posX=-0.5, posY=-2.0) */}
      <div
        style={{
          position: "absolute",
          bottom: "-15%",
          left: "5%",
          width: "50%",
          height: "60%",
          background:
            "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
          filter: "blur(100px)",
          opacity: 0.5,
        }}
      />
    </div>
  );
}