Glass And Gold Leaf WebGL Film

You are an expert WebGL2 graphics programmer specializing in procedural animation and shader-driven effects. Your task is to create a self-contained, visually stunning animated film that runs entirely in a single HTML file.

# Technical Requirements
- **Duration:** Exactly 80 seconds of looped or sequenced animation
- **Format:** Single HTML file with embedded WebGL2 and vanilla JavaScript
- **Constraints:** Zero external dependencies—no libraries, images, fonts, or audio files
- **Canvas:** 1:1 aspect ratio (square viewport)
- **Performance:** Must run smoothly at 60fps on modern browsers with WebGL2 support

# Artistic Vision: Living Mosaic
Create an animated mosaic that evokes **glass and gold leaf tilework**—where individual tiles are **never permanently fixed**. The aesthetic combines Byzantine opulence with kinetic sculpture:

- **Tile Physics:** Each tile can lift off the wall, rotate in 3D space, flip to reveal gold-leaf backing, fly independently, and snap back into the mosaic grid with a satisfying click
- **Material Properties:** Glass tiles should refract light subtly; gold-leaf tiles should shimmer with warm metallic reflections
- **Figurative Animation:** {{scene-narrative}}
- **Choreography:** Tiles move as **emergent flocks or swarms**—a fish "swims" because its constituent tiles undulate together; a bird "flies" as its tiles lift and bank in formation. Figures dissolve and reform fluidly.

# Implementation Strategy
1. **Tile System:** Use instanced rendering to draw thousands of tiles efficiently. Each tile tracks: position (x, y, z), rotation (quaternion or Euler), color/material, and animation state.
2. **Shaders:** 
   - Vertex shader: handle per-tile transforms, parallax depth, and procedural wobble
   - Fragment shader: implement glass refraction (Fresnel effects), gold specular highlights, and ambient occlusion between tiles
3. **Animation Timeline:** Structure the 80 seconds into acts or motifs that showcase the mosaic's transformative nature—tiles assembling into a scene, performing, then scattering or morphing into the next tableau.
4. **Procedural Generation:** Tile colors, positions, and motion patterns should be computed algorithmically (Perlin noise, flocking algorithms, parametric curves) to avoid hardcoded data.
5. **Audio-Visual Sync (Silent):** Even without sound, choreograph motion with rhythmic pacing—pauses, accelerations, and crescendos that give the piece musicality.

# Code Structure
```html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Living Mosaic</title></head>
<body style="margin:0;overflow:hidden;background:#1a1410">
<canvas id="c"></canvas>
<script>
// WebGL2 setup, shader compilation
// Tile data structure and instancing
// Animation loop with timeline
// Flocking/particle system for figurative motion
// Material/lighting calculations
</script>
</body>
</html>
```

# Output
Provide the complete, production-ready HTML file. Include:
- Clear code comments explaining the tile system, shader logic, and animation phases
- Graceful handling of WebGL2 unavailability (error message)
- Optimized rendering (culling, efficient buffer usage)
- A visually cohesive 80-second experience that demonstrates mastery of procedural animation and shader artistry

The final result should feel like a **living, breathing artwork**—where geometry, light, and motion converge into something both ancient and futuristic.