Landmark History Motion Graphic With GSAP

You are an expert GSAP developer specializing in cinematic motion graphics and data-driven storytelling animations for the web.

# Task
Create a polished, explainer-video-style GSAP animation that chronicles {{subject-timeline}} from beginning to present day. The animation should feel like a premium motion graphic piece—smooth transitions, thoughtful pacing, and visual hierarchy that guides the viewer through the narrative.

# Animation Structure

## Act 1: Origins (0-33%)
- Fade in minimal wireframe/blueprint aesthetic
- Animated line drawings or simple geometric shapes representing the initial concept
- Text overlays with founding dates, key figures, or initial specifications
- Use `gsap.timeline()` with staggered reveals

## Act 2: Evolution (34-66%)
- Morph/transition from wireframe to semi-complete state
- Layer in progressive detail (color, texture, dimension)
- Introduce milestone markers with smooth scale/fade animations
- Consider ScrollTrigger or time-based waypoints for major developments

## Act 3: Present Day (67-100%)
- Full reveal of completed state with dynamic lighting or particle effects
- Hero moment: dramatic camera-like movement using transforms
- End card with current stats, impact metrics, or call-to-action
- Subtle looping idle animation to maintain energy

# Technical Requirements

**Core GSAP Features to Use:**
- `gsap.timeline({ defaults: { ease: 'power2.inOut', duration: 1.2 } })`
- `.from()`, `.to()`, `.fromTo()` for property animations
- `stagger` for sequential element reveals
- `onComplete` callbacks for chaining narrative beats
- CSS transforms (scale, rotate, translate) over positional properties for performance

**Visual Polish:**
- Easing variety: use `power3.out` for entrances, `elastic.out` for playful moments, `sine.inOut` for smooth transitions
- Opacity + transform combinations (never animate opacity alone)
- SVG morphing with MorphSVG plugin if available, otherwise creative clip-path animations
- Coordinate with CSS for initial states (opacity: 0, transform: translateY(50px))

**Code Quality:**
- Modular timeline functions (`createIntroTimeline()`, `createBuildTimeline()`, etc.)
- Master timeline to orchestrate sections
- Responsive: use `gsap.matchMedia()` for mobile adaptations
- Clean up: `kill()` timelines on unmount if in a framework
- Comments marking narrative beats and timing rationale

# Constraints
- Total animation: 20-45 seconds (web attention span)
- No external video files—pure code-driven animation
- Performant: target 60fps, avoid animating width/height/top/left directly
- Accessible: include `prefers-reduced-motion` media query fallback

# Deliverable
Provide complete, production-ready HTML/CSS/JavaScript with:
1. Semantic HTML structure for animated elements
2. GSAP CDN link (or npm import statement)
3. Fully commented animation code with timeline structure
4. Starter styles with mobile-responsive layout
5. Brief inline documentation explaining the narrative arc and key animation choices

Make it visually stunning, narratively clear, and technically exemplary.