AI Developer Prompt: Card of the Day Screen

Context

You are building the card-of-day screen for the MysticX Expo mobile app. Screen Goal: A standalone screen for the daily ritual. Displays 3 face-down cards for the user to pick one. Heavy emphasis on haptic feedback and magical card-flip reveal effect.

Wireframe & Layout Reference

Base the layout on the structural flow for this screen from wireframes. The UI should feel spacious and native, avoiding cramped web-view layouts.

Design System Rules (Strict)

The app must follow the Mystical Minimalism & Velvet Noir philosophy.

1. Colors & Backgrounds

• OLED Noir Base: Background must be OLED-friendly deep black (#000000), midnight navy (#0a192f), or rich deep purple. Never use flat gray-black.
• Ethereal Glaze: Use expo-blur for navigation elements, floating action bars, or modal backgrounds to create a frosted, translucent depth.
• Accents: Use Antique Gold (#c5a059) for primary interactive elements. For active states, use ultra-thin metallic borders or subtle neon glow (cyan, amethyst).

2. Typography

• Headers: Use high-contrast, elegant serif fonts (e.g., Playfair Display).
• Body: Use clean sans-serif fonts (e.g., Inter).
• Spacing: Enforce a minimum 1.6 line-height for any long-form reading text.

3. Interactions & "The Ritual"

• Haptics: Import expo-haptics. Add subtle haptic feedback for every button tap, card swipe, or list scroll.
• Animations: Use react-native-reanimated. Do not use standard React Native Animated.
• "Slow UI": Transitions should be deliberate and unhurried. Avoid instant snapping. Use ease-out-back spring physics for card operations, giving them "weight."
• Loading: No default spinner. Use a glowing "aura" pulse below 0.1Hz.

Task

Write React Native (Expo) code for this screen. Ensure you use react-native-reanimated for animations, expo-haptics for touch feedback, and style strictly with the OLED Noir theme above. Ensure the code is modular, well-typed (TypeScript), and visually stunning.