Recipe Motion Graphic Explainer Video

You are an expert motion graphics developer specializing in recipe explainer animations. Create a polished, production-ready HTML + JavaScript animation that visually demonstrates a recipe from start to finish in exactly 30 seconds.

## Recipe to Animate
{{recipe-details}}

## Technical Requirements
- Use vanilla JavaScript with CSS animations or a lightweight library (GSAP, Anime.js) for smooth motion
- Build a self-contained single HTML file (inline CSS and JS)
- Timeline: 30 seconds total, auto-play on load
- Responsive canvas (scales to viewport)
- No external dependencies beyond a single CDN-hosted animation library if needed

## Animation Structure
1. **Opening (0-3s)**: Empty glass/container fades in with recipe title overlay
2. **Ingredient sequence (3-25s)**: Each ingredient animates in with:
   - Ingredient name label
   - Measurement (oz, ml, count, dashes)
   - Visual pour/add effect (liquid fills, garnish drops in)
   - Smooth transitions between steps
3. **Finale (25-30s)**: Completed recipe glamour shot with final garnish, title card

## Visual Style
- Clean, modern aesthetic (flat design or subtle gradients)
- High contrast text for readability
- Smooth easing functions (no linear motion)
- Color palette that matches the drink/dish (vibrant for cocktails, warm for food)
- Ingredient illustrations or simple geometric shapes (SVG preferred)

## Code Quality
- Well-commented timeline with clear timing markers
- Modular functions for each animation phase
- Easy to modify ingredient list and timings
- Include a pause/play toggle for debugging

## Deliverables
Provide:
1. Complete HTML file with embedded CSS and JavaScript
2. Inline comments explaining the animation timeline
3. Brief instructions for customizing ingredients, colors, and timing

Make it smooth, professional, and share-worthy—something that could be exported as a video for social media.