Halcyon Breath

# Halcyon Breath — Wellness Practice Website

## Goal
Build a production-ready wellness practice website called "Halcyon Breath". Overall vibe: grounded, quiet, unhurried — the pace of slow breathing; nothing on this page is in a hurry. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: warm paper #F2EEE6 base, moss #5F6F52, soft clay #C8A68B, ink #26251F; zero saturated colors
- **Typography**: gentle serif (e.g. Fraunces light) display at 64-88px, airy humanist sans body with generous 1.7 line-height
- **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** — whisper-thin: wordmark left, four text links right, no background fill, 1px hairline only after scroll.
2. **Hero** — illustrated scene (moss stones, tall grass, distant hills, birds) in muted organic tones; headline 'Slow down. You've arrived.' in oversized serif over it; single ghost CTA.
3. **Services** — 3 soft cards (Breathwork / Guided Retreats / Sound Sessions) with hand-drawn line icons that stroke-draw on reveal.
4. **How it works** — vertical timeline of 4 steps, each entering with a long 900ms ease-out fade — pacing the page itself as a calm exercise.
5. **Testimonial** — one quote on clay-toned block, serif italic, author in small caps.
6. **Footer** — quiet: address, one email link, 'Be well.' sign-off.

## Motion
- Every reveal is slow by design: 800-1000ms opacity + 12px rise, 200ms stagger — restraint is the aesthetic.
- Hero grass layer sways ±1.5° over 7s; birds translate across the sky on a 30s loop, once per direction.
- Section transitions use long fade gaps (extra 120px padding) — whitespace as pacing.
- 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
- Add a hidden easter egg: pressing 'b' starts a 4-7-8 breathing circle overlay with a soft ring animation.
- No autoplay audio/video anywhere — this audience chose quiet.

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