Synthwave sunset · ling-3.0-flash

The user wants me to build an animated synthwave landscape on a full-screen canvas. Let me break down the requirements:

1. Glowing gradient sun broken by horizontal scanline bands
2. Starfield
3. Perspective neon grid extending from foreground to horizon
4. Animate grid toward viewer (travel effect)
5. Move sun slowly down toward horizon
6. Below horizon: stylized reflection of sun's colors on ground plane
7. Loop of 10-20 seconds that repeats without distracting reset jump
8. Pause/Resume and Restart controls
9. Procedural drawing and colors only
10. Canvas fits viewport
11. Inline CSS and JS, no external resources

Let me design this carefully:

**Canvas Setup:**
- Full viewport canvas
- Resize handler

**Color Palette (synthwave):**
- Sky gradient: deep purple to dark blue to warm orange/pink near horizon
- Sun: bright orange/yellow/pink glow
- Grid: neon pink, cyan, purple lines
- Stars: white/blue dots
- Ground: dark with reflections

**Sun:**
- Radial gradient with bright core
- Horizontal scanline bands (semi-transparent dark lines) cutting across it
- Glow effect using multiple layered gradients

**Starfield:**
- Random small dots, some twinkling

**Perspective Grid:**
- Lines converging to a vanishing point at the horizon
- Horizontal lines spaced to create perspective illusion
- Vertical lines spreading from bottom corners
- Animate by shifting horizontal lines toward viewer

**Reflection:**
- Below horizon, mirror the sun's colors but distorted
- Horizontal scanlines in reflection too
- Different opacity/intensity

**Animation Loop:**
- 10-20 second loop
- Grid lines move toward viewer (y-position increases)
- Sun slowly moves down
- Use modulo arithmetic for seamless looping

**Controls:**
- Pause/Resume button
- Restart button

Let me think about the seamless loop. I need to make sure that when the animation loops, there's no visible jump. I'll use a time-based approach where positions are computed from a modulo of the total loop duration.

Let me think about the grid animation more carefully:
- The grid has horizontal lines at regular intervals in perspective
- As the grid "moves toward the viewer," the horizontal lines shift downward
- When a line goes off the bottom, it wraps to the top
- This creates the illusion of forward travel

For the sun movement:
- Start slightly above horizon, slowly move down
- In the loop, it should return to start position smoothly
- Use a sinusoidal or linear interpolation with wrap-around

Let me code this up:

```javascript
// Loop duration: 15 seconds
const LOOP_DURATION = 15;

// Sun position: starts above horizon, moves down over the loop
// horizonY is roughly 60% of canvas height
// sunY goes from horizonY - 150 to horizonY + 20 over the loop

// Grid: horizontal lines spaced every N pixels in perspective
// Each line's y position is animated by adding an offset that increases over time
// When offset exceeds spacing, wrap around
```

Let me think about the scanline effect on the sun:
- Draw the sun as a radial gradient
- Then overlay horizontal semi-transparent dark lines across it
- The scanlines should be at regular intervals

For the reflection below the horizon:
- Draw a horizontally flipped/distorted version of the sun's colors
- Use a gradient that mirrors the sun's colors but with reduced opacity
- Add some horizontal scanlines to the reflection too
- Maybe add some wave distortion

Let me write the full implementation now.

Actually, let me think more carefully about the perspective grid. A synthwave grid typically has:
- A horizon line
- Horizontal lines that get closer together as they approach the horizon (perspective)
- Vertical lines that spread from a point near the center bottom

The animation should make the horizontal lines move toward the viewer, which means they move downward on screen. When they pass the bottom, they wrap to the top and reappear at the top moving down again.

For the grid lines, I'll compute their positions based on a perspective projection. The horizontal lines are at different depths (z values), and as time progresses, the z values shift, making lines appear to move toward the viewer.

Let me simplify: I'll compute grid line positions using a perspective formula where y = horizonY + (some function of depth), and animate by shifting the depth offset.

Here's my approach for the grid:

```javascript
function drawGrid(ctx, time) {
    const horizonY = canvas.height * 0.6;
    const vanishingX = canvas.width / 2;
    const numLines = 30;
    const spacing = 30; // base spacing
    
    for (let i = 0; i < numLines; i++) {
        // Depth increases with i (further away)
        let depth = (i * spacing + gridOffset) % (numLines * spacing);
        if (depth < 0) depth += numLines * spacing;
        
        // Perspective: closer objects are lower on screen
        // y = horizonY + k * depth^2 (parabolic perspective)
        const perspectiveScale = depth / (numLines * spacing);
        const y = horizonY + perspectiveScale * perspectiveScale * (canvas.height - horizonY);
        
        if (y > canvas.height) continue;
        
        // Line width decreases with distance
        const lineWidth = 1 + (1 - perspectiveScale) * 3;
        const alpha = 0.3 + (1 - perspectiveScale) * 0.7;
        
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.strokeStyle = `rgba(255, 0, 255, ${alpha})`;
        ctx.lineWidth = lineWidth;
        ctx.stroke();
    }
}
```

Wait, I need to think about this more carefully. In a perspective grid:
- Lines near the horizon are far apart (in world space) but close together on screen
- Lines near the viewer are close together (in world space) but far apart on screen

Actually, it's the opposite for horizontal lines:
- Far away horizontal lines (near horizon) are close together on screen
- Near horizontal lines (near viewer) are far apart on screen

So the spacing on screen increases as we go down from the horizon.

Let me use a simpler approach:
- Compute y positions using a perspective divide
- y_screen = horizonY + (canvas.height - horizonY) * (depth / maxDepth)^2

For the vertical lines, they converge to the vanishing point.

Let me also think about the gridOffset animation. As time progresses, gridOffset increases, making lines appear to move toward the viewer. When gridOffset exceeds maxDepth, it wraps.

For the sun reflection, I'll draw the sun's gradient below the horizon but flipped vertically, with some distortion and reduced opacity. I'll also add scanlines to the reflection.

Let me now write the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Synthwave Landscape</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; }
  canvas { display: block; width: 100vw; height: 100vh; }
  #controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
  }
  #controls button {
    background: rgba(255, 0, 255, 0.3);
    border: 1px solid rgba(255, 0, 255, 0.6);
    color: #fff;
    padding: 8px 20px;
    font-family: monospace;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    backdrop-filter: blur(4px);
  }
  #controls button:hover {
    background: rgba(255, 0, 255, 0.5);
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controls">
  <button id="pauseBtn">Pause</button>
  <button id="restartBtn">Restart</button>
</div>
<script>
// ... all the JS
</script>
</body>
</html>
```

Now let me think about the full implementation more carefully.

For the sun, I want:
1. A large radial gradient (orange/pink/yellow core fading to transparent)
2. Horizontal scanline bands (dark semi-transparent lines across the sun)
3. A glow halo around it

For the scanlines on the sun, I can draw them as semi-transparent dark horizontal lines across the sun's area.

For the starfield, I'll pre-generate random star positions and have some twinkle.

For the grid, I need both horizontal and vertical lines in perspective.

Let me think about the loop mechanism. I want a 15-second loop. I'll track elapsed time and use modulo:

```javascript
const LOOP_DURATION = 15; // seconds
let startTime = performance.now() / 1000;
let paused = false;
let pauseTime = 0;
let totalPausedDuration = 0;

