Depth Parallax Hero

# Depth Parallax Hero — Hero Section

## Goal
Build a hero section built from five stacked depth planes (far backdrop, mid scenery, subject, foreground frame, grain overlay) that separate as the page scrolls and tilt subtly with the pointer. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Planes are absolutely positioned siblings in a single `relative` container with `overflow: hidden`; each carries a `data-depth` from 0 (static) to 1 (most travel).
- Headline and CTA live on the subject plane so they inherit its motion — never leave type on a static layer while the art moves.
- Foreground frame is a 40px inset vignette that crops the scene; it moves opposite to the backdrop for genuine depth.
- Grain overlay: an SVG feTurbulence at 4% opacity, `mix-blend-mode: overlay`, completely static.
- Section is exactly 100svh (not 100vh) so mobile browser chrome does not clip the composition.

## Motion Spec
- Scroll: each plane translates Y by `progress * depth * 120px`; the backdrop also scales 1 → 1.06 so no edge gap appears.
- Pointer: tilt the whole stack by max 6deg on rotateX/rotateY, with each plane offset by `depth * 14px` — damp with a spring, do not track raw pointer position.
- Pointer motion is disabled below 768px; scroll parallax still runs.
- All transforms composited: `translate3d` + `rotate3d` only, `will-change: transform` on the planes and nowhere else.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- Props: `layers: { src: string; depth: number; alt?: string }[]`, `maxTilt?: number` (default 6), `travel?: number` (default 120).
- Children render on the subject plane so consumers control their own headline markup.
- Expose `onReady` so the host can hide a poster once all layer images have decoded.

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