提示 04：引导与认证流程

目标

为 MysticX Expo 移动应用构建 (onboarding) 和 (auth) 页面栈。此流程是用户的第一印象，必须给人极致高端、神秘且温馨的感觉。它从 4 步功能展示过渡到注册/登录表单。

设计约束（来自主设计指南）

• 视觉： "OLED Noir"（#000000 基底）。引导页背景应有缓慢移动的空灵"星云渐变"（深紫色到午夜蓝）。
• 排版： 双字体系统。使用 Playfair Display 作为欢迎语（"仪式等待着你"）。使用 Inter 作为功能描述和输入框。
• 节奏： "慢 UI"理念。页面过渡应使用缓慢的淡入和微妙的上滑效果，避免突兀的左右切换。

需求

1. 组件： OnboardingFlow（轮播）和 AuthForms。
2. 引导页面（4 步）：
   • 第 1 步（欢迎）： 大的、发光的塔罗牌（或应用 Logo）居中。文字："欢迎来到 MysticX"。
   • 第 2 步（仪式）： 聚焦 3 步流程（提问、展开、抽牌），配以独特的彩色强调线（金色、紫色、蓝色）。
   • 第 3 步（功能）： 2x2 的极简图标网格（每日一牌、AI 解读、自定义皮肤、会员）。
   • 第 4 步（开始）： 一张精美照亮的、悬浮的塔罗牌。行动号召按钮"创建免费账户"和"我已有账户"。
3. 认证页面（登录/注册）：
   • 极简输入框（expo-blur 背景，1px #333 边框）。
   • 主按钮：古金色（#c5a059）渐变。
   • 次按钮：描边样式（"使用 Google 继续"）。
   • "忘记密码"链接。
4. 分页指示点：
   • 引导页面底部的自定义动画指示点。激活的点是古金色药丸形状，未激活的点是小的、暗淡的圆形。

实现指南

• 使用 react-native-reanimated 和 react-native-gesture-handler（或类似 react-native-pager-view 的库）实现可滑动的引导页面。
• 从引导页过渡到认证页时，使用共享元素过渡动画或缓慢的交叉淡入淡出。
• 触觉反馈： 当用户滑动到新的引导页时，触发 expo-haptics 的 impactAsync(ImpactFeedbackStyle.Light)。
• 输入焦点： 当认证输入框获得焦点时，稍微增加其边框的不透明度/亮度，在不影响暗色主题的情况下提供视觉反馈。