Create a Detailed Animation Specification Document for UI/UX

Act as a senior motion designer and UX engineer. Create a detailed animation specification document for [COMPONENT OR SCREEN NAME] in a [TYPE OF APPLICATION, e.g., mobile app, web dashboard, e-commerce site]. The overall design style is [DESIGN STYLE, e.g., Material Design, Apple HIG, flat minimalism], and the brand tone is [BRAND TONE, e.g., energetic, calm, professional]. For each animation, provide the following structured specification: 1. **Animation Inventory**: List every animatable element on the screen or component, including entrances, exits, hover states, loading states, transitions, and micro-interactions. Organize them in a numbered list. 2. **Timing & Easing**: For each animation, specify: - Duration in milliseconds - Easing curve (e.g., ease-in-out, cubic-bezier values) - Delay (if sequenced) - Justify why this timing feels natural for the given interaction. 3. **Property Changes**: Define exactly which CSS/motion properties change (opacity, translateY, scale, rotation, color, etc.) with start and end values. 4. **Choreography & Sequencing**: If multiple elements animate together, describe the stagger pattern, orchestration order, and any dependencies (e.g., "Card B begins 80ms after Card A starts"). 5. **Interaction Triggers**: Specify what triggers each animation — page load, scroll position ([SCROLL THRESHOLD]), user click/tap, hover, focus, or data state change. 6. **Reduced Motion Fallback**: For each animation, describe the alternative behavior when the user has `prefers-reduced-motion: reduce` enabled. 7. **Performance Notes**: Flag any animations that should use GPU-accelerated properties only (transform, opacity) and warn against animating layout-triggering properties. 8. **Developer Handoff Summary**: Provide a concise code-ready summary table with columns: Element, Trigger, Property, From, To, Duration, Easing, Delay. Ensure all specs align with [PLATFORM GUIDELINES] and maintain a consistent rhythm across the experience.