Magnetic CTA Cluster

# Magnetic CTA Cluster — Interactive Button Set

## Goal
Build a set of magnetic buttons (primary, ghost, icon-only) that translate toward the pointer while it is within an activation radius, with the inner label trailing the outer shell. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Each button is two nested elements: an outer shell that moves, and an inner label that moves at 40% of the shell's offset — the lag is what sells the weight.
- Activation radius = the button's bounding box inflated by 60px; pull maxes out at 12px translation.
- Primary: solid fill with a 1px inner highlight; ghost: 1px border that brightens with proximity; icon-only: 44px circle.
- Focus-visible ring sits on the shell and must not inherit the magnetic transform — the ring has to stay legible while the button moves.

## Motion Spec
- Pull is proportional to `1 - distance / radius`, eased with a spring (stiffness 260, damping 22).
- Return to rest over ~420ms when the pointer leaves the radius; never snap.
- Press: scale 0.97 with a 90ms ease-out, then release to 1 with a light overshoot.
- All pointer math in a single rAF shared across the cluster — one listener on the container, not one per button.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- Props: `radius?: number` (default 60), `strength?: number` (default 12), `as?: 'button' | 'a'` with correct semantics for each.
- Disable magnetism entirely on coarse pointers (`(pointer: coarse)`) and under `prefers-reduced-motion`.
- Forward refs and spread rest props so the buttons drop into existing forms and links unchanged.

## 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.