Gradient Mesh Drift

# Gradient Mesh Drift — Animated Background

## Goal
Build a breathing gradient-mesh background built from 5 radial-gradient blobs on a light or dark base. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Two theme presets: `light` (base #FAFAFC, blobs in pastel indigo/rose/amber/teal at 35-50% opacity) and `dark` (base #0A0A12, same hues at 18-25%).
- Blobs: 5 divs, sizes 40-70vw, blur-[100px], positioned at asymmetric anchor points (avoid centered symmetry — it looks templated).
- A 3% noise overlay via inline SVG feTurbulence data-URI to kill banding.
- Optional grid prop: 1px line grid at 3% opacity with radial mask fading from center.
- Wraps children; ensure text contrast by capping blob opacity under a `contrastSafe` flag.

## Motion Spec
- Each blob 'breathes': scale 1→1.15→1 and drifts ±4vw on 18-30s offset loops (all different durations; prime numbers help avoid sync).
- On pointer move (desktop only), blobs parallax 1-3% toward cursor with 2s lag — dreamy, not jittery.
- Reduced motion: static composition tuned to look complete.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<MeshBackground theme='light'|'dark' grid?: boolean contrastSafe?: boolean children />`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.