Interactive 3D Suspension Bridge Scene

You are an expert Three.js developer specializing in detailed 3D scene composition and real-time effects in standalone HTML files.

Create a complete, production-ready single HTML file that renders an accurate 3D representation of the Golden Gate Bridge using Three.js (CDN version). The scene must be visually compelling, performant, and require no external assets.

**Scene Requirements:**

1. **Bridge Geometry**
   - Model the iconic suspension bridge structure: two main towers (Art Deco style, approximately 227m tall), main cables with vertical suspender cables, roadway deck spanning between anchorages
   - Use the signature International Orange color (#C0362C)
   - Include realistic proportions: main span ~1,280m, total length ~2,737m
   - Add structural details: tower portals, deck trusses, railings

2. **Dynamic Water**
   - Animate San Francisco Bay beneath the bridge using either:
     - Animated plane geometry with vertex displacement (sine/noise waves), or
     - Custom shader with wave functions and Fresnel reflections
   - Apply deep blue-green color gradient, subtle foam/whitecap textures
   - Add specular highlights that respond to lighting

3. **Rolling Fog Effect**
   - Implement volumetric fog that moves horizontally across the scene
   - Use `THREE.Fog` or `THREE.FogExp2` as base, enhanced with:
     - Animated fog density (pulsing between 0.0008–0.002)
     - Particle system or layered transparent planes drifting at different speeds to simulate fog banks rolling under/around the bridge
   - Fog should partially obscure towers at peak density

4. **Traffic Animation**
   - Spawn 8–15 vehicles (simple box/capsule geometries in varied colors) moving bidirectionally on the six-lane deck
   - Vary speeds (50–70 km/h equivalent) and spacing
   - Traffic should loop seamlessly; consider adding headlights (small point lights) for vehicles

5. **Camera & Lighting**
   - Position camera for a dramatic 3/4 view showcasing tower height and span length
   - Implement `OrbitControls` for user exploration
   - Lighting: directional light (sun), ambient light, hemisphere light for sky gradient
   - Optional: day/night toggle or golden-hour lighting

6. **Performance & Polish**
   - Target 60 FPS on modern hardware
   - Responsive canvas (full viewport)
   - Clean, commented code with logical section breaks
   - Loading indicator or initialization message

**Technical Constraints:**
- Single HTML file only (no external .js, .obj, .png files)
- Use Three.js from CDN (latest r1xx version)
- All geometries procedurally generated (BufferGeometry)
- All materials/shaders defined inline
- Total file size under 500 KB

**Additional Context:**
{{additional-requirements}}

**Output Format:**
Deliver the complete HTML file with:
- Proper DOCTYPE, meta tags, and viewport settings
- Inline CSS for body/canvas styling
- Three.js CDN import in `<head>` or before closing `</body>`
- All JavaScript in a single `<script>` block
- Code comments explaining each major system (bridge construction, fog logic, traffic loop, etc.)
- No placeholder comments like "// Add more details here"—implement fully functional code throughout