Prompt 04: Onboarding & Authentication Flow

Goal

Build the (onboarding) and (auth) screen stack for the MysticX Expo mobile app. This flow is the user's first impression and must feel extremely premium, mysterious, and welcoming. It transitions from a 4-step feature showcase into the Sign Up/Sign In forms.

Design Constraints (From Master Guide)

• Visuals: "OLED Noir" (#000000 base). The onboarding background should feature a slow-moving, ethereal "Nebula Gradient" (deep purple to midnight blue).
• Typography: Dual-typography system. Use Playfair Display for welcome messages ("The Ritual Awaits"). Use Inter for feature descriptions and input fields.
• Pacing: "Slow UI" philosophy. Screen transitions should use slow fade-ins and subtle slide-ups, avoiding jarring left-to-right snaps.

Requirements

1. Component: OnboardingFlow (Swiper) and AuthForms.
2. Onboarding Screens (4 Steps):
   • Step 1 (Welcome): Large, glowing Tarot Card (or App Logo) in the center. Text: "Welcome to MysticX".
   • Step 2 (The Ritual): Focus on the 3-step process (Ask, Spread, Draw) with distinct, colored accent lines (Gold, Purple, Blue).
   • Step 3 (Features): A 2x2 grid of minimalist icons (Card of Day, AI Readings, Custom Skins, Membership).
   • Step 4 (Get Started): A beautifully illuminated, floating Tarot Card. Call-to-action buttons for "Create Free Account" and "I Have an Account".
3. Authentication Screens (Sign In/Up):
   • Minimalist input fields (expo-blur background, 1px #333 border).
   • Primary Button: Antique Gold (#c5a059) gradient.
   • Secondary Button: Outlined ("Continue with Google").
   • "Forgot Password" link.
4. Pagination Dots:
   • Custom animated dots at the bottom of the onboarding screens. Active dot is an Antique Gold pill, inactive dots are small, muted circles.

Implementation Guidance

• Use react-native-reanimated and react-native-gesture-handler (or a library like react-native-pager-view) for the swipable onboarding screens.
• When transitioning from Onboarding to Auth, use a shared element transition or a slow crossfade.
• Haptics: Trigger expo-haptics impactAsync(ImpactFeedbackStyle.Light) whenever the user swipes to a new onboarding slide.
• Input Focus: When an auth input field is focused, slightly increase the opacity/brightness of its border to provide visual feedback without overwhelming the dark theme.