Wavecast Studios

# Wavecast — Podcast Network Website

## Goal
Build a production-ready podcast network website called "Wavecast". Overall vibe: late-night radio warmth with modern streaming polish. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: deep plum #17111F base, cream text #F2EDE6, amber #F59E0B accent; each show gets its own secondary hue used on its cards
- **Typography**: chunky display serif for show titles, clean sans UI; timestamps and durations in mono
- **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** — logo, Shows/Episodes/About/Advertise, persistent mini-player slot on the right (appears after any play click).
2. **Hero** — 'Stories worth your commute' headline over an animated waveform ribbon flowing across the viewport; featured episode card floating on it with play button.
3. **Show shelf** — horizontal row of 6 show covers, each tilts toward cursor; active show expands to reveal tagline + latest episode.
4. **Latest episodes** — list rows: cover thumb, title, show badge, duration, animated 5-bar mini waveform on the playing row; play swaps to pause in place.
5. **Hosts** — 3 host cards with portrait, one-liner, and their show's hue as a card glow.
6. **Reviews band** — star ratings + short listener quotes rotating every 6s with fade.
7. **Subscribe row** — platform buttons (Spotify/Apple/RSS) with brand-tinted hovers.
8. **Footer** — newsletter 'One great episode, every Friday', socials, network jobs link.

## Motion
- Hero waveform is an SVG path morphing between 3 states on an 8s loop, amplitude reacts subtly to cursor Y.
- Mini waveform bars on the playing row animate at staggered speeds — the universal 'now playing' cue.
- Show covers use 3D tilt capped at 6° with a moving specular highlight.
- 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
- Mini-player persists across the page with play/pause + scrubber; collapses to a pill on mobile.
- Each show's accent hue derives from its cover art — state this so the AI picks harmonious colors.

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