Orb Field Parallax

# Orb Field Parallax — Animated Background

## Goal
Build a light-theme background of 8-10 glassy orbs floating in 3 depth layers with scroll parallax. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Base: off-white #F7F8FB with an extremely soft top-center radial tint (brand color at 6%).
- Orbs: circles 40-220px; glass recipe = radial-gradient white highlight top-left, 1px white/60 border, backdrop-blur only for the 2 largest, inner shadow for volume; hues alternate two brand tints at 10-20%.
- 3 depth layers: far (small, blurrier, 30% opacity), mid, near (largest, sharpest) — parallax strength increases with nearness.
- Composition: cluster weight top-right and bottom-left, keep center-third clear for content readability.
- Section-height component wrapping children; orbs pointer-events-none.

## Motion Spec
- Idle float: each orb bobs ±10-18px on 8-16s offset sine loops with slight x drift.
- Scroll parallax: far layer moves at 0.05× scroll delta, mid 0.12×, near 0.22× (useScroll + useTransform).
- Orbs fade+scale in on mount with 60ms stagger, once.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<OrbField density?: 'calm'|'lively' tintA tintB 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.