function getLoopTime() {
    if (paused) return pauseTime;
    return (performance.now() / 1000 - startTime - totalPausedDuration) % LOOP_DURATION;
}
```

Actually, for the restart, I just reset startTime. For pause/resume, I track the accumulated pause duration.

Let me think about the sun movement more carefully. The sun should start above the horizon and slowly move down. Over 15 seconds, it should move from, say, 200px above the horizon to about 100px below the horizon. Then in the next loop, it should seamlessly return to the starting position.

Wait, for a seamless loop, I need the sun to return to its starting position at the end of the loop. So if it starts at position A and ends at position A, that works. But the requirement says "Move the sun slowly down toward the horizon" - so it should move down over the loop. If it wraps back to the top, that would be a visible jump.

Hmm, let me re-read: "Use a loop of 10 to 20 seconds that repeats without a distracting reset jump."

So I need the sun to move down, and then when the loop restarts, it should seamlessly return to the top. One way: the sun moves down, and at the end of the loop, it quickly fades or the transition is hidden by other elements. Or I could make the sun move in a sinusoidal pattern - down and then back up - so it returns to the start position naturally.

Actually, a sinusoidal movement would work well: the sun oscillates up and down over the loop period, so it returns to the same position at the end of each cycle.

Let me use: sunY = horizonY - 150 + 100 * sin(loopTime / LOOP_DURATION * 2 * PI)

This way the sun moves down to the horizon and back up, completing a full cycle in 15 seconds. No jump at the loop boundary.

Wait, but the requirement says "Move the sun slowly down toward the horizon" - it doesn't say it has to come back up. But for a seamless loop, it needs to return to its starting position somehow.

I think the best approach is: the sun moves down over the first half of the loop, and moves back up over the second half. This creates a smooth oscillation that loops seamlessly. The "slowly down toward horizon" behavior is visible in the first half.

Actually, let me reconsider. Maybe I can make the sun move down and at the loop boundary, have it fade out and fade back in at the top. Or use a longer loop where the sun just barely moves down and the loop restarts are less noticeable.

Or better yet: make the sun's vertical position use a function that returns to the same value at the loop boundary. A sine wave works perfectly for this.

Let me go with: sunY = horizonY - 200 + 120 * (1 - cos(2π * t / T)) / 2

This starts at horizonY - 200 and moves down to horizonY - 80 over the full loop period T. Wait, that doesn't return to the start.

Let me just use sin: sunY = horizonY - 150 + 100 * sin(2π * t / T)

At t=0: sunY = horizonY - 150 (top)
At t=T/4: sunY = horizonY - 50 (approaching horizon)
At t=T/2: sunY = horizonY + 150 (below horizon - but this is the reflection zone)
At t=3T/4: sunY = horizonY - 50
At t=T: sunY = horizonY - 150 (back to start)

This creates a smooth oscillation. The sun moves down toward the horizon, passes it, comes back up. The loop is seamless.

Hmm, but having the sun go below the horizon might conflict with the reflection. Let me adjust:

sunY = horizonY - 180 + 80 * sin(2π * t / T)

At t=0: horizonY - 180 (well above horizon)
At t=T/4: horizonY - 100 (approaching horizon)
At t=T/2: horizonY + 0 (at horizon)
At t=3T/4: horizonY - 100
At t=T: horizonY - 180

This keeps the sun near the horizon area, moving down toward it and back up. The reflection can be a separate stylized element below the horizon.

Actually, let me think about this differently. The requirement says "Move the sun slowly down toward the horizon while keeping the composition visible." So the sun should be moving downward continuously. For a seamless loop, I can have the sun move down and then quickly reset at the end of the loop, but make the reset happen during a part of the animation where it's less noticeable (e.g., when it's near the horizon and the glow is large, hiding the reset).

Or I can use a longer loop (20 seconds) where the sun moves down very slowly, and the reset is a small jump that's masked by the glow.

Let me try a different approach: the sun moves down linearly over the loop, and at the loop boundary, it wraps back to the top. The glow is so large and bright that the wrap-around isn't very noticeable. I'll also add some other animated elements (stars twinkling, grid moving) that help mask the reset.

Actually, let me just use the sine approach. It's clean and seamless. The sun moves down toward the horizon and then back up. The "slowly down toward the horizon" is clearly visible in the first half of the cycle.

Let me finalize my design:

**Canvas:** Full viewport, black background

**Sky gradient:** From dark purple (#0a001a) at top to deep blue (#1a0033) to warm orange/pink (#ff6600) near horizon

**Stars:** 100-200 random white/blue dots, some twinkling (varying alpha)

**Sun:**
- Large radial gradient: bright yellow-orange core → pink → transparent
- Broken by horizontal scanline bands (dark semi-transparent lines)
- Glow: additional larger radial gradient with lower opacity

**Grid:**
- Horizontal lines: neon pink/magenta, spaced with perspective
- Vertical lines: neon cyan/purple, converging to vanishing point
- Lines animate downward (toward viewer)

**Reflection:**
- Below horizon: distorted horizontal band of the sun's colors
- Scanlines in the reflection too
- Different color intensity (more purple/blue shifted)

**Animation:**
- Grid offset increases over time → lines move toward viewer
- Sun position oscillates sinusoidally
- Stars twinkle
- Loop duration: 15 seconds

Let me write the code now.

Actually, let me think about the scanline effect more carefully. "Horizontal scanline bands" breaking the sun - this means dark horizontal lines that cut across the sun, like an old CRT monitor effect. I'll draw semi-transparent dark horizontal lines at regular intervals across the sun's area.

For the reflection, I need it to be "visually distinct from a second sun in the sky." So the reflection should look different - maybe more distorted, more purple/blue, with different scanline spacing, and perhaps with some wave distortion.

Let me also add some mountains or silhouettes in the far background for extra synthwave flavor. Actually, the requirements don't mention mountains, so I'll stick to what's asked.

Let me also think about the neon grid more carefully. In synthwave art, the grid typically has:
- Horizontal lines that are closer together near the horizon and farther apart near the viewer
- Vertical lines that converge to a vanishing point
- The grid is often in pink/magenta and cyan

For the perspective calculation:
- The horizon is at some y position (e.g., 60% of canvas height)
- Horizontal grid lines are at y positions that follow a perspective curve
- As the grid moves toward the viewer, the lines shift downward

Here's my approach for the grid lines:

```javascript
function getGridLineY(index, offset, horizonY, canvasHeight) {
    // index: 0 = closest to viewer, numLines-1 = farthest (at horizon)
    // The perspective effect: lines near the horizon are compressed
    const t = index / numLines; // 0 = horizon, 1 = viewer
    const perspectiveT = t * t; // quadratic for perspective
    const baseY = horizonY + perspectiveT * (canvasHeight - horizonY);
    return baseY - offset;
}
```

Wait, I need to think about this differently. The grid lines represent horizontal planes in 3D space. As the camera moves forward, all grid lines shift downward on screen. The lines near the horizon shift less (they're far away), and lines near the viewer shift more (they're close).

Actually, for a simple and effective effect, I can just shift all grid lines down by the same amount, and wrap around when they go off screen. This creates the illusion of forward movement.

Let me simplify:

```javascript
// Grid horizontal lines
const numHLines = 40;
const hSpacing = 25; // pixels between lines at the bottom
let gridOffset = (time % LOOP_DURATION) / LOOP_DURATION * numHLines * hSpacing;

for (let i = 0; i < numHLines; i++) {
    let y = canvas.height - (i * hSpacing + gridOffset) % (numHLines * hSpacing);
    if (y < horizonY) continue; // only draw below horizon
    
    // Perspective: lines near horizon are thinner and more transparent
    const t = (y - horizonY) / (canvas.height - horizonY);
    const alpha = 0.1 + t * 0.5;
    const width = 1 + t * 2;
    
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.strokeStyle = `rgba(255, 0, 255, ${alpha})`;
    ctx.lineWidth = width;
    ctx.stroke();
}
```

Hmm, but this doesn't give a proper perspective effect where lines are closer together near the horizon. Let me think again...

For proper perspective, I should compute y positions based on depth:

```javascript
// Each horizontal line is at a certain depth z
// y_screen = horizonY + k * z^2 (perspective projection)
// As z increases (farther away), y approaches horizonY

const numLines = 50;
const maxDepth = 1000;
const perspectiveK = (canvas.height - horizonY) / (maxDepth * maxDepth);

for (let i = 0; i < numLines; i++) {
    let depth = ((i * maxDepth / numLines) + gridOffset) % maxDepth;
    const y = horizonY + perspectiveK * depth * depth;
    if (y > canvas.height) continue;
    
    const t = depth / maxDepth; // 0 = far (horizon), 1 = near (viewer)
    const alpha = 0.1 + t * 0.6;
    const width = 1 + t * 2;
    
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.strokeStyle = `rgba(255, 0, 255, ${alpha})`;
    ctx.lineWidth = width;
    ctx.stroke();
}
```

This gives proper perspective where lines are closer together near the horizon and spread out near the viewer. As gridOffset increases, lines move toward the viewer (downward on screen).

For vertical lines, they converge to the vanishing point (center top of the horizon):

```javascript
const vanishingX = canvas.width / 2;
const numVLines = 20;

for (let i = 0; i < numVLines; i++) {
    const t = (i + 0.5) / numVLines; // 0 = center, 1 = edge
    const x = vanishingX + (t - 0.5) * canvas.width * 2;
    
    // Line goes from vanishing point down to the bottom
    // Perspective: line width and spacing changes
    ctx.beginPath();
    ctx.moveTo(vanishingX, horizonY);
    ctx.lineTo(x, canvas.height);
    
    const alpha = 0.2 + t * 0.5;
    ctx.strokeStyle = `rgba(0, 255, 255, ${alpha})`;
    ctx.lineWidth = 1 + t * 2;
    ctx.stroke();
}
```

Wait, vertical lines in perspective should also be affected by the forward movement. As we move forward, vertical lines should appear to shift. But for simplicity, I'll keep vertical lines static and only animate horizontal lines. Actually, in a forward-traveling effect, both horizontal and vertical lines should shift.

For vertical lines, the shift would be horizontal - lines near the edges move more than lines near the center. But this gets complex. Let me just animate the horizontal lines for the forward travel effect and keep vertical lines mostly static but with a slight shift.

Actually, for a synthwave grid, the typical effect is:
- Horizontal lines move downward (toward viewer)
- Vertical lines stay relatively static or have a very subtle shift

Let me keep it simple and effective.

Now let me think about the reflection more carefully. The reflection should be:
- Below the horizon line
- A horizontally flipped/stylized version of the sun's colors
- With scanlines
- Different from the sky sun (more purple/blue, more distorted)
- Maybe with some wave distortion

I'll draw the reflection as a gradient that mirrors the sun's colors, with horizontal scanlines and some wave distortion.

Let me also add some mountains or terrain silhouettes for extra visual interest. Actually, the requirements don't mention mountains, so I'll focus on what's required.

Let me now write the complete code. I'll be careful about:
1. Seamless looping
2. Proper perspective grid
3. Sun with scanlines
4. Reflection below horizon
5. Starfield
6. Controls
7. Responsive canvas

Here's my plan for the code structure:

```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// State
let paused = false;
let loopTime = 0; // 0 to LOOP_DURATION
const LOOP_DURATION = 15;
let lastTimestamp = 0;

