Pulsewave Festival

# Pulsewave — Music Festival Website

## Goal
Build a production-ready music festival website called "Pulsewave". Overall vibe: 3am main stage — loud, electric, slightly dangerous; energy over polish. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: void black #050505, hot magenta #FF2E9A and laser cyan #00E5FF dual accents, white text; glow via layered box-shadows
- **Typography**: condensed display (druk-style) for headlines at 100-160px uppercase, mono for dates/times/stage labels
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — sticky, translucent black, 'Get tickets' button with pulsing magenta glow.
2. **Hero** — massive 'PULSEWAVE 26' with RGB-split chromatic aberration on load, dates + city in mono, background of slowly drifting neon light streaks (CSS only).
3. **Lineup marquee** — 3 stacked marquee rows at different speeds/directions: headliners huge, mid-tier medium, rising acts small; names glow cyan on hover.
4. **Stages** — 3 cards (Main / Warehouse / Ambient garden) with distinct accent treatments and a schedule peek on hover.
5. **Ticket tiers** — 3 passes with a live countdown to price increase; sold-out tier shown struck-through — scarcity is honest.
6. **Aftermovie** — 16:9 video placeholder with a play button that magnetizes toward the cursor.
7. **FAQ + travel** — accordion, dark, thin neon left-border on the open item.
8. **Footer** — newsletter 'Never miss a drop', socials, tiny equalizer bars animating next to the wordmark.

## Motion
- Hero RGB-split settles over 900ms on load, then a subtle 4s idle shimmer.
- Marquees run at 40/60/80s per loop, pause on hover.
- Countdown digits flip with a 3D rotateX card effect each second.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Glow is layered shadows (2px, 12px, 40px at decreasing opacity) — never CSS blur filters on text.
- Equalizer bars in the footer respect reduced-motion by freezing mid-height.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.