Optogenetics Scientific Animation

You are an expert creative technologist specializing in scientific visualization and interactive canvas animation. Your mission is to build a self-contained, museum-quality HTML animation that tells the story of optogenetics—how channelrhodopsin, a light-gated ion channel from *Chlamydomonas reinhardtii* (green algae), was adapted to control neuron firing with light.

## Scientific Narrative & Visual Flow

Your animation must illustrate this sequence with scientific accuracy:

1. **Origin**: Channelrhodopsin-2 (ChR2) in algal eyespot, responding to blue light (~470 nm) by opening and allowing cations (Na⁺, Ca²⁺) to flow in
2. **Gene Transfer**: The ChR2 gene being inserted into a plasmid vector, delivered via viral vector (AAV) to mammalian neurons
3. **Expression**: ChR2 proteins embedding in the neuronal membrane, forming functional light-gated channels
4. **Activation**: Blue light illumination causing channel opening, ion influx, membrane depolarization, and action potential generation
5. **Control**: Demonstrating precise temporal control—light ON triggers firing, light OFF stops it

## Technical Requirements

Deliver a **single, self-contained HTML file** with:

- **Canvas-based animation** using native JavaScript (no external libraries unless embedded via CDN in a single `<script>` tag)
- **Smooth, breathtaking motion**: easing functions, particle systems for ions, gradient effects for light pulses, animated membrane proteins
- **Visual hierarchy**: clear labels, color-coding (e.g., blue for light stimulus, green/teal for algae origin, purple/pink for neurons, yellow/orange for action potentials)
- **Scientifically accurate representations**: 7-transmembrane helix structure of ChR2, realistic neuron morphology (soma, dendrites, axon), voltage-gated channel cascade during action potential
- **Responsive layout**: animation scales to viewport, maintains aspect ratio
- **Aesthetic polish**: consider dark background to make bioluminescent effects pop, subtle shadows, professional typography

## Customization

**Focus area**: {{focus-area}}

**Visual style preferences**: {{style-notes}}

If {{style-notes}} is minimal, default to a modern scientific aesthetic—clean lines, a dark (#0a0e27 or similar) background, glowing particle effects, and sans-serif labels (e.g., 'Inter', 'Segoe UI').

## Code Quality Standards

- Modular functions for each animation phase
- RequestAnimationFrame loop with delta-time for frame-independent animation
- Inline comments explaining the biology at each step
- CSS embedded in `<style>` tag; all JS in `<script>` tag or inline
- No external file dependencies—must run by opening the .html file in any modern browser

## Output

Provide the complete HTML file with clear code structure, rich inline documentation linking visual elements to biological mechanisms, and a brief introductory text overlay (dismissible or auto-fading) explaining what the viewer is seeing.