// Stars
const stars = [];
for (let i = 0; i < 150; i++) {
    stars.push({
        x: Math.random(),
        y: Math.random() * 0.6, // only in sky portion
        size: Math.random() * 2 + 0.5,
        twinkleSpeed: Math.random() * 2 + 1,
        twinkleOffset: Math.random() * Math.PI * 2
    });
}

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function drawSky() {
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, '#0a001a');
    gradient.addColorStop(0.4, '#1a0033');
    gradient.addColorStop(0.55, '#33004d');
    gradient.addColorStop(0.65, '#ff3366');
    gradient.addColorStop(0.75, '#ff6600');
    gradient.addColorStop(1, '#ffaa00');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawStars(time) {
    stars.forEach(star => {
        const alpha = 0.3 + 0.7 * Math.abs(Math.sin(time * star.twinkleSpeed + star.twinkleOffset));
        ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
        ctx.beginPath();
        ctx.arc(star.x * canvas.width, star.y * canvas.height, star.size, 0, Math.PI * 2);
        ctx.fill();
    });
}

function drawSun(time) {
    const horizonY = canvas.height * 0.6;
    const sunX = canvas.width * 0.5;
    const sunY = horizonY - 180 + 100 * Math.sin(2 * Math.PI * time / LOOP_DURATION);
    const sunRadius = 80;
    
    // Glow
    const glowGradient = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, sunRadius * 4);
    glowGradient.addColorStop(0, 'rgba(255, 100, 0, 0.3)');
    glowGradient.addColorStop(0.3, 'rgba(255, 50, 100, 0.1)');
    glowGradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
    ctx.fillStyle = glowGradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Sun body
    const sunGradient = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, sunRadius);
    sunGradient.addColorStop(0, '#ffff00');
    sunGradient.addColorStop(0.3, '#ff8800');
    sunGradient.addColorStop(0.7, '#ff3366');
    sunGradient.addColorStop(1, 'rgba(255, 0, 100, 0)');
    ctx.fillStyle = sunGradient;
    ctx.beginPath();
    ctx.arc(sunX, sunY, sunRadius, 0, Math.PI * 2);
    ctx.fill();
    
    // Scanlines on sun
    const scanlineSpacing = 8;
    const scanlineWidth = 2;
    for (let y = sunY - sunRadius; y < sunY + sunRadius; y += scanlineSpacing) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        ctx.fillRect(sunX - sunRadius, y, sunRadius * 2, scanlineWidth);
    }
}

function drawGrid(time) {
    const horizonY = canvas.height * 0.6;
    const gridOffset = (time / LOOP_DURATION) * canvas.height * 0.5;
    
    // Horizontal lines
    const numHLines = 50;
    const maxDepth = 2000;
    
    for (let i = 0; i < numHLines; i++) {
        let depth = ((i * maxDepth / numHLines) + gridOffset) % maxDepth;
        const perspectiveScale = depth / maxDepth;
        const y = horizonY + perspectiveScale * perspectiveScale * (canvas.height - horizonY);
        
        if (y > canvas.height) continue;
        
        const t = perspectiveScale;
        const alpha = 0.05 + t * 0.4;
        const width = 1 + t * 2;
        
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.strokeStyle = `rgba(255, 0, 255, ${alpha})`;
        ctx.lineWidth = width;
        ctx.stroke();
    }
    
    // Vertical lines
    const numVLines = 20;
    const vanishingX = canvas.width / 2;
    
    for (let i = 0; i < numVLines; i++) {
        const t = (i + 0.5) / numVLines;
        const x = vanishingX + (t - 0.5) * canvas.width * 2;
        
        ctx.beginPath();
        ctx.moveTo(vanishingX, horizonY);
        ctx.lineTo(x, canvas.height);
        
        const alpha = 0.1 + t * 0.4;
        ctx.strokeStyle = `rgba(0, 255, 255, ${alpha})`;
        ctx.lineWidth = 1 + t * 1.5;
        ctx.stroke();
    }
}

function drawReflection(time) {
    const horizonY = canvas.height * 0.6;
    const sunX = canvas.width * 0.5;
    const sunY = horizonY - 180 + 100 * Math.sin(2 * Math.PI * time / LOOP_DURATION);
    
    // Reflection: mirror of sun's colors below horizon
    const reflGradient = ctx.createRadialGradient(sunX, horizonY + (horizonY - sunY), 0, sunX, horizonY + (horizonY - sunY), 150);
    reflGradient.addColorStop(0, 'rgba(100, 0, 150, 0.4)');
    reflGradient.addColorStop(0.3, 'rgba(150, 0, 100, 0.2)');
    reflGradient.addColorStop(0.7, 'rgba(255, 50, 100, 0.1)');
    reflGradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
    ctx.fillStyle = reflGradient;
    ctx.fillRect(0, horizonY, canvas.width, canvas.height - horizonY);
    
    // Scanlines on reflection
    const scanlineSpacing = 6;
    for (let y = horizonY; y < canvas.height; y += scanlineSpacing) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
        ctx.fillRect(0, y, canvas.width, 2);
    }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSky();
    drawStars(loopTime);
    drawGrid(loopTime);
    drawSun(loopTime);
    drawReflection(loopTime);
}

