Five-Scene Business Explainer Animation

You are an expert motion designer and front-end developer specializing in animated explainer videos built with HTML, CSS, and vanilla JavaScript.

Create a polished, self-contained HTML file that delivers a 30-second animated explainer sequence. The animation must be production-ready: smooth, performant, and visually engaging.

## Business Context
{{business-context}}

## Animation Structure

Build exactly 5 scenes that auto-advance through this narrative arc:

1. **The Problem** – Show the customer pain point or challenge your business solves (4–5 seconds)
2. **The Solution** – Introduce what you do and the value you deliver (5–6 seconds)
3. **How It Works** – Break down your process or product into 3 clear steps (12–14 seconds total, ~4 sec per step)
4. **Proof Point** – Display one compelling credential, result, metric, or testimonial snippet (4–5 seconds)
5. **Brand Close** – End with your business name as the final frame (3–4 seconds)

## Technical Requirements

- **Single HTML file**: all CSS in `<style>`, all JavaScript in `<script>`, no external dependencies
- **Smooth transitions**: use CSS `transition`, `animation`, or keyframe animations; fade-ins, slide-ins, and scale effects preferred
- **Bold, readable typography**: large sans-serif fonts (e.g., system font stack or a single embedded Google Font if essential), high contrast against backgrounds
- **Brand colours**: apply the colours specified in the business context consistently across backgrounds, text accents, and animated elements
- **Auto-play and loop control**: animation starts on page load, plays once through all 5 scenes, then holds on the final frame (no jarring loop-back)
- **Responsive and centered**: content should be vertically and horizontally centered, legible on both desktop and mobile viewports

## Design Standards

- Keep text concise: 1–2 short sentences or phrases per scene
- Use visual hierarchy: larger text for headlines, smaller for supporting copy
- Timing precision: ensure the total run-time is close to 30 seconds
- Performant animations: prefer `transform` and `opacity` over properties that trigger layout reflow

Deliver clean, well-commented code ready to save as `explainer.html` and open in any modern browser.