אתר למסיבת טכנו

Build a "Tiefdruck Techno Night" React component.

CONCEPT: The site for a 12-hour monthly techno night in an old salt works hall. Typography is the light show; the whole page breathes at 132 BPM. Safe strobing: nothing may flash more than 3 times per second.

LAYOUT & CONTENT:
- Nav (64px, hairline): 'TIEFDRUCK', LINEUP / TIMETABLE / VENUE / HOUSE RULES, orange 'TICKETS' button.
- Hero (720px): top left '12 HOURS / 1 ROOM / NO PHOTOS' and 'FRI 20.11.2026, 22:00 TO SAT 10:00'; top right a pulsing orange dot and '132 BPM'. The headline 'TIEF' (white) over 'DRUCK' (orange) at ~196px in Syne 800, tight tracking. Bottom row: one line of copy about the room ('One wall of bass bins, no VIP, no stage, the DJ is on the floor with you.') and a white 'FINAL RELEASE, ₪180' button.
- Oscilloscope band between hairlines.
- Lineup: 'LINEUP, IN ORDER OF APPEARANCE: NOT AT ALL' and five full-width rows of names at 104px (NADJA KOROLEVA B2B OREN SAAR, HALFTONE SOCIETY LIVE MODULAR SET, DEEP SALT ALL NIGHT CLOSING, MIRI ASHKAR, ROTOR 9 LIVE).
- Split section: HOUSE RULES on off-white (four numbered rules about camera stickers, water, consent) and TICKETS on orange (four tiers, the first two stamped SOLD OUT, a black buy button).
- Footer: an outlined 'SEE YOU DOWN' at 200px streaming sideways, then three small lines.

INTERACTIONS & MOTION:
- BEAT = 60/132 s. Each headline letter animates scaleY from 1 to 0.55-0.87 and back (origin bottom), one or two beats long, offset by quarter beats, so the word pumps like an EQ.
- Strobe: a radial orange wash at the top of the hero hits once every 4 beats (about 0.55 times per second) with steps(1), never faster than 3 per second.
- Lasers: nine SVG lines from an emitter at top centre fan toward a target x; with no pointer the target swings on a sine (period ~9s), with a pointer it follows the cursor through a soft spring (40/12).
- Oscilloscope: canvas waveform whose amplitude spikes on every kick (exp decay per beat), plus an orange kick bar.
- Lineup rows are marquees in alternating directions at different speeds (30-60s); hovering a row pauses it, turns it orange and shows the set time chip.
- SOLD OUT stamps slam in (scale 1.6 to 1, rotate -14 to -6, spring 400/14) when scrolled into view; rules slide in with stagger.

DESIGN SYSTEM — Rave Poster:
- Black #0A0A0A, white #F2F0EB, grey #7A7874, hairline #262624, one hot orange #FF3D00.
- Square corners, hairlines, no shadows, no blur, no gradients except the strobe wash.
- Syne 800 for display, IBM Plex Mono for everything else.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Ambient loops pause or go static under prefers-reduced-motion via useReducedMotion() and a CSS media query.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up. All brands are fictional.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, CSS or canvas, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices. Nothing on the page may grab focus or scroll the window.

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.