Marquee Carousel Strip

# Marquee Carousel Strip — Carousel Component

## Goal
Build a horizontally looping strip of cards that auto-scrolls like a marquee, can be grabbed and scrubbed, and snaps to the nearest card on release. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Render the card set twice back-to-back and translate by -50% for a seamless loop — never animate `scrollLeft`.
- Cards are fixed-width (280px desktop / 220px mobile) with a 16px gutter; the strip is `overflow: hidden` with 32px gradient masks at both edges.
- Cursor becomes `grab`, then `grabbing` while dragging; no visible scrollbar at any breakpoint.
- Include an optional paused state on hover — on by default for card sets with links, off for pure logo walls.

## Motion Spec
- Base drift 30px/s via `transform: translate3d`, driven by rAF with delta-time so speed is frame-rate independent.
- Drag adds velocity; on release, momentum decays over ~800ms then snaps to the nearest card boundary with a 320ms ease-out.
- Direction reverses smoothly (over 400ms) rather than flipping instantly when `direction` changes.
- Reduced motion: no drift at all — becomes a plain scroll-snap container with visible arrows.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- Props: `speed?: number` (px/s, default 30), `direction?: 'left' | 'right'`, `pauseOnHover?: boolean`, `snap?: boolean`.
- Children are the cards; the component clones them internally for the loop and marks clones `aria-hidden`.
- Keyboard: arrow keys move one card, Home/End jump to ends, and focus inside a card pauses the drift.

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