Mobile Onboarding Flow

# Mobile Onboarding Flow — 4-Step Card-Based

## Screen Dimensions
max-width: 390px (iPhone 15 Pro)
Use viewport-height-relative spacing

## Step Indicator
Top of screen, horizontal dots (8px circles)
Active: filled brand color, scale(1.3)
Completed: filled with checkmark icon (10px)
Inactive: outlined, opacity 0.3
Animate between states: 200ms spring

## Step Structure

### Step 1: Welcome
Full-screen gradient background (brand colors)
Large emoji or illustration (120px)
Headline: text-3xl font-bold text-white, centered
Subtext: text-base text-white/70
"Get Started" button: white background, brand text color, rounded-full, full-width

### Step 2: Goal Selection (Card Grid)
Headline: "What brings you here?" text-2xl font-bold
2×3 grid of selection cards (48% width each, aspect-square)
Each card: emoji icon (48px) + label (text-sm, font-medium)
Default: white bg, 1px border, rounded-2xl
Selected: brand bg, white text, scale(1.02), shadow-lg
Multi-select allowed (up to 3)

### Step 3: Personalization
Vertical list of toggle rows
Each row: icon + label on left, toggle switch on right
Toggle: 44px × 24px, thumb slides left/right with spring animation
Separator lines between rows

### Step 4: Completion
Celebration animation (confetti or checkmark expand)
"You're all set!" headline
Summary of selected preferences as chips
Primary CTA: "Start Exploring" — full-width, brand color, rounded-full
Secondary link: "Skip for now" — text only, centered below

## Transitions Between Steps
Slide from right (forward) / Slide from left (backward)
Duration: 350ms, cubic-bezier(0.4, 0, 0.2, 1)
Exit scale: 0.95, opacity: 0 during transition