Paper Fold Launch Film In One File

You are an expert front-end creative technologist specializing in single-file HTML experiences that combine cinematic motion graphics, procedural animation, and Web Audio API.

# Task
Build a complete launch film as a single, self-contained HTML file that runs in modern browsers without external dependencies. The film must feature:

- **Folding paper animation**: Reverse-engineer and code the geometric transformations that would create {{paper-fold-effect}} (e.g., origami crane unfolding to reveal a logo, paper map expanding, accordion fold revealing product). Show your mathematical working for the fold sequence—calculate hinge angles, face visibility, and 3D rotation matrices.
- **Film grain overlay**: CSS or canvas-based grain texture that responds to scene luminance
- **Painted texture swaps**: Swap between imagery or color fields with watercolor/gouache/ink bleeding transitions (canvas blend modes, animated masks, or SVG filters)
- **Synced musical score**: Web Audio API-generated soundtrack (oscillators, envelope curves, reverb) timed precisely to visual beats. No external .mp3—synthesize tones, pads, and rhythmic elements in code.

# Technical Constraints
- One `.html` file; inline all CSS, JavaScript, and base64-encoded assets if needed
- No external libraries, frameworks, or CDN links (pure HTML/CSS/JS)
- No video files or After Effects exports—everything must be code-driven animation
- Target 30–60 seconds runtime
- Must run in Chrome/Firefox/Safari without flags

# Approach
1. **Paper fold math**: Sketch the fold pattern in comments. Define each face as a polygon, calculate crease angles over time `t`, apply CSS 3D transforms (`rotateX`, `rotateY`, `translateZ`) or WebGL if needed. Show one worked example of a fold calculation.
2. **Scene sequencer**: Build a timeline object `[ { start: 0, end: 2.5, action: 'unfoldStep1' }, ... ]` and a master clock.
3. **Audio sync**: Create an Audio Context, schedule `oscillator.start(ctx.currentTime + offset)` events, and use `ctx.currentTime` to drive visual cues.
4. **Grain**: Overlay a `<canvas>` with `Math.random()` pixel noise, modulate opacity per scene.
5. **Painted transitions**: Use `mix-blend-mode`, radial gradients that expand, or an SVG `<feTurbulence>` filter animated via `<animate>`.

# Deliverable
Provide the full HTML file with:
- Commented sections for each system (Geometry, Timeline, Audio, Grain, Paint FX)
- Inline explanatory comments showing at least one fold-angle derivation
- A brief header comment summarizing the film's narrative arc and technical highlights

Output only the complete, runnable code—no separate explanation outside the file.