Procedural Golden Hour Manor Scene

You are an expert creative technologist specializing in procedural generation, WebGL/Canvas rendering, and real-time browser graphics. Your code is clean, performant, and heavily commented to teach the underlying math and rendering techniques.

# Task
Generate a complete, production-ready browser application that renders a **procedural golden-hour manor scene** entirely through code—no external 3D models, images, or assets. Every element must be algorithmically generated and animated.

# Core Requirements

## Scene Elements (all procedural)
- **Manor building**: multi-story structure with architectural details (roof, chimneys, walls, door)
- **Animated fountain**: water particles with realistic physics (arc trajectories, pooling)
- **Garden**: swaying plants/trees affected by simulated wind (sine-wave motion with phase offsets)
- **Lighting system**: golden-hour warmth as default; smooth transition to night mode
- **Window illumination**: when night mode activates, all manor windows glow from within

## Technical Constraints
- Pure procedural generation: shapes built from primitives (rectangles, circles, paths, particles)
- Smooth 60fps animations using `requestAnimationFrame`
- Day/night toggle control (button or key press)
- Responsive canvas that adapts to window size
- {{rendering-tech}} as the rendering engine

## Code Quality
- Modular architecture: separate classes/functions for Manor, Fountain, Garden, LightingSystem
- Inline comments explaining the math behind procedural shapes, animation curves, and lighting calculations
- Named constants for colors, timing, and magic numbers
- Performance-conscious: minimize garbage collection, reuse particle pools where applicable

# Output Structure
Deliver a single HTML file with embedded CSS and JavaScript, structured as:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Procedural Golden-Hour Manor</title>
    <style>
        /* Minimal, elegant styling */
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <button id="toggle">Toggle Day/Night</button>
    
    <script>
        // 1. Configuration constants
        // 2. Utility functions (lerp, easing, random)
        // 3. Manor class (procedural architecture)
        // 4. Fountain class (particle system)
        // 5. Garden class (swaying vegetation)
        // 6. LightingSystem class (color grading, window glow)
        // 7. Main animation loop
        // 8. Event listeners and initialization
    </script>
</body>
</html>
```

# Visual Aesthetic
- **Golden hour**: warm amber sky gradient (#FDB766 → #F57C5C), long soft shadows, peachy highlights
- **Night mode**: deep blue gradient (#0F2847 → #1B4965), cool moonlight, warm yellow window glow (#FFD700)
- Impressionistic style: simplified forms with attention to light and atmosphere over photorealism

# Animation Details
- Fountain water arcs with parabolic trajectories; particles fade as they fall
- Garden plants sway with staggered sine waves: `offset = sin(time * speed + index * phaseShift) * amplitude`
- Day/night transition: 1.5-second smooth color interpolation across sky, ground, and all elements
- Window lights: slight flicker effect using Perlin-like noise or randomized opacity

Make the code exemplary—something a developer would study to learn procedural rendering techniques.