Ink Flow Waves

# Ink Flow Waves — Animated Background

## Goal
Build an organic 'liquid ink' background: 3 layered SVG wave bands slowly undulating with turbulence distortion. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Base: charcoal #101113. Waves: 3 horizontal SVG path bands stacked in the lower 60%, fills at 5/8/12% white — closest band most opaque.
- Each band's path is a smooth wave (4 curve segments) spanning 120% width for seamless horizontal looping.
- One shared SVG filter: feTurbulence (fractalNoise, baseFrequency 0.008) + feDisplacementMap (scale 24) applied to the band group — turns clean curves liquid.
- Above waves: clean negative space for content; a faint horizontal hairline at the waterline adds structure.
- Bands sit in an overflow-hidden absolute layer; children above.

## Motion Spec
- Horizontal drift: bands translateX loop at 40s/55s/70s (slower = nearer — counterintuitive but reads better here).
- Vertical breath: each band translateY ±8px on offset 12-18s loops.
- Animate turbulence baseFrequency subtly (0.008→0.011→0.008 over 20s) via JS for living distortion; static fallback under reduced-motion.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<InkFlow bands?: 2|3 tone?: 'mono'|'accent' children />` — accent tints the nearest band with brand color at 15%.

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