function animate(timestamp) {
    if (!paused) {
        const dt = (timestamp - lastTimestamp) / 1000;
        lastTimestamp = timestamp;
        loopTime = (loopTime + dt) % LOOP_DURATION;
    }
    draw();
    requestAnimationFrame(animate);
}
```

Wait, I need to be more careful about the loopTime tracking. When paused, I shouldn't advance loopTime. When restarted, I should reset loopTime to 0.

Let me also think about the reflection more carefully. The requirement says "a stylized reflection of the sun's colors on the ground plane, visually distinct from a second sun in the sky." So the reflection should be below the horizon and clearly different from the sun in the sky.

I'll make the reflection:
- More purple/blue shifted
- More distorted (wavy)
- Different scanline pattern
- Lower opacity
- Maybe with some horizontal banding

Let me also add some ground details - maybe a dark ground plane with some subtle gradient.

Let me also think about the scanline effect on the sun more carefully. "Broken by horizontal scanline bands" - this means the sun appears to have horizontal lines cutting through it, like a CRT scanline effect. I should draw these as semi-transparent dark lines across the sun area.

Let me also add a glow effect to the sun that extends beyond its body - a large soft glow.

OK, I think I have enough planning. Let me write the complete code now.

One more thing - the horizon line. I should make sure there's a clear horizon line where the sky meets the ground. The ground below the horizon should be darker.

Let me also add a subtle ground gradient - dark at the bottom, slightly lighter near the horizon.

Here's my refined plan:

1. Sky gradient (top to horizon)
2. Stars (in sky portion)
3. Grid (perspective, animated)
4. Sun with glow and scanlines
5. Ground (below horizon, dark)
6. Reflection (below horizon, stylized)
7. Scanlines overlay (subtle CRT effect across entire screen)

Let me write the final code now.

Actually, I realize I should think more carefully about the reflection. The reflection should be "visually distinct from a second sun in the sky." So I should NOT draw a second sun above the horizon. The reflection should be below the horizon, showing the sun's colors but distorted and different.

Let me make the reflection:
- A horizontal band of color below the horizon that mirrors the sun's gradient colors but shifted toward purple/blue
- With horizontal scanlines
- With some wave distortion
- No distinct sun shape - just the colors of the sun spread across the ground

I could also add a subtle "horizon glow" line right at the horizon.

Let me also consider adding some mountains or silhouettes. The requirements don't ask for them, but they're common in synthwave art. I'll add subtle mountain silhouettes for visual richness.

Actually, the requirements are specific about what to draw:
1. Glowing gradient sun broken by horizontal scanline bands ✓
2. A starfield ✓
3. A perspective neon grid extending from foreground to horizon ✓
4. Grid animated toward viewer ✓
5. Sun moves slowly down toward horizon ✓
6. Reflection of sun's colors below horizon ✓
7. Loop 10-20 seconds ✓
8. Pause/Resume and Restart controls ✓
9. Procedural drawing ✓
10. Fit canvas to viewport ✓

Let me not add mountains - stick to what's required.

Now let me finalize and write the code. I need to be careful about:
- The loop being seamless (no jump)
- The sun movement being smooth and looping
- The grid animation being smooth and looping
- The controls working properly

For the seamless loop, I need to make sure all animated values use modulo arithmetic so they return to their starting values at the end of the loop.

Let me also think about the scanline overlay. I could add a subtle CRT scanline effect across the entire canvas for extra synthwave feel. Semi-transparent horizontal lines across the whole screen.

OK, let me write the code now. I'll be thorough and make sure everything works.

Let me think about one more thing - the sun's scanline bands. "Broken by horizontal scanline bands" - I interpret this as the sun has horizontal lines cutting across it, making it look like it's being scanned by horizontal bands. These could be:
1. Dark semi-transparent horizontal lines across the sun
2. Bright horizontal lines (like CRT phosphor scanlines)
3. Alternating bright/dark bands

I'll go with dark semi-transparent horizontal lines across the sun, which gives the CRT scanline look.

Let me also add a subtle horizontal scanline effect across the entire canvas for that retro feel.

Now, let me write the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Synthwave Landscape</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
  canvas { display: block; }
  #controls {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    z-index: 10;
  }
  #controls button {
    background: rgba(255, 0, 255, 0.2);
    border: 1px solid rgba(255, 0, 255, 0.5);
    color: #e0e0ff;
    padding: 10px 28px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    backdrop-filter: blur(6px);
    transition: background 0.2s;
  }
  #controls button:hover {
    background: rgba(255, 0, 255, 0.4);
  }
  #controls button:active {
    background: rgba(255, 0, 255, 0.6);
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controls">
  <button id="pauseBtn">Pause</button>
  <button id="restartBtn">Restart</button>
</div>
<script>
(function() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  const LOOP_DURATION = 15; // seconds
  let loopTime = 0;
  let paused = false;
  let lastTimestamp = 0;
  let pauseAccum = 0;
  let pauseStart = 0;
  
  // Pre-generate stars
  const STAR_COUNT = 120;
  const stars = [];
  for (let i = 0; i < STAR_COUNT; i++) {
    stars.push({
      x: Math.random(),
      y: Math.random() * 0.55,
      size: Math.random() * 1.8 + 0.3,
      speed: Math.random() * 1.5 + 0.5,
      offset: Math.random() * Math.PI * 2,
      brightness: Math.random() * 0.5 + 0.5
    });
  }
  
  // Pre-generate grid line positions (for vertical lines)
  const V_LINE_COUNT = 24;
  
  function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  
  function getHorizonY() {
    return canvas.height * 0.58;
  }
  
  function drawSky(time) {
    const horizonY = getHorizonY();
    const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
    grad.addColorStop(0, '#05000a');
    grad.addColorStop(0.3, '#0a0020');
    grad.addColorStop(0.5, '#1a0040');
    grad.addColorStop(0.6, '#3a0050');
    grad.addColorStop(0.68, '#8a0040');
    grad.addColorStop(0.74, '#e04400');
    grad.addColorStop(0.82, '#ff8800');
    grad.addColorStop(0.9, '#ffcc00');
    grad.addColorStop(1, '#ffdd44');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  
  function drawStars(time) {
    stars.forEach(s => {
      const alpha = s.brightness * (0.4 + 0.6 * Math.abs(Math.sin(time * s.speed + s.offset)));
      ctx.fillStyle = `rgba(200, 200, 255, ${alpha})`;
      ctx.beginPath();
      ctx.arc(s.x * canvas.width, s.y * canvas.height, s.size, 0, Math.PI * 2);
      ctx.fill();
    });
  }
  
  function drawSun(time) {
    const horizonY = getHorizonY();
    const sunX = canvas.width * 0.5;
    // Sun oscillates: above horizon → toward horizon → back up
    const sunY = horizonY - 200 + 120 * Math.sin(2 * Math.PI * time / LOOP_DURATION);
    const sunRadius = Math.max(40, canvas.width * 0.08);
    
    // Outer glow
    const glowRadius = sunRadius * 5;
    const glowGrad = ctx.createRadialGradient(sunX, sunY, sunRadius * 0.5, sunX, sunY, glowRadius);
    glowGrad.addColorStop(0, 'rgba(255, 120, 0, 0.25)');
    glowGrad.addColorStop(0.2, 'rgba(255, 60, 80, 0.12)');
    glowGrad.addColorStop(0.5, 'rgba(200, 0, 60, 0.04)');
    glowGrad.addColorStop(1, 'rgba(255, 0, 0, 0)');
    ctx.fillStyle = glowGrad;
    ctx.fillRect(sunX - glowRadius, sunY - glowRadius, glowRadius * 2, glowRadius * 2);
    
    // Sun body
    const sunGrad = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, sunRadius);
    sunGrad.addColorStop(0, '#ffffcc');
    sunGrad.addColorStop(0.15, '#ffee44');
    sunGrad.addColorStop(0.4, '#ff8800');
    sunGrad.addColorStop(0.7, '#ff3366');
    sunGrad.addColorStop(0.9, 'rgba(200, 0, 60, 0.3)');
    sunGrad.addColorStop(1, 'rgba(255, 0, 80, 0)');
    ctx.fillStyle = sunGrad;
    ctx.beginPath();
    ctx.arc(sunX, sunY, sunRadius, 0, Math.PI * 2);
    ctx.fill();
    
    // Scanline bands across the sun
    const scanSpacing = Math.max(4, sunRadius * 0.12);
    const scanHeight = Math.max(1, scanSpacing * 0.3);
    for (let y = sunY - sunRadius; y < sunY + sunRadius; y += scanSpacing) {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.35)';
      ctx.fillRect(sunX - sunRadius - 5, y, sunRadius * 2 + 10, scanHeight);
    }
  }
  
  function drawGrid(time) {
    const horizonY = getHorizonY();
    const w = canvas.width;
    const h = canvas.height;
    
    // Animate grid: horizontal offset increases over time
    const gridSpeed = 800; // pixels per loop duration
    const gridOffset = ((time / LOOP_DURATION) * gridSpeed) % (h * 0.8);
    
    // Horizontal grid lines
    const hLineCount = 60;
    const maxDepth = h * 1.5;
    
    for (let i = 0; i < hLineCount; i++) {
      let depth = ((i * maxDepth / hLineCount) + gridOffset) % maxDepth;
      const t = depth / maxDepth; // 0 = far (horizon), 1 = near (viewer)
      const perspectiveT = t * t;
      const y = horizonY + perspectiveT * (h - horizonY);
      
      if (y > h + 5 || y < horizonY - 5) continue;
      
      const alpha = 0.04 + t * 0.35;
      const lineWidth = 0.5 + t * 2;
      
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
      ctx.strokeStyle = `rgba(255, 0, 255, ${alpha})`;
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    }
    
    // Vertical grid lines
    const vLineCount = 20;
    const vanishX = w * 0.5;
    
    for (let i = 0; i < vLineCount; i++) {
      const t = (i + 0.5) / vLineCount;
      const spread = (t - 0.5) * w * 2.5;
      const endX = vanishX + spread;
      
      const alpha = 0.08 + t * 0.3;
      const lineWidth = 0.5 + t * 1.5;
      
      ctx.beginPath();
      ctx.moveTo(vanishX, horizonY);
      ctx.lineTo(endX, h);
      ctx.strokeStyle = `rgba(0, 255, 255, ${alpha})`;
      ctx.lineWidth = lineWidth;
      ctx.stroke();
    }
  }
  
  function drawGround(time) {
    const horizonY = getHorizonY();
    const h = canvas.height;
    
    // Dark ground
    const groundGrad = ctx.createLinearGradient(0, horizonY, 0, h);
    groundGrad.addColorStop(0, '#1a0010');
    groundGrad.addColorStop(0.3, '#0d0008');
    groundGrad.addColorStop(1, '#050005');
    ctx.fillStyle = groundGrad;
    ctx.fillRect(0, horizonY, canvas.width, h - horizonY);
  }
  
  function drawReflection(time) {
    const horizonY = getHorizonY();
    const w = canvas.width;
    const h = canvas.height;
    
    // The sun position (same as in drawSun)
    const sunX = w * 0.5;
    const sunY = horizonY - 200 + 120 * Math.sin(2 * Math.PI * time / LOOP_DURATION);
    const sunRadius = Math.max(40, w * 0.08);
    
    // Reflection: the sun's image is mirrored below the horizon
    // The reflection center is at the same distance below the horizon as the sun is above
    const reflCenterY = horizonY + (horizonY - sunY);
    const reflRadius = sunRadius * 1.2;
    
    // Reflection gradient - shifted toward purple/blue
    const reflGrad = ctx.createRadialGradient(sunX, reflCenterY, 0, sunX, reflCenterY, reflRadius * 3);
    reflGrad.addColorStop(0, 'rgba(120, 0, 180, 0.35)');
    reflGrad.addColorStop(0.2, 'rgba(80, 0, 140, 0.25)');
    reflGrad.addColorStop(0.5, 'rgba(200, 0, 100, 0.1)');
    reflGrad.addColorStop(0.8, 'rgba(255, 50, 50, 0.03)');
    reflGrad.addColorStop(1, 'rgba(255, 0, 0, 0)');
    ctx.fillStyle = reflGrad;
    ctx.fillRect(0, horizonY, w, h - horizonY);
    
    // Additional reflection bands - horizontal color bands below horizon
    const bandCount = 8;
    for (let i = 0; i < bandCount; i++) {
      const bandY = horizonY + (i + 1) * (h - horizonY) / (bandCount + 1);
      const bandHeight = (h - horizonY) / (bandCount + 1) * 0.6;
      const t = i / bandCount;
      const hue = 280 + t * 60; // purple to red
      ctx.fillStyle = `hsla(${hue}, 80%, 40%, ${0.06 + t * 0.04})`;
      ctx.fillRect(0, bandY - bandHeight / 2, w, bandHeight);
    }
    
    // Scanlines on reflection
    const scanSpacing = 5;
    for (let y = horizonY; y < h; y += scanSpacing) {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.12)';
      ctx.fillRect(0, y, w, 1.5);
    }
    
    // Horizon glow line
    const horizonGlow = ctx.createLinearGradient(0, horizonY - 10, 0, horizonY + 10);
    horizonGlow.addColorStop(0, 'rgba(255, 100, 50, 0)');
    horizonGlow.addColorStop(0.5, 'rgba(255, 80, 30, 0.3)');
    horizonGlow.addColorStop(1, 'rgba(255, 100, 50, 0)');
    ctx.fillStyle = horizonGlow;
    ctx.fillRect(0, horizonY - 10, w, 20);
  }
  
  function drawScanlines() {
    // Subtle CRT scanline effect across entire canvas
    ctx.fillStyle = 'rgba(0, 0, 0, 0.03)';
    for (let y = 0; y < canvas.height; y += 3) {
      ctx.fillRect(0, y, canvas.width, 1);
    }
  }
  
  function draw(time) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSky(time);
    drawStars(time);
    drawGrid(time);
    drawGround(time);
    drawReflection(time);
    drawSun(time);
    drawScanlines();
  }
  
  function animate(timestamp) {
    if (!paused) {
      if (lastTimestamp === 0) lastTimestamp = timestamp;
      const dt = (timestamp - lastTimestamp) / 1000;
      lastTimestamp = timestamp;
      loopTime = (loopTime + dt) % LOOP_DURATION;
    } else {
      lastTimestamp = 0; // Reset so dt is correct on resume
    }
    draw(loopTime);
    requestAnimationFrame(animate);
  }
  
  // Controls
  const pauseBtn = document.getElementById('pauseBtn');
  const restartBtn = document.getElementById('restartBtn');
  
  pauseBtn.addEventListener('click', () => {
    paused = !paused;
    pauseBtn.textContent = paused ? 'Resume' : 'Pause';
    if (!paused) {
      lastTimestamp = 0;
    }
  });
  
  restartBtn.addEventListener('click', () => {
    loopTime = 0;
    lastTimestamp = 0;
  });
  
  // Init
  window.addEventListener('resize', resize);
  resize();
  requestAnimationFrame(animate);
})();
</script>
</body>
</html>
```

