Beam Grid Horizon

# Beam Grid Horizon — Animated Background

## Goal
Build a perspective 'floor grid + horizon glow + traveling beams' background for dark hero sections. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Floor: a div rotated with perspective (rotateX ~60°) carrying a repeating-linear-gradient grid (1px lines, 40px cells, cyan at 12%), masked to fade before the horizon line.
- Horizon: a 2px glowing line (accent color, blur + brighter core) across the section at ~38% height, with a radial glow bloom behind it.
- Beams: 3 vertical light streaks (linear-gradient, 2px wide, 40% height) that travel along grid columns from horizon toward viewer, fading as they approach.
- Sky above horizon: near-black with a faint radial vignette; optional tiny stars.
- Everything overflow-hidden; children render above with z-10.

## Motion Spec
- Grid scrolls toward viewer: background-position animates so cells flow outward, 3s linear infinite — the classic endless-drive effect.
- Beams launch on randomized 2-5s intervals at random columns (pick from 8 predefined lefts), 1.8s travel, ease-in.
- Horizon glow pulses ±15% intensity over 7s.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<BeamGrid accent?: string speed?: 'slow'|'normal' children />` — accent recolors grid, beams and horizon together via CSS var.

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