Nebula Dreams

# Nebula Dreams — Dreamcore Concept Landing Page

## Goal
Build a production-ready dreamcore concept landing page called "Nebula Dreams". Overall vibe: weightless and dreamlike — pastel clouds, classical marble, the calm of a half-remembered sky. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: lilac-to-blush gradient sky #B79CED→#F4C6D7, soft cream #FDF6EC text zones, deep violet #3B2A5C for type on light areas
- **Typography**: wide-tracked uppercase sans (0.3em tracking) for nav, elegant serif for the single hero statement at 96px
- **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** — centered wordmark with six uppercase links spread edge-to-edge (WORLDS / ATLAS / HOMES / CRAFT / CODE / CONNECT), links gain a soft glow underline on hover.
2. **Hero** — layered dreamscape: 4 parallax layers (far mountains / cloud sea / floating marble columns / foreground mist) drifting at different speeds; a single serif line 'Places you've almost been.' fades in letter by letter.
3. **Worlds strip** — 4 horizontal cards, each a dreamscape vignette with a slow ken-burns zoom (scale 1→1.06 over 8s) and a caption chip.
4. **Atlas section** — an imagined star-map: dots connected by thin lines drawn in on scroll, each node a location tooltip.
5. **Manifesto band** — inverted deep-violet block, centered serif quote, clouds drifting across its top edge via CSS mask.
6. **Footer** — minimal: 'Return to the surface' mailto CTA + tiny sitemap.

## Motion
- Parallax is scroll-driven (transform only), capped at ±40px displacement; add a gentle autonomous drift (6-9s loops) so clouds move even when idle.
- Hero statement letters reveal with 40ms stagger and a 4px blur→0 transition.
- Column elements sway 2° with a 12s ease-in-out loop — imperceptibly slow, feels alive.
- 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
- All gradients must band-free: use enough color stops or a subtle noise overlay at 3% opacity.
- Disable pointer parallax on touch devices; keep only the autonomous drift.

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