Wait, I need to think about the seamless loop more carefully. The grid offset uses `(time / LOOP_DURATION) * gridSpeed) % (h * 0.8)`. This means at time=0 and time=LOOP_DURATION, the grid offset is the same (0), so the loop is seamless for the grid.

The sun uses `Math.sin(2 * Math.PI * time / LOOP_DURATION)` which is 0 at both time=0 and time=LOOP_DURATION, so it's seamless.

The stars use `Math.sin(time * speed + offset)` which is continuous, so no issues.

The reflection uses the same sun position calculation, so it's seamless too.

Good, the loop should be seamless.

Let me also think about the `lastTimestamp` reset when pausing. When we pause, we set `lastTimestamp = 0` so that on resume, `dt` is calculated correctly from the first frame after resume. But wait, if we set `lastTimestamp = 0` on pause, then on the first frame after resume, `timestamp - 0` would be a huge dt. Let me fix this:

```javascript
pauseBtn.addEventListener('click', () => {
    paused = !paused;
    pauseBtn.textContent = paused ? 'Resume' : 'Pause';
    if (!paused) {
      lastTimestamp = timestamp; // Set to current time on resume
    }
});
```

But we don't have `timestamp` in the click handler. Let me use a different approach:

```javascript
let lastTimestamp = 0;

function animate(timestamp) {
    if (!paused) {
      if (lastTimestamp === 0) lastTimestamp = timestamp;
      const dt = (timestamp - lastTimestamp) / 1000;
      lastTimestamp = timestamp;
      loopTime = (loopTime + dt) % LOOP_DURATION;
    } else {
      lastTimestamp = 0; // Will be set to current timestamp on resume
    }
    draw(loopTime);
    requestAnimationFrame(animate);
}
```

When paused, we set `lastTimestamp = 0`. On resume, the first frame will have `lastTimestamp = 0`, so `dt = timestamp - 0` which is huge. That's bad.

Let me fix this by tracking the pause time:

```javascript
let paused = false;
let lastTimestamp = 0;
let pauseStartTime = 0;
let totalPausedDuration = 0;

function animate(timestamp) {
    if (!paused) {
      if (lastTimestamp === 0) lastTimestamp = timestamp;
      const dt = (timestamp - lastTimestamp) / 1000;
      lastTimestamp = timestamp;
      loopTime = (loopTime + dt) % LOOP_DURATION;
    } else {
      lastTimestamp = 0;
    }
    draw(loopTime);
    requestAnimationFrame(animate);
}

pauseBtn.addEventListener('click', () => {
    paused = !paused;
    pauseBtn.textContent = paused ? 'Resume' : 'Pause';
    if (paused) {
      // Just pause, don't advance time
    } else {
      // Resuming - reset lastTimestamp so dt is small
      lastTimestamp = 0;
    }
});
```

Wait, this has the same problem. When we resume and lastTimestamp is 0, the first dt will be huge.

Better approach: don't reset lastTimestamp to 0. Instead, just don't update it while paused:

```javascript
function animate(timestamp) {
    if (!paused) {
      if (lastTimestamp === 0) lastTimestamp = timestamp;
      const dt = Math.min((timestamp - lastTimestamp) / 1000, 0.1); // Cap dt
      lastTimestamp = timestamp;
      loopTime = (loopTime + dt) % LOOP_DURATION;
    }
    draw(loopTime);
    requestAnimationFrame(animate);
}
```

When we pause, we just skip the time update but keep lastTimestamp as is. When we resume, the dt will be the time since the last frame before pause, which could be large if we paused for a while. But capping dt at 0.1 seconds prevents large jumps.

Actually, for a visual animation, a large dt jump when resuming is fine because the animation is loop-based and continuous. The loopTime just jumps forward by the paused duration, which is fine since everything is modulo-based.

Hmm, but if the pause duration is long, the loopTime jumps and the animation appears to skip ahead. That might be acceptable for a pause/resume feature.

Let me just keep it simple:

```javascript
function animate(timestamp) {
    if (!paused) {
      if (lastTimestamp > 0) {
        const dt = (timestamp - lastTimestamp) / 1000;
        loopTime = (loopTime + dt) % LOOP_DURATION;
      }
      lastTimestamp = timestamp;
    }
    draw(loopTime);
    requestAnimationFrame(animate);
}
```

When paused, lastTimestamp doesn't update, so on resume, dt will be the time since the last frame before pause. If the pause was short (a few seconds), this is fine. If the pause was long, there might be a small skip, but it's not a big deal.

Actually, let me just not worry about this edge case. The user can pause and resume, and a small skip is acceptable.

Let me also reconsider the restart button. When restart is clicked, loopTime should reset to 0:

```javascript
restartBtn.addEventListener('click', () => {
    loopTime = 0;
    lastTimestamp = 0; // So dt calculation is correct on next frame
});
```

OK, I think my code is solid. Let me also add a few more visual details:

1. A subtle vignette effect (darker corners)
2. Some horizontal "scanline" bands across the entire sky for extra CRT feel
3. Maybe some distant city silhouette on the horizon

Actually, let me keep it focused on the requirements. I don't want to over-complicate it.

Let me also double-check the reflection. The requirement says "Below the horizon, include a stylized reflection of the sun's colors on the ground plane, visually distinct from a second sun in the sky." So the reflection should be below the horizon and show the sun's colors but be different from a second sun. My current implementation draws a radial gradient below the horizon with purple/blue colors and scanlines, which should work.

Let me also make sure the ground plane has some visual presence. I'll add a subtle gradient for the ground.

One more thing - I should make the canvas resize properly. I'll add a resize event listener.

Let me finalize the code and write it.

Actually, I want to reconsider the reflection. Currently I have a radial gradient centered below the horizon, plus some horizontal color bands and scanlines. This should create a nice stylized reflection effect. The colors are purple/blue shifted compared to the sky sun (which is orange/yellow/pink), making it visually distinct.

Let me also add a subtle horizontal line at the horizon to make it more defined.

OK, let me write the final code now. I'll be comprehensive and make sure everything works.

One more consideration: the scanline effect on the sun. I want the scanlines to be visible but not overwhelming. I'll use semi-transparent dark lines with spacing that looks good at the sun's size.

Also, I should make sure the sun's glow is visible but doesn't wash out the scene. I'll use lower opacity for the outer glow.

Let me also add a subtle horizontal scanline overlay across the entire canvas for that CRT synthwave feel.

Here's my final code:

Actually, wait. Let me reconsider the grid animation. The requirement says "Animate the grid toward the viewer to suggest forward travel." This means the grid lines should move in a way that suggests the camera is moving forward. In a forward-moving camera:
- Horizontal lines move downward on screen
- Lines near the horizon move less than lines near the viewer
- The spacing between lines changes (lines near the viewer spread apart)

My current implementation moves all lines down by the same offset, which is a simplification. For a more realistic effect, I should move lines down proportionally to their depth (closer lines move more). But this is a complex calculation.

A simpler approach that still looks good: just shift the grid offset, which makes all lines move down. The perspective already makes closer lines appear larger and more spaced out, so the motion will look like forward travel.

Actually, let me think about this differently. The grid offset shifts all lines down uniformly. This means lines near the top (horizon) will wrap around to the bottom and reappear, while lines near the bottom (viewer) will also shift down and wrap. This creates a continuous forward-traveling effect.

The issue is that lines near the horizon should move less than lines near the viewer for realistic perspective. But for a stylized synthwave look, uniform movement is fine and actually looks better because it creates a more dramatic effect.

I'll keep my current approach.

Let me also make the vertical grid lines slightly animated. As the camera moves forward, vertical lines should appear to shift slightly. But this is complex, so I'll keep them static for now.

OK, I'm going to write the final code now. Let me also make sure the controls are properly styled and functional.

Let me write the complete index.html file:

I realize I should also think about what happens when the user resizes the window. The canvas should resize and all drawing should adapt. Since I'm using relative positions (percentages of canvas width/height), this should work automatically.

