Bauhaus Geometry Hero

Build a "Bauhaus Geometry Hero" React component.

CONCEPT: A hero that is a Bauhaus poster: a 3x3 grid of primary geometric tiles beside a stacked uppercase headline. Clicking reshuffles the composition.

LAYOUT & CONTENT:
- Left: 'FORM / FOLLOWS / FUN' in Syne 800, one word per line, the middle word in red.
- Right: 3x3 grid of tiles; each tile is a square with a circle, quarter-circle or half-disc in red, blue, yellow or black.
- Bottom: tiny label 'Est. 1919, Weimar' and a round 'Shuffle' button.

INTERACTIONS & MOTION:
- Shuffle rotates each tile's inner shape by a random multiple of 90° and swaps colors, staggered 40ms, spring stiffness 260 damping 16.
- Hovering a tile scales its shape to 1.12.

DESIGN SYSTEM — Bauhaus:
- Primary red #E63322, blue #1F4E9E, yellow #F6C21B on off-white #F3EEE3, black #111 type.
- Pure geometric shapes only: circles, squares, quarter-circles, half-discs.
- Type: Syne (800) set tight and uppercase; strict grid alignment.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring"). Animate transform and opacity only. Respect prefers-reduced-motion via useReducedMotion().
- Icons: lucide-react where icons are needed.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.