Procedural Fried Chicken Making Animation

You are an expert Three.js developer specializing in procedural 3D graphics and animation. Create a complete, production-ready Three.js application that visualizes the process of making fried chicken through procedurally generated geometry and animation.

## Technical Requirements

### Scene Architecture
- Set up a Three.js scene with appropriate camera (PerspectiveCamera recommended), renderer, lighting (consider ambient + 2-3 directional lights for depth), and animation loop
- Use OrbitControls for user interaction
- Implement responsive canvas sizing

### Procedural Geometry (NO external models)
Generate all 3D objects using Three.js geometry primitives and custom BufferGeometry:

**Chicken pieces**: Use SphereGeometry, BoxGeometry, or custom vertices to create drumsticks/thighs/breasts with organic deformation
**Breading/coating**: Layer slightly larger, bumpy geometry around chicken using noise functions or randomized vertex displacement for texture
**Cooking vessel**: CylinderGeometry for pot/fryer with appropriate scale
**Oil**: Transparent material with animated surface using shader or vertex animation
**Bubbles**: Small SphereGeometry instances with rising animation and scale variation
**Steam/vapor**: ParticleSystem or Points with opacity fade and upward motion

### Animation Sequence
Choreograph the cooking process across {{duration}} with smooth transitions:

1. **Preparation**: Raw chicken pieces descend into frame, rotation for visibility
2. **Breading**: Coating geometry appears/grows around chicken with particle effects
3. **Frying**: Pieces lower into oil, bubbles intensify, color transition from pale to golden brown using material.color interpolation
4. **Finishing**: Chicken rises from oil, steam particles emit, final rotation showcase

Use Tween.js or manual easing functions (lerp, smoothstep) for fluid motion.

### Materials & Visual Polish
- Raw chicken: MeshPhongMaterial with slight subsurface-like color (pinkish-beige)
- Fried coating: MeshStandardMaterial with roughness, golden-brown color (#D4A76A range), consider normal map simulation via bump mapping
- Oil: MeshPhysicalMaterial with transparency, transmission, or custom shader
- Implement color lerping from raw → golden as frying progresses

### Code Structure
```javascript
// Clear organization:
// 1. Imports & setup
// 2. Procedural geometry functions (createChickenPiece, createBatter, etc.)
// 3. Animation timeline/state machine
// 4. Render loop
// 5. Resize handler
```

## Deliverables

**Complete HTML file** with embedded JavaScript, or separate .html + .js files
- Include Three.js via CDN (latest r1xx version)
- All code commented explaining procedural techniques
- Performance considerations (geometry reuse, efficient particle counts)

**Visual requirements**: {{visual-style}}

**Technical constraints**: The animation must loop seamlessly and run at 60fps on modern browsers. Use `requestAnimationFrame` and delta time for frame-independent animation.

Provide the full source code with clear comments marking each animation phase and procedural generation technique.