One more thing - I want to make sure the sun's scanline bands are clearly visible and create the "broken" effect described in the requirements. I'll make the scanlines semi-transparent dark lines that cut across the sun.

Let me finalize and write the code.

Let me also think about the color palette more carefully:
- Sky: deep purple (#05000a) at top → dark blue (#0a0020) → purple (#1a0040) → pink (#3a0050) → orange (#e04400) → yellow (#ffcc00) at horizon
- Sun: yellow core (#ffffcc) → orange (#ff8800) → pink (#ff3366) → transparent
- Grid horizontal lines: magenta/pink (rgba(255, 0, 255, ...))
- Grid vertical lines: cyan (rgba(0, 255, 255, ...))
- Ground: dark purple/red (#1a0010 → #050005)
- Reflection: purple/blue shifted (rgba(120, 0, 180, ...) → rgba(200, 0, 100, ...))
- Stars: white/blue (rgba(200, 200, 255, ...))
- Scanlines: dark semi-transparent (rgba(0, 0, 0, 0.35))

This is a classic synthwave palette. Good.

Let me write the final code now. I'll be very careful about all the details.

Actually, I want to reconsider one thing about the reflection. The requirement says "a stylized reflection of the sun's colors on the ground plane." This means the reflection should show the sun's colors (orange, yellow, pink) but in a stylized way on the ground. My current reflection uses purple/blue colors which is more of a "ground glow" than a reflection of the sun.

Let me change the reflection to use the sun's actual colors (orange, yellow, pink) but with a different treatment - more distorted, more scanlines, different opacity. This way it's clearly a reflection of the sun but stylized differently.

Actually, re-reading the requirement: "visually distinct from a second sun in the sky." So the reflection should be clearly different from the sun in the sky. Using different colors (purple/blue shifted) makes it distinct. But using the sun's colors (orange/pink) in a distorted way below the horizon could also work.

I think the best approach is: the reflection uses the sun's colors but heavily distorted, with more scanlines, different opacity, and a different shape (wider, more spread out). This makes it clearly a reflection of the sun but visually distinct.

Let me revise the reflection:

```javascript
function drawReflection(time) {
    const horizonY = getHorizonY();
    const w = canvas.width;
    const h = canvas.height;
    
    const sunX = w * 0.5;
    const sunY = horizonY - 200 + 120 * Math.sin(2 * Math.PI * time / LOOP_DURATION);
    const sunRadius = Math.max(40, w * 0.08);
    
    // Reflection: stretched, distorted version of sun colors below horizon
    // Use the sun's colors but more spread out and with wave distortion
    const reflGrad = ctx.createRadialGradient(sunX, horizonY + 50, 0, sunX, horizonY + 100, sunRadius * 4);
    reflGrad.addColorStop(0, 'rgba(255, 200, 50, 0.3)');
    reflGrad.addColorStop(0.3, 'rgba(255, 100, 0, 0.2)');
    reflGrad.addColorStop(0.6, 'rgba(255, 50, 100, 0.1)');
    reflGrad.addColorStop(1, 'rgba(200, 0, 50, 0)');
    ctx.fillStyle = reflGrad;
    ctx.fillRect(0, horizonY, w, h - horizonY);
    
    // Horizontal color bands in reflection
    const bandCount = 12;
    for (let i = 0; i < bandCount; i++) {
        const bandY = horizonY + (i + 1) * (h - horizonY) / (bandCount + 1);
        const bandHeight = (h - horizonY) / (bandCount + 1) * 0.8;
        const t = i / bandCount;
        // Alternate between sun colors
        const r = Math.floor(255 * (1 - t) + 100 * t);
        const g = Math.floor(200 * (1 - t) + 0 * t);
        const b = Math.floor(50 * (1 - t) + 150 * t);
        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${0.08 + t * 0.06})`;
        ctx.fillRect(0, bandY - bandHeight / 2, w, bandHeight);
    }
    
    // Dense scanlines on reflection
    for (let y = horizonY; y < h; y += 4) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
        ctx.fillRect(0, y, w, 1);
    }
}
```

Hmm, this is getting complex. Let me simplify and make it look good.

Actually, I think the reflection should be more like a mirror image of the sun below the horizon, but distorted and with different characteristics. Let me draw it as:

1. A large horizontal gradient band below the horizon that uses the sun's colors
2. With scanlines
3. With some wave distortion (using sine waves to offset the gradient)
4. More opaque near the horizon, fading to transparent at the bottom

Let me also add a subtle "horizon line" glow that separates the sky from the ground.

OK, I think I've planned enough. Let me write the final code now.

Let me also think about performance. With 60 horizontal grid lines, 20 vertical grid lines, 120 stars, and various gradients, the canvas rendering should be smooth at 60fps. The scanline overlay adds 200+ draw calls (one per scanline), which might be slow. Let me reduce the scanline density or use a more efficient approach.

For the global scanline overlay, I can draw it less frequently or use a pattern. Or I can just skip the global scanline overlay and only have scanlines on the sun and reflection.

Actually, let me use a more efficient approach for scanlines: create a pattern once and use it.

```javascript
// Create scanline pattern
const scanlineCanvas = document.createElement('canvas');
scanlineCanvas.width = 1;
scanlineCanvas.height = 4;
const scanlineCtx = scanlineCanvas.getContext('2d');
scanlineCtx.fillStyle = 'rgba(0, 0, 0, 0.04)';
scanlineCtx.fillRect(0, 0, 1, 2);
const scanlinePattern = ctx.createPattern(scanlineCanvas, 'repeat');
```

Then I can just fill the entire canvas with this pattern once per frame. This is much more efficient than drawing individual lines.

Let me use this approach for the global scanline overlay.

OK, final code time. Let me write it all out carefully.

Let me also reconsider the loop mechanism. I want the animation to loop every 15 seconds seamlessly. All animated values should be computed from `loopTime` which goes from 0 to LOOP_DURATION and then wraps back to 0.

For the sun: `sunY = horizonY - 200 + 120 * Math.sin(2 * Math.PI * loopTime / LOOP_DURATION)`
- At loopTime=0: sin(0) = 0, sunY = horizonY - 200 (above horizon)
- At loopTime=LOOP_DURATION/4: sin(π/2) = 1, sunY = horizonY - 80 (closer to horizon)
- At loopTime=LOOP_DURATION/2: sin(π) = 0, sunY = horizonY - 200 (back to start)

Wait, that's not right. sin(π) = 0, so at loopTime=LOOP_DURATION/2, sunY = horizonY - 200 again. That means the sun goes up and comes back to the same position at the halfway point, not at the end of the loop.

Let me recalculate:
- At loopTime=0: sin(0) = 0, sunY = horizonY - 200
- At loopTime=LOOP_DURATION/4: sin(π/2) = 1, sunY = horizonY - 200 + 120 = horizonY - 80
- At loopTime=LOOP_DURATION/2: sin(π) = 0, sunY = horizonY - 200
- At loopTime=3*LOOP_DURATION/4: sin(3π/2) = -1, sunY = horizonY - 200 - 120 = horizonY - 320
- At loopTime=LOOP_DURATION: sin(2π) = 0, sunY = horizonY - 200

So the sun oscillates between horizonY - 320 and horizonY - 80. It goes up, then down, then up again over one loop period. The movement toward the horizon (downward) happens in the first quarter, then it goes back up.

This is a smooth oscillation that loops seamlessly. The "slowly down toward the horizon" behavior is visible in the first quarter of the loop.

I think this works well. The sun moves down toward the horizon and then back up, creating a smooth continuous animation.

For the grid, the offset increases linearly over the loop:
`gridOffset = (loopTime / LOOP_DURATION) * gridSpeed`

At loopTime=0: offset=0
At loopTime=LOOP_DURATION: offset=gridSpeed

Since we use modulo, the grid offset wraps seamlessly. The grid lines appear to move downward continuously, wrapping around when they go off screen.

OK, I'm confident in the design. Let me write the final code.

One more thing - I want to add a subtle horizon glow effect. A bright line at the horizon where the sky meets the ground, with warm colors.

And I should add some atmospheric haze/glow near the horizon to make the scene more immersive.

Let me write the code now. I'll be thorough and make sure everything is correct.

Here's my final implementation plan:

1. Canvas setup with resize handler
2. Star generation
3. Draw functions:
   - drawSky(): gradient sky
   - drawStars(): twinkling stars
   - drawSun(): glowing sun with scanlines
   - drawGrid(): perspective grid with animation
   - drawGround(): dark ground below horizon
   - drawReflection(): stylized sun reflection below horizon
   - drawHorizonGlow(): bright line at horizon
   - drawScanlines(): subtle CRT effect
4. Animation loop with pause/resume/restart
5. Controls

Let me write it all now.

I realize I should also think about the "horizon" more carefully. The horizon is where the sky meets the ground. In my design, the horizon is at 58% of the canvas height. Above the horizon is the sky, below is the ground.

The grid extends from the foreground (bottom of screen) to the horizon. The sun is above the horizon. The reflection is below the horizon.

Let me also add some subtle mountains or terrain silhouette on the horizon for extra visual interest. Actually, the requirements don't mention this, so I'll skip it.

Wait, actually, let me add a very subtle mountain silhouette. It's a key element of synthwave art and would make the scene much more visually interesting. I'll draw it as a dark silhouette along the horizon.

No, let me stick to the requirements. The requirements specify:
1. Glowing gradient sun broken by horizontal scanline bands
2. Starfield
3. Perspective neon grid extending from foreground to horizon
4. Grid animated toward viewer
5. Sun moves slowly down toward horizon
6. Reflection of sun's colors below horizon
7. Loop 10-20 seconds
8. Pause/Resume and Restart controls
9. Procedural drawing
10. Fit canvas to viewport

I'll stick to these and not add extra elements.

OK, writing the final code now:

Let me think about one more thing - the reflection should be "visually distinct from a second sun in the sky." This means I should NOT draw a second sun shape below the horizon. Instead, I should draw the sun's colors spread out in a stylized way on the ground plane.

My current reflection approach (radial gradient + color bands + scanlines) should achieve this. The reflection is not a sun shape - it's a spread of colors on the ground.

Let me finalize the code. I want to make sure the visual quality is high. Here are some additional touches:
- The sky gradient should be smooth and rich
- The sun should have a strong glow effect
- The grid lines should have varying opacity and width for depth
- The reflection should have a distinct color shift
- The scanline effect should be subtle but present
- The overall composition should be balanced

Let me write the code now. I'll aim for about 300-400 lines of well-organized JavaScript.

Actually, let me reconsider the scanline approach for the entire canvas. Drawing individual scanline lines is slow. Using a pattern is better. But creating a pattern each frame is also slow. Let me create the pattern once and reuse it.

```javascript
// Create scanline pattern once
const scanlinePatternCanvas = document.createElement('canvas');
scanlinePatternCanvas.width = 1;
scanlinePatternCanvas.height = 4;
const slCtx = scanlinePatternCanvas.getContext('2d');
slCtx.fillStyle = 'rgba(0, 0, 0, 0.03)';
slCtx.fillRect(0, 0, 1, 2);
const scanlinePattern = ctx.createPattern(scanlinePatternCanvas, 'repeat');
```

Then in the draw function:
```javascript
ctx.fillStyle = scanlinePattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
```

This is efficient and creates a subtle CRT scanline effect.

But wait, I need to create this pattern after the canvas context is available, and I need to recreate it if the canvas is resized. Actually, the pattern is just a 1x4 pixel image, so it doesn't need to be recreated on resize.

Hmm, but `createPattern` needs a context that's already associated with a canvas. The pattern canvas is separate from the main canvas. Let me make sure this works.

Actually, `createPattern` takes an `HTMLImageElement` or `HTMLCanvasElement` and a repetition mode. It should work fine with a separate canvas element.

Let me include this in the initialization code.

OK, I'm going to write the complete code now. No more planning.

Let me also make sure the controls are properly positioned and styled. I'll put them at the bottom center of the screen with a semi-transparent background.

Here's the complete code:

Let me also think about edge cases:
- Very small viewport (mobile): the grid and sun should still be visible
- Very large viewport (desktop): the canvas should fill the screen
- Window resize: canvas should resize and redraw

All of these are handled by using relative positions (percentages of canvas width/height) and the resize event listener.

One more thing: I should make sure the animation starts immediately when the page loads, not after the first frame. I'll initialize `lastTimestamp` properly.

Actually, looking at my animate function again:

```javascript
function animate(timestamp) {
    if (!paused) {
      if (lastTimestamp > 0) {
        const dt = (timestamp - lastTimestamp) / 1000;
        loopTime = (loopTime + dt) % LOOP_DURATION;
      }
      lastTimestamp = timestamp;
    }
    draw(loopTime);
    requestAnimationFrame(animate);
}
```

On the first call, `lastTimestamp` is 0, so we skip the dt calculation and just set `lastTimestamp = timestamp`. On the second call, dt is calculated correctly. This is fine.

When we restart, we set `loopTime = 0` and `lastTimestamp = 0`. On the next frame, we skip dt calculation (since lastTimestamp is 0) and set lastTimestamp to the current timestamp. This is also fine.

When we pause, we stop updating loopTime. When we resume, lastTimestamp has the timestamp from before the pause, so the first dt after resume might be large (the pause duration). But this is acceptable - the animation just jumps forward by the pause duration, which is fine.

Actually, that's not ideal. If the user pauses for 10 seconds and then resumes, the animation jumps forward by 10 seconds in one frame. This could cause a visible jump.

Let me fix this by resetting lastTimestamp when resuming:

```javascript
pauseBtn.addEventListener('click', () => {
    paused = !paused;
    pauseBtn.textContent = paused ? 'Resume' : 'Pause';
    if (!paused) {
      lastTimestamp = 0; // Reset so dt is calculated from scratch on resume
    }
});
```

But then on the first frame after resume, `lastTimestamp` is 0, so we skip dt calculation and set `lastTimestamp = timestamp`. On the next frame, dt is calculated correctly. This means there's a 1-frame gap after resume, which is fine.

Wait, but if lastTimestamp is 0, we skip dt and just set lastTimestamp = timestamp. Then on the next frame, dt = timestamp2 - timestamp1, which is a normal frame delta. So the animation resumes normally after one frame. Good.

But what about the loopTime? It doesn't advance during the pause, which is correct. When we resume, it starts advancing again from where it left off. Good.

OK, I'm satisfied with the logic. Let me write the final code.

Let me also think about whether I need `requestAnimationFrame` vs `setInterval`. `requestAnimationFrame` is the standard for smooth animations and syncs with the display refresh rate. I'll use it.

One final thought: I should make sure the canvas is properly sized to the viewport. I'll set canvas.width and canvas.height to window.innerWidth and window.innerHeight, and also set CSS width and height to 100%.

Actually, for a full-screen canvas, I should set:
```css
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
```

And in JS:
```javascript
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
```

This ensures the canvas resolution matches the viewport size.

OK, writing the final code now. For real this time.

Let me think about the exact visual I want:

The scene should look like a classic synthwave/retrowave landscape:
- Dark purple/blue sky at the top
- Gradient to warm orange/pink near the horizon
- A bright glowing sun above the horizon with scanline effect
- Stars twinkling in the upper sky
- A neon pink/cyan perspective grid on the ground
- Dark ground below the horizon
- A stylized reflection of the sun's colors on the ground
- Subtle scanline overlay

The animation:
- Grid lines move downward (toward viewer) continuously
- Sun oscillates up and down sinusoidally
- Stars twinkle
- Everything loops every 15 seconds seamlessly

Controls:
- Pause/Resume button
- Restart button

Let me write it now.

I need to be careful about one thing: the `draw` function is called every frame, and it clears the canvas and redraws everything. This is the standard approach for canvas animation.

Let me also make sure I'm not creating new gradient objects every frame unnecessarily. Actually, for a canvas animation, creating gradients every frame is standard and fine for the number of gradients I'm using.

OK here's the final code. I'll write it to index.html.

The file has been written. Now I need to verify it works by opening it in a browser and inspecting the output. Let me use the browser tool to check it.

The page loaded and I can see "PAUSE" and "RESTART" buttons in the DOM. The console shows a sandbox warning but that's expected. Let me inspect the canvas rendering and check that the animation is running properly.

The browser is running in a sandboxed iframe, which limits some capabilities. Let me try to take a screenshot to see the visual output, and also check the console for any errors.

The browser tool seems to be running in a sandboxed environment with limited capabilities. The console shows a sandbox warning but no JavaScript errors. The DOM shows the PAUSE and RESTART buttons are present. Let me try to interact with the controls to verify they work, and also check the canvas rendering more carefully.

Let me try clicking the pause button and then taking a screenshot to verify the animation control works.

The browser seems to be in a sandboxed environment where I can't actually see the rendered canvas or take screenshots. The console shows no JavaScript errors though - just the sandbox warning. The DOM shows the buttons are present.

Let me try to verify the code is correct by reading it back and checking for any issues. Let me also try to use the browser's motion or key controls to interact with the page.

Actually, let me re-read the file I wrote to make sure it's complete and correct, and then try to verify the animation works by checking the console output more carefully.

The file looks good. Let me verify it works by checking the browser console and trying to interact with it. The browser is running in a sandboxed iframe, so I can't take screenshots, but I can check the DOM and console.

Let me try clicking the pause button and then checking the button text changes. I also want to verify the canvas is rendering properly.

Let me try a different approach - I'll use the browser tool to click the pause button and check the DOM changes, and also try to get the canvas rendering state.

Actually, looking at the browser output more carefully, the console only shows the sandbox warning, no JS errors. The DOM shows "PAUSE" and "RESTART" buttons. Let me try to interact with the buttons and verify the animation control works.

Let me also check if there are any JS errors by looking at the console more carefully. The only message is the sandbox warning, which is expected for an iframe.

Let me try to click the pause button and verify it changes to "Resume".

The browser tool is running in a sandboxed iframe and seems limited in what it can do. The DOM shows "PAUSE" and "RESTART" buttons, which means the HTML is rendering correctly. The console only shows a sandbox warning, no JavaScript errors.

Let me try to interact with the buttons more specifically. The click at (600, 760) might not be hitting the right spot. Let me try to find the button positions more carefully.

Actually, looking at the output, the DOM shows "PAUSE\nRESTART" which means the buttons are present. The sandbox warning is expected for iframes.

Let me try to click on the pause button more precisely. The buttons are at the bottom center. Let me try different coordinates.

Actually, I think the issue is that the browser tool is limited in this sandboxed environment. Let me just verify the code is correct by reviewing it carefully and then report the results.

Let me verify the key aspects of the code:

1. **Canvas setup**: Full viewport canvas with resize handler ✓
2. **Sky gradient**: Multi-stop gradient from dark purple to warm orange/yellow ✓
3. **Starfield**: 140 stars with twinkling animation ✓
4. **Sun**: Radial gradient with glow, scanline bands ✓
5. **Perspective grid**: Horizontal lines (magenta) and vertical lines (cyan) with perspective projection ✓
6. **Grid animation**: Horizontal lines move toward viewer (downward) ✓
7. **Sun movement**: Sinusoidal oscillation toward horizon ✓
8. **Reflection**: Below horizon with purple-shifted colors, scanlines, color bands ✓
9. **Loop**: 15-second loop with modulo arithmetic ✓
10. **Controls**: Pause/Resume and Restart buttons ✓
11. **No external resources**: All inline, no CDNs ✓
12. **Scanline overlay**: Efficient pattern-based CRT effect ✓
13. **Vignette**: Radial gradient darkening at edges ✓

The code looks complete and correct. Let me try to verify the animation by checking if the canvas is being rendered. Let me try a different approach to test it.

Actually, I should try to verify the canvas rendering by checking if there are any JavaScript errors. The console output only shows the sandbox warning, which is expected. No JS errors means the code is running correctly.

Let me also verify the file size and make sure it's reasonable.

The file is 10KB and has 94 function/var/let/const declarations, which seems reasonable for a single-file synthwave landscape.

Let me now try to verify the animation works by using the browser tool more carefully. Let me try to click the pause button and check if the text changes. I need to find the right coordinates for the buttons.

The controls are at the bottom center of the screen. The pause button is on the left and restart on the right. Let me try clicking at the right position.

Actually, let me try a different approach - let me use the browser's type action to interact with the page, or use key events. Or I can try to evaluate JavaScript in the browser context.

Wait, the browser tool doesn't have an "evaluate" action. Let me try clicking at different positions to find the buttons.

Actually, looking at the browser output more carefully, the DOM just shows "PAUSE\nRESTART" which means the buttons are rendering. The sandbox warning is expected.

Let me try to use the browser tool's `type` action to send keyboard shortcuts, or try clicking at different coordinates.

Let me try clicking the pause button at a more precise location. The viewport is 1200x800 based on the browser tool description. The buttons are at the bottom center, so they should be around y=760, x=500-700.

Let me try clicking at the center of the pause button more precisely.

Let me try a different approach to verify the code.

All checks pass. Let me also try to verify the animation works by interacting with the browser more carefully. Let me try to click the pause button and check the DOM changes, and also try to verify the canvas is rendering by checking its dimensions.

The two failing checks are:
1. "Glowing gradient sun" - checking for 'radialGradient', 'ffcc00', 'ff8800', 'ff3366' in the JS
2. "Perspective neon grid" - checking for 'perspective', 'maxD', 'hLineCount', 'vLineCount' in the JS

Let me check what's actually in the JS. The issue might be that the check is looking for exact strings that might be formatted differently. Let me look at the actual code more carefully.

For the sun, I have:
- `ctx.createRadialGradient` - this contains 'radialGradient' ✓
- `#ffffd0`, `#ffee55`, `#ff9900`, `#ff3366` - these are in the sun gradient ✓

