Neon Ribbon Flow

# Neon Ribbon Flow — Animated Background

## Goal
Build a dark background of 4-5 glowing ribbons: wide SVG bezier paths whose gradient strokes flow along the curve endlessly. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Base: deep navy-black #06070F; ribbons in cyan #22D3EE, violet #8B5CF6, magenta #EC4899 — max 3 hues, no rainbow.
- Ribbon paths: smooth S-curves spanning 120% width (off-canvas ends), stroke-width 40-90px at 25-45% opacity, blur-[2px] plus an 8px outer glow via drop-shadow.
- Flow effect: animate strokeDasharray/dashoffset OR a gradient transform so light appears to travel along each ribbon, 8-14s per pass, staggered phases.
- Ribbons sit at different z-depths: farther ones dimmer + more blur; one 'hero' ribbon crosses behind where the headline will sit.
- Optional subtle scanline/noise overlay at 4% opacity for texture.

## Motion Spec
- Path shapes breathe: control points shift ±20px over 20s loops (CSS transform on grouped paths, not path re-computation — keeps 60fps).
- Cursor influence (desktop): nearest ribbon brightens 15% within 200px, 300ms ease.
- Reduced-motion: static ribbons with one slow opacity shimmer only.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<NeonRibbonFlow hues?: string[] ribbonCount?: number speed?: 'slow'|'normal' className? />`

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