Odyssey Voyage

# Odyssey — Travel Discovery Landing Page

## Goal
Build a production-ready travel discovery landing page called "Odyssey". Overall vibe: cinematic exploration — planetarium meets travel magazine; every destination feels like a place worth flying to. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: deep space #05070E base, atmospheric teal #2DD4BF accent, warm sand #E8D5B5 for editorial text blocks
- **Typography**: elegant serif headlines 64-96px, clean sans body; coordinates in mono micro-labels (e.g. 43.3°N 17.8°E)
- **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. **Hero** — interactive 3D globe (point-cloud or wireframe sphere, not photoreal texture): auto-rotates, drag to spin, glowing pins mark 5 destinations; headline 'Where next?' floats above.
2. **Destination rail** — clicking a pin (or scrolling to this section) flies the camera to that destination and shows a horizontal rail: large photo card, micro-labels (best season / from $), 'Build itinerary' link.
3. **Journey builder teaser** — 3-step cards (Pick a pin / Tune the pace / Get the plan) with a thin animated route line connecting them.
4. **Field notes** — 2 editorial quotes over dark photo duotones, serif pull-quotes.
5. **Footer** — newsletter ('Postcards, monthly.'), sitemap, tiny spinning-globe favicon reused as decorative element.

## Motion
- Globe rotation 0.05 rad/s idle; camera fly-tos ease over 1.2s with a slight overshoot; pins pulse rings on hover.
- Scroll to Destination rail triggers the first fly-to automatically (once, respects reduced-motion).
- Route line draws with stroke-dashoffset on reveal; rail cards enter with 80ms stagger.
- 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
- Point-cloud globe keeps ~6k points max; pause render when off-viewport.
- Fallback: static star-chart image with the same pins as DOM buttons if WebGL fails.

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