Create a reusable animated mesh gradient background component, pure CSS, no canvas and no JavaScript.

STRUCTURE
An absolutely positioned container with overflow hidden and pointer-events none, sitting at z-index 0 behind its section's content. Inside it, four div layers, each a radial-gradient blob:
- Blob 1: 38rem × 26rem at 18% 12%, violet at 45% opacity
- Blob 2: 34rem × 24rem at 82% 4%, cyan at 38% opacity
- Blob 3: 30rem × 22rem at 55% 42%, magenta at 32% opacity
- Blob 4: 26rem × 20rem at 8% 78%, violet at 28% opacity

Each fades to transparent by 70% of its radius. Apply filter: blur(28px) to the container so the blobs melt into each other rather than reading as four circles.

MOTION
Give each blob its own keyframe loop between 22s and 34s, ease-in-out, infinite, alternate, with staggered negative delays so they never sync up. Translate no more than 6% and scale between 1 and 1.15. Nothing rotates — rotation makes gradients look like they are spinning, which reads as cheap.

VARIANTS
Expose CSS custom properties for the three colours and an --intensity multiplier on opacity, so the same component works as a loud hero backdrop or a barely-there section wash.

RULES
Under prefers-reduced-motion, keep the gradient but remove all animation. Set will-change: transform on the blobs only while animating.