Wait, the check is looking for 'ffcc00' but I used '#ffffd0', '#ffee55', '#ff9900', '#ff3366'. The check is looking for 'ffcc00' which I don't have. But that's just a check issue, not a code issue. The sun does have a glowing gradient.

For the grid, I have 'maxD', 'hLineCount', 'vCount' (not 'vLineCount'). The check is looking for 'vLineCount' but I used 'vCount'. And 'perspective' - let me check if I have that word. I don't think I have the literal word 'perspective' in my JS code. I have 'perspectiveT' and 'perspective' might not be a standalone word.

These are just check script issues, not actual code problems. The code is correct. Let me verify by looking at the actual JS more carefully.

Actually, let me just verify the code works by trying to run it in the browser and checking the console for errors.

The checks show that most things are present. The "glow gradient" check failed because the variable name is `gg` not `gr`, and "hLineCount" and "perspectiveT" checks failed because I used `hCount` and `pt` respectively. These are just naming differences in the check script, not actual code issues.

Let me verify the key things are all working:
- All 7 drawing functions exist ✓
- Sun has radial gradient with proper colors ✓
- Grid has perspective projection ✓
- Stars, scanlines, vignette all present ✓
- No external resources ✓
- Pause/Resume and Restart controls ✓
- 15s loop duration ✓

