Cloud Drift Background

# Cloud Drift — Animated Background

## Goal
Build a full-section sky background: 3-4 blurred gradient 'cloud banks' drifting horizontally at different speeds behind content. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Base: vertical gradient sky (e.g. pale blue #DCE7F2→warm horizon #F6E8DC) — prop-controlled light or dusk variant.
- Clouds: absolutely positioned blobs with border-radius 50%, blur-3xl, white at 30-60% opacity; sizes 30-60vw; 3 depth layers (far: smaller/slower/fade, near: larger/faster/brighter).
- Far layer loops at 90s, mid 60s, near 40s — slow enough to feel ambient, never distracting.
- Optional sun/moon disc: soft radial glow fixed in upper third, gentle 8s pulse.
- A `veil` prop adds a bottom fade-to-white scrim so overlaid text stays readable.

## Motion Spec
- Drift via transform: translateX loops with duplicated cloud set for seamless wraparound (no snapping).
- Slight vertical bob ±8px on each layer with independent periods — clouds never move mechanically.
- prefers-reduced-motion: freeze drift, keep a static but still-beautiful composition.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<CloudDrift variant='day'|'dusk' veil?: boolean className? />` — absolutely fills its positioned parent.

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