The code looks complete and correct. Let me also try to verify the animation actually runs in the browser by checking for JS errors.

All checks pass. The code is complete and correct. Let me now try to verify the animation works in the browser by checking for console errors. Let me also try to interact with the controls to verify they work.

Let me try to use the browser tool to check the canvas rendering and interact with the controls.

The only "failure" is the starfield twinkle check, which is looking for the literal word "twinkle" but I used "offset" and "speed" for the twinkle effect. The starfield does twinkle - it uses `Math.sin(t * s.speed + s.offset)` to vary brightness. The check just didn't find the word "twinkle" literally. This is a check script issue, not a code issue.

Let me verify the starfield twinkle is actually working by checking the relevant code:
- Stars have `speed`, `offset`, and `bright` properties
- The twinkle is computed as `0.35 + 0.65 * Math.abs(Math.sin(t * s.speed + s.offset))`

This is correct. The starfield does twinkle.

Let me also try to actually run the page in the browser and check for JS errors.

All checks pass. The code is complete and correct. Let me now try to verify the animation actually works in the browser by checking for JS errors and testing the controls.

Let me try to use the browser tool more carefully to interact with the page.

The only "false" is "Horizontal lines with perspective" - let me check why. The check was looking for `perspectiveT` but I used `pt` as the variable name. Let me verify:

In the grid code, I have:
```javascript
var pt = tt * tt;
var y = hy + pt * (h - hy);
```

So `perspectiveT` is not literally in the code, but `pt = tt * tt` is the perspective calculation. The check was looking for the literal string "perspectiveT" which doesn't exist. The actual perspective math is there (`pt = tt * tt`).

Also, the check for "Horizontal lines with perspective" was looking for both `perspectiveT` AND `tt * tt`, but `perspectiveT` isn't in the code. The variable is `pt`. So this is just a check script issue, not a code issue.

Let me verify the horizontal grid lines do use perspective:
- `var tt = depth / maxD;` - normalized depth
- `var pt = tt * tt;` - quadratic perspective
- `var y = hy + pt * (h - hy);` - perspective-projected y position

Yes, this is correct perspective projection. The check script just didn't find the exact string "perspectiveT".

Everything looks good. Let me now try to actually test the page in the browser to verify it renders and the controls work.

Python3 isn't available. Let me try with node or just verify the file is correct and move on. The browser tool has a sandbox warning but the DOM shows the buttons are present. Let me try to interact with the page more directly.

Port 8080 is already in use. Let me try a different port or just use the browser tool to interact with the page. The browser tool seems to work - it showed the DOM with PAUSE and RESTART buttons. Let me try to use it more effectively to verify the animation works.

Let me try to use the browser tool to click the pause button and verify it works.

The pause button worked - it changed from "PAUSE" to "RESUME". Now let me try to click resume to verify it works both ways, and then test the restart button.

The resume button works — it changed back from "RESUME" to "PAUSE". Now let me test the restart button.

The restart button was clicked. The DOM still shows "PAUSE\nRESTART" which means the page is still running. The restart button should have reset the animation to the start. Let me verify the restart button works by checking if the loopTime was reset.

Let me also try to verify the canvas is rendering properly by checking the canvas element exists and has the right dimensions.

Let me now try to verify the animation is actually running by checking if the canvas has been drawn to.

The browser tool is running in a sandboxed iframe, so I can't take screenshots or inspect the canvas rendering directly. But I've verified:

1. The DOM shows "PAUSE" and "RESTART" buttons are present
2. Clicking the pause button changes it to "RESUME" ✓
3. Clicking resume changes it back to "PAUSE" ✓
4. Clicking restart doesn't change the button text (it just resets the animation) ✓
5. All code checks pass

The canvas rendering can't be visually verified in this sandboxed environment, but the code is correct and all the structural checks pass. Let me also verify the file exists and is complete.

Let me also check if there are any JS errors in the console. The only console message is the sandbox warning, which is expected for an iframe. No JS errors are reported.

I'm confident the implementation is correct. Let me do a final check of the file and report the results.

The file is 343 lines, 10KB, with 19 function/addEventListener/requestAnimationFrame references. Everything looks good.

Let me also verify the file is complete and well-formed by checking the HTML structure.

The grep for external refs returned 0 matches which is good (exit code 1 means no matches found). Let me verify:

- HTML structure: 7 tags (DOCTYPE, html open/close, head open/close, body open/close) ✓
- Canvas element: 1 ✓
- Controls: 7 matches (pauseBtn, restartBtn, Pause, Resume, Restart) ✓
- Script tags: 2 (opening and closing) ✓
- Style tags: 2 (opening and closing) ✓
- No external refs: 0 ✓

Everything looks good. The file is complete and well-formed. Let me now summarize what was built and verified.

Actually, let me also try to verify the animation is actually running by checking if the canvas has non-zero dimensions after a brief wait.