We need create single index.html self-contained with CSS/JS inline. Need animated synthwave sunset: glowing gradient sun, scanlines setting over infinite neon grid scrolling toward viewer, starfield and reflected horizon. Need likely use HTML5 canvas for animation. Build all in one file, no external resources. We'll write index.html with style and script. Need be visually appealing. Need consider canvas full window, pixel ratio, animations: starfield (twinkling), grid perspective (3D grid with floor and maybe ceiling? horizon center, grid scrolls toward viewer). Sun behind horizon or partially below? Sunset means setting so sun moving downward? It can over time loop. Sun gradient yellow/orange/red/purple, glow. Reflection on horizon? In synthwave, sun is often a huge circle behind grid, with reflection on water? The prompt implies reflected horizon, maybe horizon line reflects sun/ colors. Include scanlines overlay (CSS) and grid reflected across horizon? Reflected horizon could be mirrored grid? Let's implement: canvas draws a starfield, sun as gradient circle behind mountains/horizon. Use a perspective grid floor, and a reflected grid ceiling? Actually "reflected horizon" might be a horizontal line separating ground and sky, with reflection of the sun below horizon, like on water. To capture "reflected horizon", we can invert a copy of the sun below horizon with gradient opacity and draw horizontal reflection bars. The neon grid scrolling toward viewer can be drawn as a perspective grid on the lower half, plus maybe a reflected grid above horizon? But typical synthwave: grid on lower half, sun above horizon. Since the prompt asks for reflected horizon, maybe we include water reflection of the grid and sun. We'll implement: Lower half is ground plane with grid, and reflected starfield/sun above? Hmm.

Let's produce a beautiful scene: sky gradient from deep purple at top to hot pink/orange near horizon. Starfield in sky (draw small points twinkling). The grid drawn on the lower half as perspective plane, with vertical lines converging to center and horizontal lines moving down. Color neon magenta/cyan, with alpha gradient closer to horizon stronger. We'll also draw a "reflection" of the grid above horizon? That would be a ceiling grid typical retrowave. But phrase "reflected horizon" maybe horizon mirror effect.

Need use HTML/CSS for scanlines overlay. Maybe add CSS CRT scanline overlay and vignette. Also perhaps add JS scanlines animation? "Sun with scanlines setting"—scanlines can be across the whole scene via CSS overlay. Could also draw scanline shading on sun? We'll do overlay.

Need animate grid scroll. Implementation details: Use requestAnimationFrame. Use two canvases? Simpler single canvas. Draw each frame.

Sun: circle centered horizontally at width/2, vertical position varying with time to simulate setting from above to near horizon. Use gradient radial from white/yellow core to orange/red/purple edges. Add glow using shadowBlur and outer faded ring.

Grid: compute horizonY = height * 0.55 (or dynamic). floor y from horizonY to height. For each horizontal line at distance z from near (bottom) to far (horizon). Need linear or exponential spacing for perspective. We can precompute z values. horizontal lines y = horizonY + (height-horizonY) * (zNear/z) maybe. Or use simple: lines move along perspective: z (distance from viewer) = zNear to zFar. y(h) = horizonY + (height - horizonY) * (z - zNear) / (zFar - zNear)? That's linear, no perspective. Better use y = horizonY + (height-horizonY)*farScale/(z+offset). Let's derive: at z=near (small), y=bottom; at z=far (large), y=horizon. Use y = horizonY + (height-horizonY)* (zNear / z). If z from near to far, y near bottom at z=near, y horizon at z=far. Use z geometrically. Movement: z decreases toward viewer; when z < near, wrap to far. vertical lines: x = centerX + (xWorld - cameraX)*scale / z where xWorld evenly spaced grid lines; draws from horizon to bottom. Color alpha depends on distance: lines near horizon fainter. Use clipping to lower half? Could draw floor only.

Reflection horizon: We can draw a water-like reflection by rendering the sun and grid mirrored above? Wait lower half is ground. Reflection of sun could appear below horizon if ground is water. We can compute reflection: draw sun (above horizon) mirrored with gradient alpha in lower half. Also draw horizontal shine lines. But grid already in lower half; reflection could also have grid reflection? Maybe no need.

Simpler: draw a reflected duplicate of the grid in upper half (ceiling) and sun above? But "setting over infinite neon grid" suggests grid in front below. "Reflected horizon" means the horizon line creates a mirror reflection of the sky and sun (like over water). Let's implement lower half as reflection plane: The grid is drawn on lower half; the sun has its reflection. Use alpha lower half maybe darker.

Let's plan canvas drawing order:
1. Fill sky gradient.
2. Stars: only above horizon? Could allow stars all over but gradient dim near bottom.
3. Draw sun (above horizon) and maybe mountains sillohuette? Could add mountain range along horizon for retro. Mirror mountains? But not requested.
4. Reflected sun in lower half: draw ellipse/arc clipped to lower half, with gradient opacity and wave? Could draw vertical gradient fade.
5. Ground grid (lower half), blended with reflection? We'll draw grid on top of reflection. Maybe grid lines use additive composite.
6. Horizon line glow.
7. Scanline overlay via CSS.

Also "glowing gradient sun with scanlines setting"—scanlines could be drawn across sun like a retro sun's stripe cutouts? Some synthwave suns have horizontal lines (scanlines) cut through the disc. We could draw sun with horizontal gaps (like retro sun with stripes). But prompt specifically "glowing gradient sun with scanlines setting over an infinite neon grid"—probably full screen scanlines overlay. To emphasize, maybe add retro sun stripes inside the sun (horizontal lines). It's aesthetically synthwave. We'll add: draw sun with gradient and then overlay black/scanner lines as horizontal band gaps through the sun. That also hints "scanlines setting over grid." We can do both: retro sun with segments.

Let's craft detailed code.

We'll create an index.html. Use CSS:
* full-screen body margin 0, background black, overflow hidden.
* canvas display block.
* .overlay scanlines: pointer-events none; position fixed; inset 0; background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,.25) 2px, rgba(0,0,0,.25) 4px); z-index 5.
* vignette overlay radial gradient.
Title.

JS:
Canvas setup resize. Pixel ratio maybe simplified: set canvas width/height = window inner * devicePixelRatio and scale context by dpr. But CSS size in px. Use ctx.setTransform.

Variables:
width, height, horizonY.
time (seconds).
Star array size 300; positions x in [0,width], y in [0, horizonY]. Twinkle by alpha noise based on time.

Sun:
centerX width/2, radius ~ height*0.28 (large). Its cy oscillates from height*0.2 to horizonY+radius*0.3 to simulate setting over time. Use sine of time/15? Let's use t with phase: cy = horizonY + margin - (horizonY + radius*0.5 )* (0.5 + 0.5*cos(t * speed))? Actually want sun move down then reset? Use modulo for day/night cycle. Simpler: sunY = startY + (endY - startY)*((t/duration)%1). startY = height*0.15 endY = horizonY + radius*0.6 (below horizon). Use duration 30 seconds. Draw sun even when below horizon partially. Reflection accordingly. Add color change: near top yellow/orange, near horizon red/purple. Could compute gradient colors based on sunY ratio. We'll implement dynamic gradient.

DrawSun function(ctx, cx, cy, r, progress):
- Create radial gradient centered at (cx,cy), radius r.
- Colors: core white/yellow; mid orange; edges deep red/purple. We can use gradient stops by progress? For more dramatic, when low add magenta.
- Save context. BeginPath circle fill. Then shadowBlur large with magenta/orange. Fill.
- Retro sun stripes: we can clip to circle, then draw black horizontal bands or transparent cutouts. But cutouts would reveal background. We can stroke black lines, or fill arcs. We'll do black horizontal bars with gaps using globalComposite 'destination-out' to make holes. However sun's glow behind? If we use destination-out, we'll remove from sun and maybe glow? Need careful. Could draw after filling sun, with composite 'destination-out' inside circle. But glow uses shadow before fill maybe. Use path: clip to circle, then draw rectangles with transparent? Actually destination-out within clip removes from existing drawn sun, leaving glow? We drew glow via shadow, which lies outside. Destination-out removes sun area where glow? It might also remove the shadow? Shadow is not part of path? In canvas shadow is painted before stroke/fill, but destination-out won't draw shadow. So cutouts become transparent, showing sky gradient. That looks like retro sun segments. Use black bars (fillStyle same as sky? hard). Use destination-out rectangles. Then restore.

- Add outer ring: stroke circle with color.

Sun reflection:
Clip to lower half (y >= horizonY). Draw mirrored sun: scale(1,-1) translate(0,-2*horizonY). Draw same sun with reduced globalAlpha ~0.25, maybe use 'lighter'. But reflection should fade toward bottom. Use gradient alpha mask? We can draw reflection as a clipped region with vertical gradient; set globalComposite 'source-atop' after drawing maybe. Simpler: draw a vertical linear gradient clip? Use createLinearGradient from horizon (opaque) to bottom (transparent), fill rectangle with gradient in alpha? Actually can fill reflection using composite 'destination-in'? Let's do: draw reflection shape (ellipse) with fill gradient, then overlay with gradient to fade. Another approach: use gradient fill for reflection itself: radial gradient but also globalAlpha 0.3; okay. Also draw horizontal reflection streaks: lines across lower half from sun's x range with alpha. We'll implement: mirrored sun with alpha 0.25, plus a vertical fade by drawing a rect over lower half with gradient 'destination-in' maybe. Simpler: after drawing reflection, set globalComposite 'destination-in', fillRect lower half with gradient alpha (transparent at bottom). But that affects previously drawn objects? It would fade the entire lower half including grid? we draw reflection before grid. But 'destination-in' applies to all existing canvas in lower half. That would darken ground. Use a separate offscreen? Maybe not. We can just draw reflection with globalAlpha 0.2 and a gradient fill ellipse; good enough.

Grid:
Function drawGrid. Lower half. We'll draw floor perspective grid lines. Use world z from near to far. Set zOffset (scroll) based on time: z = near + (i * spacing) - (scrollZ % spacing). Actually to scroll toward viewer, reduce all z by speed, wrap. Use perspective: y(z) = horizonY + (height - horizonY) * zScale / (z + z0). Use zPositive into distance. We need monotonic. Let's define z from 1 (far) to 0 (near)? Let's derive: For a point at distance d from viewer (d increasing away). screenY = horizonY + (height-horizonY)/d? At d=1, y at bottom? Hmm if d near=1 gives y bottom (height). If d far=infinity gives horizonY. So y = horizonY + (height-horizonY)/d. Good, d>=1. At d=1 y bottom; d=∞ y horizon. So horizontal lines at d values. Scroll: d decreases toward 1? Wait to move toward viewer, d decreases to 1 then resets to far. Starting with offset t: d_i = far / (linear?). Actually we can generate d values from nearLimit to farLimit (e.g., 1 to 20), with spacing. Each frame subtract speed*dt from d, when d<1 wrap to far. However y spacing depends on 1/d, so near bottom lines are dense.

Let's compute max_d = maybe 12, min_d=1.05. Grid line distance delta increasing as d? Need maintain constant screen spacing? Maybe easier: generate lines at screen rows in perspective and scroll them. Use a base row spacing based on exponential. Let's param: for each line k from 0..N, define d_k = max_d * (min_d/max_d)^(k/N) so log spacing near horizon dense, near bottom sparse. Then scroll by shifting k and fractional offset. As time progresses, lines move toward bottom. We can compute offset s from 0..1 in k-space and update. But we can also just update d = d_initial / (1 + time*speed)? Hard.

Alternative approach: Precompute horizontal line y positions with exponential spacing: start at horizon with y=horizonY+delta, each next y = previous + max(1, (y - horizonY)*growth). That creates perspective. Then scroll by moving first gap and wrapping. This is efficient: maintain array of nextY? But can recompute each frame using function.

Simpler grid:
for (let z = -far; z <= 0; z += 1) { // z negative into distance
  y = horizonY + (height-horizonY) * Math.pow(1 + z/far, power)? 
}
When z=0 (near), y=bottom; z=-far (far), y=horizon. Add scroll cyc: z'(t) = z + scroll (mod far). But perspective: if we move z from -far to 0 linearly, screenY = horizonY + (height-horizonY)*((z+far)/far)^2. This squares distance, making horizon lines sparse near horizon; good. Actually need far lines dense. Use power = 2 or exponential. y = horizonY + (height-horizonY)*Math.pow((z+far)/far, 2). When z=-far => 0 horizon. When z=0 =>1 bottom. Lines moving by increment z: as they approach viewer (z increases), y moves faster near bottom. Wrap.

Vertical lines: worldX lines are at constant x intervals, drawn from near to far. To avoid expensive per-point, for each xWorld from -numLines*spacing to numLines*spacing, compute x = centerX + (xWorld)/(z+1?) Actually for vertical lines on ground, xScreen remains centerX + xWorld * scale / d. But drawing as straight lines from near (d=1) to far is an approximation (not a perfect perspective vertical curve), but acceptable. Use y from horizonY to height. xLeft/right vary linearly with 1/d. We can draw line segment from horizon to bottom with a gradient alpha.

Color floor: fill lower half with dark gradient from black to deep purple. Then 'lighter' grid. Use ctx.globalCompositeOperation = 'lighter'? We can set grid line colors with alpha and stroke. Use 'lighter' for glow. We'll use strokeStyle hsl(hue, 100%, 60%, alpha). horizontal lines fade with distance alpha. vertical lines alpha gradient.

Reflected grid? Could draw a mirrored grid on upper half as ceiling, clipped to sky. We can draw a simple grid above horizon with lower alpha. "Infinite neon grid that scrolls toward the viewer"—floor grid enough. Reflection horizon maybe a mirrored sun and skyline.

Horizon line: bright line at horizonY with glow.

Mountains? Add low silhouette mountains along horizon to anchor scene. But not requested; could enhance. However "reflected horizon" might be horizon line with reflection; mountains could block. We'll add subtle dark mountain range maybe. Not necessary.

Stars twinkle: color white/ tiny cyan/pink. Alpha random time. Only sky.

Performance: recompute grid each frame is fine.

Need ensure single file, no external. Use no images/CDNs. Use requestAnimationFrame.

Let's write high-quality code with comments. Use const.

Potential issues: canvas scaling with dpr hides CSS size. We'll handle resize.

Let's write code.

Detailed sun drawing:
drawRetroSun(cx, cy, r, phase) {
  // phase 0 top -> 1 set
  const sunGrad = ctx.createRadialGradient(cx, cy - r*0.2, r*0.1, cx, cy, r);
  if (phase<0.5) {
    sunGrad.addColorStop(0,'#fffbb0');
    sunGrad.addColorStop(0.3,'#ffeb3b');
    sunGrad.addColorStop(0.7,'#ff9800');
    sunGrad.addColorStop(1,'rgba(255,0,85,0)');
  } else { ... }
}

For retro stripes (scanlines): clip circle then with composite destination-out draw bars. But this removes sun fill as well as any previously drawn stars in that area. Good, reveals background. Need restore composite.

function drawSun(cx, cy, r, phase) {
  ctx.save();
  // Glow
  ctx.shadowBlur = r*0.8;
  ctx.shadowColor = phase<0.5 ? '#ff0055' : '#ff00aa';
  const g = ctx.createRadialGradient(cx, cy - r*.1, 0, cx, cy, r);
  g.addColorStop(0,'#fff');
  g.addColorStop(0.25,'#fff59d');
  g.addColorStop(0.55,'#ff9800');
  g.addColorStop(0.85,'#f50057');
  g.addColorStop(1,'rgba(124,0,255,0)');
  ctx.fillStyle=g;
  ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.fill();
  ctx.shadowBlur=0;
  // Outline
  ctx.strokeStyle='#ff80ab'; ctx.lineWidth=2; ctx.stroke();
  // Scanline stripes / retro sun cuts
  ctx.globalCompositeOperation='destination-out';
  const bands=12;
  for (let i=1; i<bands; i+=2) {
    const yTop = cy - r + (2*i) * (r/bands); // gap
    const h = r/bands;
     ctx.fillRect(cx - r, yTop, r*2, h);
  }
  ctx.restore();
}

Note: destination-out with no clip but fillRect may erase stars outside sun if rectangle is within? FillRect within sun x-range and y within. Since sun circle maybe large, making vertical rectangle could erase outside circle? We want only cutout from sun. Better clip to circle first. Use arc clip. Then destination-out rectangles. We'll do clip.

Reflection: We can draw reflection by scaling transform. But need to avoid same scanline cutouts? Reflection should show mirrored sun with stripes. Use same drawSun function with transform scale(1,-1) about horizon line. However clipping to lower half and alpha. Implement:
ctx.save();
ctx.beginPath(); ctx.rect(0, horizonY, width, height-horizonY); ctx.clip();
ctx.translate(0, horizonY); ctx.scale(1,-1); ctx.translate(0,-horizonY);
ctx.globalAlpha=0.22;
drawSun(cx, horizonY*2 - cy? Actually transform mirrors across horizon, so cy reflected automatically? Wait translate/scale transforms about horizon: point (x,y) becomes (x, 2*horizonY - y). If cy above horizon, reflected below. So we can use same drawSun(cx, cy, r). But with vertical translation not needed? Let's use: ctx.transform(1,0,0,-1,0,2*horizonY); Then draw sun at original cy. It will be mirrored. Also draws stripes. Add after grid? Maybe grid drawn after reflection? To have grid over reflection, draw reflection before grid. But reflection stripes cutouts visible? The destination-out in drawSun will erase from existing canvas (background, maybe grid if drawn before). So draw reflection before grid. Good.

But if we draw the original sun first then reflection, the reflection's destination-out will erase background (sky gradient mirrored below? We haven't drawn lower background maybe). We'll draw sky only once full screen as gradient. So reflection cutouts will show sky gradient but in lower half where sky gradient colors anyway; acceptable. But reflection should appear over ground fill (which we can draw before reflection? If background gradient covers entire screen, cutouts show sky color; below horizon we want dark ground. So perhaps fill ground before reflection. Then reflection drawSun will erase parts of dark ground. Cutouts would show sky gradient color, not ground. That's weird. We can avoid scanline cutouts in reflection to simplify: draw a simpler reflection ellipse with gradient and no destination-out. Or draw reflection after ground fill with alpha but no cutouts. Then draw reflection fade at bottom. Good.

Let's plan drawing order:
1. Background gradient across entire screen.
2. Stars in upper sky.
3. Fill lower half with dark ground gradient.
4. Draw reflection of sun (simple) in lower half.
5. Draw floor grid.
6. Draw sun (upper).
7. Horizon line, mountains maybe.
8. CSS overlays.

We can skip detailed scanline cutouts in reflection; original sun will have retro stripes. Reflection can be vertical gradient ellipse.

Sun reflection fade: function drawReflection(cx, cy, r). Clip lower half. Use ctx.scale(1,-1) mirrored y. Fill arc with radial gradient from orange to transparent, alpha globalAlpha 0.25. Then draw horizontal streaks at y mirrored and fade to bottom using vertical gradient overlay rect.

Implementation specifics:
const horizonY = height * 0.58; maybe slightly above center. Sun behind grid? Sun is drawn above horizon; grid floor in lower half. If sun is large behind grid, it should be drawn before grid? Grid floor only lower half, so sun visible above. Fine.

Grid floor in lower half; the floor grid doesn't cover sun.

Horizon line: strokeStyle '#fff', lineWidth 1.5, shadowBlur 10 '#ff00aa', alpha.

Mountains: Could draw jagged silhouette across horizon to hide sun partially/retro. Use periodic sin noise. Fill black/dark purple. Might make reflection of mountains too? Maybe not.

Maybe we should add glow from sun along horizon line; nice.

Stars: small circles, alpha twinkle = 0.3 + 0.7*(sin(phase_i + time*twinkle_speed)*0.5+0.5).

Grid animation: We'll implement a robust scrolling perspective grid. Let's detail:
- Define params: near = 1.0; far = 25.0; speed = 8 units/sec. scroll = (time * speed) % 1 (because lines at every integer z). Actually z lines every 1 unit from near to far. We update them as z_i = near + i*spacing + frac. But simple: For d from near to far, offset = (d - scroll). When offset < near, wrap += (far-near). However since y depends on offset^2, as offset decreases from 1+n to 1, line moves from horizon to bottom quickly then jumps. Good.

Pseudo:
function drawFloorGrid(cx, horizonY, time) {
  const near = 1.0;
  const far = 30.0;
  const speed = 6.0; // units per sec
  let scroll = (time * speed) % (far - near);
  ctx.save();
  ctx.globalCompositeOperation='lighter';
  // horizontal lines
  const maxSteps = 60;
  const density = 1.0; // z step
  ctx.lineWidth=1.5;
  for (let z = near; z <= far; z += density) {
    let d = z - scroll;
    if (d < near) d += (far - near);
    // maybe if d>far skip but we only iterate up to far? adjusted may exceed far and be hidden? but okay.
    const t = (d - near) / (far - near); // 0 near, 1 far
    const y = horizonY + (height - horizonY) * t * t; // perspective square
    const alpha = (1 - t) * 0.9; // near bright
    ctx.strokeStyle = `hsla(320, 100%, 65%, ${alpha})`;
    ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(width,y); ctx.stroke();
  }
  // vertical lines
  const hSlices = 20; // number of vertical lines each side
  const vSpacing = 80; // world units between vertical lines at near plane
  for (let i = -hSlices; i <= hSlices; i++) {
    const xWorld = i * 50; 
    // compute screen x at near and far
    const scale = (height - horizonY); // approximate
    const xNear = cx + (xWorld / near);
    const xFar = cx + (xWorld / far);
    const alpha = 0.65;
    // We can draw as straight line from horizon xFar to bottom xNear.
    const gradient = ctx.createLinearGradient(xFar, horizonY, xNear, height);
    gradient.addColorStop(0, `hsla(180,100%,70%,0)`);
    gradient.addColorStop(0.4, `hsla(180,100%,60%,${alpha*0.4})`);
    gradient.addColorStop(1, `hsla(180,100%,60%,${alpha})`);
    ctx.strokeStyle = gradient;
    ctx.beginPath();
    ctx.moveTo(xFar, horizonY);
    ctx.lineTo(xNear, height);
    ctx.stroke();
  }
  ctx.restore();
}

But horizontal line y using square gives t=distance ratio; we need d from near (1) to far (30): t=(d-1)/(29). y=hy+dy*t^2. When d=near, t=0 y=horizon? Wait near is viewer's feet at bottom. But with d near=1, t=0 gives horizon; that's wrong. If d=1 means near, y should bottom, so t should be 0 at far, 1 at near? Let's define normalized = (far - d)/(far - near), where near d=1 => normalized ~1 => y bottom; far d=30 => normalized 0 => horizon. So y = horizonY + (height-horizonY)*(1 - (d - near)/(far - near))^2? Simpler: let p = (far - d)/(far - near), from 0 far to 1 near. y = horizonY + (height-horizonY)*p*p. Good.

When d decreases by scroll (towards near), p increases -> y moves down. When d < near, wrap to far (p near 0). Good.

Distance d should represent distance from camera. At near (small d), p ~1. y bottom. At far, p~0 horizon.

Horizontal line alpha gradient: lines near bottom bright, near horizon fade. alpha = p*0.8. Good.

Vertical lines: we need scale factor so at near plane xWorld maps to screen coordinates. The current xNear = cx + xWorld/near isn't scaled; we need a scale constant. Let's choose scaleNear = (height-horizonY) / 1 maybe. In perspective: screenX = cx + xWorld * (height - horizonY) / d? Possibly. With d=1, an xWorld of 50 gives screen offset 50*(height-horizonY). That might be too big. Better use xWorld spacing in units so at near plane offset equals fraction of width. Let's define gridWorldWidth = width * 0.6 (visible at bottom). xWorld = i * (gridWorldWidth / hSlices). Then at near (d=1), xWorld*scale/d and scale maybe 0.8? Actually we can use projection constant k = (height - horizonY) / 2? Let's derive from vertical line visible at bottom: at width edges, the world X at near should be some max. Use xNear = cx + xWorld * widthScale / near. Choose widthScale = 0.7 maybe. Then xWorld max to reach edge = near*(width/2)/widthScale. If widthScale=0.7, xWorld max ~0.714*width/2. We can tune. Simpler: line from horizon outward; choose xNear = cx + i* (width/hSlices*0.9). That guarantees convergence to cx near horizon. But for straight line, xFar = cx + i*(width/hSlices*0.9)/scaleFactor? We need xFar finite not at cx for far lines? In perspective, verticals converge to vanishing point at cx, horizonY at infinity. So xFar should approach cx. For finite far d, xFar = cx + (xWorld * scale/d). If we define xWorld increment and scale constant, xFar close to cx if far large. Simpler: For vertical lines, use:
const bottomSpacing = width / hSlices;
const xNear = cx + i * bottomSpacing * 0.85;
const xFar = cx + i * bottomSpacing * 0.05; // almost center
That produces nice visual perspective and doesn't depend on d constants. But horizontal lines scroll; verticals static across width. That may look okay. But if we want vertical lines moving? The viewer moves forward but vertical lines remain static; only horizontal lines move. That's fine for grid scrolling toward viewer.

Could add lateral camera drift over time moving the vertical lines slowly: iOffset = sin(time*0.1)*some. Good.

Let's make vertical lines use perspective based on d to match horizontal. Define world grid params: spacing = 80 world units, num vertical lines 31. vertical at worldX = (i-15)*spacing. Use projection constant scale = (height-horizonY) * 0.8 / near? Let's derive from desired near plane width. Let nearWorldHalfWidth = width / (2*scale). We'll set scale = (height - horizonY)*0.7? At d=1, xOffset = worldX*0.7*dy. If worldX max=1200, offset huge. Need smaller scale. Use scale = 1.5 maybe. Then at d=1, offset=worldX*1.5. With worldX up to 1200 -> 1800 too large. Use worldX spacing = 80 gives max 1200, with scale=0.2 offset 240. Hmm.

Rather than calibration, let's use intuitive screen-space lines:
const laneCount = 14; // each side
const bottomGap = width / 30; // near screen spacing
const topGapMax = width / 100; // near horizon
for (let i=-laneCount; i<=laneCount; i++) {
  const xNear = cx + i*bottomGap*1.2;
  const xFar = cx + i*topGapMax;
  draw line from (xFar, horizonY) to (xNear, height). This is straight converging lines, looks like perspective grid. We can also modulate i by lateral offset for movement. Static vertical lines okay, but could move horizontally slightly with camera. Since user didn't request lateral movement, fine.

But an "infinite neon grid that scrolls toward the viewer" with only horizontal lines moving can be convincing. The vertical lines should maybe move according to scroll as well if grid moves forward? Actually forward motion only shifts horizontal lines. Vertical lines remain same positions but their z segments? In a proper perspective transform, grid squares, so moving forward means vertical line spacing at screen changes? no, with static world vertical lines, moving forward doesn't change their screen positions? Wait perspective projection xScreen = center + xWorld * focalLength / z. As viewer moves forward, z of all grid points decreases (distance to camera), so xWorld lines scale up? The world x positions don't change; but as camera advances along Z, the projection at the near plane expands outward? Actually lines get closer to camera? Hmm. If camera moves along Z, the world x coordinate projection scales by 1/(z - cameraZ). The vertical lines have constant xWorld and varying z along each line. At the near plane (z = cameraZ+1), the scale is constant (1). So xWorld lines map to same screen near positions regardless of cameraZ. Only horizontal lines (constant world z) move toward camera. So vertical lines stay fixed. Good. So we can just draw vertical lines straight from vanishing point to near positions; no need to transform x with d. This is correct visual.

Alternatively, make vertical lines slightly curved using horizon to bottom and x positions computed by projecting constant xWorld/d. Straight lines are acceptable.

But to make grid scrolly, horizontal lines can be exponential. The vertical lines should converge to cx at horizon but can be drawn as straight. Use a gradient alpha along vertical to fade at horizon.

Let's refine grid with a "fog" and glow.

CSS scanlines overlay plus vignette.

Let's produce final code. Also handle window resize, stars regenerated.

Potential issue: On high dpr, canvas coordinate transforms; but mouse not needed. We'll set ctx.setTransform(dpr,0,0,dpr,0,0). Use width=innerWidth, height=innerHeight logical; physical size CSS px. That fine.

Let's code now.

We can also include a small "stats" overlay? No.

Let's verify animation. We'll open mental.

Code structure:
<!DOCTYPE html>
<html lang="en">
<head> meta charset viewport, title, style.
</head>
<body>
  <canvas id="scene"></canvas>
  <div class="overlay scanlines"></div>
  <div class="overlay vignette"></div>
<script>
...
</script>
</body>
</html>

CSS:
body{margin:0;overflow:hidden;background:#05000f;color:#fff;}
#scene{position:fixed;inset:0;display:block;}
.overlay{position:fixed;inset:0;pointer-events:none;z-index:10;}
.scanlines{background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.35) 2px, rgba(0,0,0,0.35) 4px); mix-blend-mode: overlay; opacity:.7;}
.vignette{background: radial-gradient(circle at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%); }

JS:
const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');
let width,height, horizonY, dpr;
const stars=[];
let starCount=0;
function initStars(){...}
function resize(){ width=innerWidth; height=innerHeight; dpr=Math.min(window.devicePixelRatio||1,2); canvas.width=Math.floor(width*dpr); canvas.height=Math.floor(height*dpr); canvas.style.width=width+'px'; canvas.style.height=height+'px'; ctx.setTransform(dpr,0,0,dpr,0,0); horizonY=height*0.58; initStars();}
function star stuff.
function drawSky(){ linear gradient: top #0d001a, mid #2a003b, low #ff4f7f? Make horizon orange/pink. Use stops: 0 #050014, 0.45 #240041, 0.75 #6a005c, 1 #ff2a6d (near horizon).}
function drawGround(){ rect lower half with dark gradient: horizon dark purple/black, bottom black. }
function drawStars(time){ for stars: alpha twinkle. }
function drawSun(cx,cy,r,phase){ ... sunrise-sunset colors. }
function drawSunReflection(cx,cy,r){ clip lower, transform scale -1, draw a filled circle with gradient and alpha=0.3; add vertical fade gradient via overlay rect with destination-in. }
function drawHorizonLine(){ stroke line plus glow. }
function drawMountains(){ optional. }
function drawGrid(time){ ... }
function animate(t){ time=t*0.001; ... clear; drawSky; Stars; Moon? etc; compute sun cycle; calculate progress and cy; drawGround; drawSunReflection; drawGrid; drawSun; drawHorizonLine; requestAnimationFrame; }

Let's define sun cycle:
const dayDuration = 45; // seconds
let p = (time % dayDuration) / dayDuration; // 0..1
const startY = -height*0.1; // above top
const setY = horizonY + r*0.65; // below horizon
const cy = startY + (setY - startY) * p;
const r = Math.min(width,height)*0.28;

Phase for colors: use p. If p<0.5 high sun yellow-orange; p>0.5 sunset red-purple. But sun starts above, sets at 1. Actually at p=0 top high? startY negative. At p maybe 0.2 still high. Use p as set progress (0 at start top, 1 fully set). Let's create colorStops array based on p? Use HSL interpolation.

Sun radial gradient: core #fff; mid yellow/orange; outer red/purple transparent. As p increases shift mid to red/magenta. We can define gradient stops via p. But using fixed stops already has outer magenta transparent; enough.

We can also change glow color based on progress. p<0.5: '#ffaa00'; p>0.5: '#ff00aa'. Good.

Reflection: draw mirrored sun below horizon. Since sun may be below horizon at p near 1, reflection goes above horizon? But clip lower half. Good.

Grid: draw after ground and reflection, before sun (then sun above grid). Since sun is above horizon, grid in lower half won't overlap. Good.

Horizontal grid lines: use ctx.globalCompositeOperation = 'lighter'. But if we draw to full width, line alpha adds where overlapping vertical lines. That's fine.

Vertical lines: we can draw with gradient alpha and 'lighter'. Color maybe cyan and magenta alternating or purple. Let's use magenta horizontal, cyan vertical. Or mix. Synthwave grids are usually magenta/pink. We'll use both.

Implementation of horizontal lines with exponential:
const far = 35; const near = 1; const speed=10; const scroll = (time*speed)%(1);
const steps=60; const spacing=1; 
for (let i=0; i<steps; i++) {
  let d = near + i*spacing - scroll;
  while(d<near) d += spacing; // or if d<near, d += (far-near);
  if(d>far) continue;
  const p = (far - d)/(far - near); // 0 horizon, 1 bottom
  const y = horizonY + (height-horizonY)*p*p;
  const alpha = p*0.85;
  ctx.strokeStyle=`hsla(318,100%,68%,${alpha})`;
  ctx.beginPath; moveTo(0,y); lineTo(width,y); stroke();
}
This gives moving lines. Since we subtract scroll from d, d decreases => p increases => y moves down (towards viewer). When d drops below near, we add spacing pushing back to far/top. Good.

But d calculation `near + i*spacing - scroll` then wrap by adding spacing if below near; yes. However after wrap d may exceed far? could skip. If d+spacing < far -> line visible high (near horizon). Good.

But scroll range [0,1) is too small? Each frame d shifts up to speed*dt; if speed=10 and dt~0.016, shift=0.16. spacing=1. So d decreases by 0.16 per frame between wrap events each ~0.06 sec lines move fast. Maybe speed 5. We'll tune.

Actually use `const speed = 8; const scroll = (time * speed) % spacing;`. good.

Vertical lines:
const lanes=16; const maxOffset = width*0.55; const bottomGap = maxOffset/lanes; for i from -lanes..lanes:
const shift = Math.sin(time*0.2)*50; maybe not.
const xNear = cx + i*width/(lanes*1.5) + shift? Use i*bottomGap? Actually xNear = cx + i* (width*0.5/lanes) * 1.4. xFar = cx + i*(width*0.02/lanes). Linear gradient stroke from horizon to bottom. Color alternating i%2? Use cyan to pink.
for i: ctx.strokeStyle gradient; line from (xFar, horizonY) to (xNear, height). H line not clipped but below horizon. The vertical line near horizon alpha 0 via gradient.

To make grid feel infinite, also drawing horizontal lines in upper half mirror? Let's add a ceiling grid reflected in upper half (a mirror of floor) with lower alpha, scrolls same direction? That gives a room/walkway retrowave look. But prompt says "setting over an infinite neon grid"; sun above grid. Could draw grid only floor. To capture reflected horizon, draw horizon line and sun reflection. Good.

Maybe draw a subtle reflection of grid in lower half by drawing horizontal lines slightly faded? Actually grid is already in lower half (ground). We can add water effect: after grid draw, overlay a sheen/gradient? Not needed.

Check CSS scanlines: should be pointer-events none. Good.

Need consider using arc with dpr scaling; we set transform dpr. Works. Need reset transform before set new? In resize we set.

Let's also add minor animations: stars twinkle, sun color blend, grid scroll, mountains maybe static silhouette. Let's add mountains silhouettes: use path along horizon with Perlin-ish sine. Fill `rgba(10,0,20,0.85)`. That grounds scene. But mountains might obscure reflection of sun. The sun behind mountains? In retro, sun is huge behind mountain silhouette. We can draw mountains at horizonY with height varying, sun drawn before mountains or after? If sun behind mountains, draw sun then mountains (mountains obscure part of sun near horizon). Reflection in lower half maybe without mountains cutout? Could simulate reflection of mountains? Not needed. Let's add mountains above horizon and maybe dark reflection of mountains below? To include reflected horizon: Actually horizon reflection of sun over water plus mountains across horizon. Mountains not required. Let's keep simple: no mountains to avoid complexity. The horizon line is enough.

However a sun setting into water would be partially below horizon, with reflection. Good.

Let's ensure phrase "glowing gradient sun with scanlines"—we'll implement retro sun scanline stripes. Good. Since sun uses destination-out, in the sun disc there will be horizontal gaps showing background (sky). This is classic synthwave sun. Good.

Potential issue: destination-out with clip circle. After restore, composite returns. But the fill `arc` and stroke produce shadow glow around sun, then destination-out inside clip removes parts of the sun disk. It also removes glow inside? Glow is around the edges. It will create a striped sun with gaps revealing sky. That is good. But if sun overlaps horizon at lower part off-screen, clipping inside circle might include area below horizon for destination-out, erasing ground if ground drawn before sun. But we draw sun before ground? If ground drawn after sun, ground could cover the lower part; but sun may extend below horizon. We want sun setting over grid, maybe behind horizon as it sets. We can draw sun before ground/reflection? Let's order:
1 sky
2 stars
3 sun (with stripes)
4 ground fill lower half (covers bottom of sun partially, giving horizon cut)
5 reflection of sun
6 grid
7 horizon line
This way, ground covers lower sun appropriately, grid in front. Great. Reflection after ground. But ground fill occludes stripe cutouts where sky would be? Actually sun drawn on sky; then ground rect covers below horizon. Sun stripes are inside sun; where sun is above horizon, gaps show sky. Where sun extends below horizon, ground covers. Good.

But reflection: draw simple mirrored sun below horizon on ground. Good.

Let's also fade ground slightly to show reflection. Good.

For starfield, only above horizon. If sun bright, maybe stars less visible near sun? We can overlay black? not needed.

Detailed code for drawReflection:
function drawReflection(cx, cy, r) {
  ctx.save();
  ctx.beginPath();
  ctx.rect(0, horizonY, width, height-horizonY);
  ctx.clip();
  ctx.translate(cx, horizonY);
  ctx.scale(1, -1);
  ctx.translate(-cx, -horizonY);
  ctx.globalAlpha = 0.25;
  const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
  grad.addColorStop(0, 'rgba(255,255,200,0.8)');
  grad.addColorStop(0.4, 'rgba(255,150,50,0.6)');
  grad.addColorStop(1, 'rgba(255,0,100,0)');
  ctx.fillStyle=grad;
  ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2); ctx.fill();
  // vertical fade at bottom
  ctx.globalCompositeOperation='destination-in';
  const fade=ctx.createLinearGradient(0, horizonY, 0, height);
  fade.addColorStop(0,'rgba(255,255,255,1)');
  fade.addColorStop(1,'rgba(255,255,255,0)');
  ctx.fillStyle=fade;
  ctx.fillRect(0, horizonY, width, height-horizonY);
  ctx.restore();
}
But note with globalComposite destination-in and scale transforms, fillRect coordinates need in original coordinate system: we translated and scaled; then after destination-in should fill in original coordinates. Works.

We need be careful about drawSun: using shadowBlur large might be slow but fine.

Let's create final file with all code. Ensure no external resources. Use template literals. Include comments.

One more: Add an optional "grid reflection" above horizon? Maybe draw ceiling grid clip upper half with low alpha before stars? It might dilute. Let's skip.

Potential issue: On high resolution devices, ctx.setTransform(dpr...) but when we use arc, coordinates are logical. Good.

Let's write file using write tool.

Before write, I should perhaps test by reading? No file yet; just write. But maybe check cwd. Use bash ls. Not necessary but I'll check.

  Now create index.html.

   Verify no syntax issues: Could run a linter maybe open file with node? Since HTML contains JS, can just check structure. Maybe run a quick python HTTP server and maybe execute? But no browser. We can at least syntax-check JS by copying to node? But HTML. Let's read parts to ensure no bug.

    The remaining lines probably okay. Need sanity check potential bugs:

- drawStars alpha formula: `const alpha = 0.35 + 0.65 * Math.sin(time * s.speed + s.twinkle) * 0.5 + 0.5;` Order precedence: 0.65 * sin(...) * 0.5 = 0.325 * sin(...). Then 0.35 + <that> + 0.5 = 0.85 + 0.325*sin. So alpha can be up to 1.175 > 1 and down to 0.525. Not desired (always >0.52, too bright). I intended 0.35 + 0.65 * ((sin(...)*0.5)+0.5) = 0.35 + 0.65*0.5*sin + 0.325 = 0.675 + 0.325*sin. That gives [0.35,1]. Better fix with parentheses. Also hue flicker maybe too colorful; can simplify use white with alpha. But hue %360 and choosing 300 or 0 based on hue >180; these are pink/cyan. fine.

- `drawSun` uses destination-out clipped to circle. It will erase from the current canvas only the parts of the sun disc, leaving glow (shadow) untouched. That looks good. But the fillRect band y: `y = cy - r + i * bandH * 2`. For i up to bands-2 maybe y within. At i=13 (max odd less than 14), y = cy - r + 13*2*bandH = cy - r + 26*bandH = cy - r + 26*(r/14) = cy + r*(12/14) ~ cy+0.857r, within bottom. Good. BandH = r/14.

- `drawGrid` y function uses p = (far-d)/(far-near). For d near 1, p ~1; y = hy + dy * Math.pow(1-p,2) = hy + 0 = horizon. That's wrong: near should be bottom. We need near=1 corresponds to bottom. Since p near = (far-1)/(far-near)= ~1, y = horizon + dy*pow(1-p,2) => horizon. So we reversed. Need y = horizon + dy * p^2 perhaps. Let's check: d=near => p~1 => bottom (dy). y = hy+dy*p^2 gives bottom. d=far => p=0 => horizon. So use `Math.pow(p, 2)`. Also alpha: near bright alpha ~ (1-p)*0.85, with p=1 =>0; but near lines should be bright. Use alpha = p*0.85. So fix. Also comment says 0 at horizon, 1 at viewer good. So y = hy+dy*(p^2), alpha=p*0.85.

- d loop: d = near + i*spacing - scroll. When scroll small, d slightly less, p slightly bigger, lower. When scroll increases to near 1, d just below near wrap to far => p small => line jumps to horizon. Good. But vertical movement continuous.

- drawGrid for vertical lines: xTop near horizon uses topGap; i*topGap + drift*(i/lanes)*0.1. At i=18, topGap=width*0.02/18=~0.0011*width, so top spread 2% width; fine. bottom gap width*0.52/18. Good.

- Reflection transformation and fade gradient: after scale(1,-1) and translate, drawing fillRect with original coordinates should work? The coordinate transformation flips around horizon. We translate by (0,horizonY); scale(1,-1); translate(0,-horizonY). Matrix maps (x,y) -> (x, 2*horizonY - y). So a point at y = horizonY maps to itself, y=height maps to horizonY*2 - height, etc. Then we call createLinearGradient(0, horizonY, 0, height) and fillRect(0, horizonY, width, height-horizonY). But due to transform, fillRect region originally defined from y=horizonY to height is below horizon. After transform, it maps to region from y=horizonY to y=2*horizonY - height, which is above horizon (mirrored). Wait fillRect draws rectangle in current user space, then transform maps to screen. Since we are drawing reflection, the transformed region should be below horizon. For original y below horizon (y>horizonY), mirrored y = 2*horizonY - y < horizonY (above horizon). That's not what we want for reflection. Actually to draw a reflected sun below horizon, we want to draw the sun in a coordinate system mirrored so that original sun points above horizon map to below. If we apply transform M that maps y -> 2*horizonY - y, then original upper point y=sunY (<horizonY) maps to 2*horizonY - sunY (>horizonY), below horizon. Good. So we draw the original sun geometry with this transform; it appears below. The fillRect for fade should be in mirrored coordinate system as well? In this transformed space, the "below horizon" area corresponds to original y > horizonY. But we want fade from horizon (y=horizonY in transformed screen) to bottom (screen y=height). Under transform, screen y=height corresponds to original y = 2*horizonY - height (above horizon). And screen y=horizonY corresponds to original y=horizonY. So drawing a gradient from original y=horizonY to original y=2*horizonY - height maps to screen y=horizonY to y=height. Wait original y values above horizon. The fillRect in original coords must cover from horizon upward to 2h - bottom. That seems okay with current values: ctx.fillRect(0, horizonY, width, height - horizonY) but where is height relative to original? height is the canvas screen height. Under transform, original y=height maps to screen y = 2*horizonY - height (above), so fillRect draws region from original y=horizonY downward to y=height, which maps to screen region from horizon UPWARD to 2h - height, i.e., entire reflected lower half. Good. The gradient defined from horizonY to height corresponds to screen from horizon to bottom. Perfect.

But after scale(1,-1), createLinearGradient coordinates refer to current user space; but anyway it's okay.

However, we draw the reflection arc with `ctx.arc(cx, cy, r*0.95, 0, 2π)`. Original cy above horizon; transformed below. Good.

Potential issue: after transform, fillRect with height-horizonY positive goes upward in screen, but canvas fill direction in current user space is down (increasing original y). Since original y=height corresponds to screen y above horizon, rectangle covers the mirrored lower half. Good.

- Alpha after reflection: drawGrid uses 'lighter' composite. It draws vertical/horizontal lines over reflection; fine.

- Horizon line drawn after ground/reflection/grid to sit on top; good.

- CSS overlay z-index 10 over canvas. `mix-blend-mode: overlay` might blend scanlines with underlying canvas; okay.

- Star hue: The expression `hue > 180 ? 300 : 0` uses hue from `(time * 10 + s.twinkle * 30) % 360` then chooses 300 or 0. That's a rapid switch; but okay.

- Need no external resources. Good.

Let's fix the stars alpha and grid y/alpha. Use edit.

    We should also verify `globalCompositeOperation = 'destination-out'` in drawSun works on top of stars? It erases from canvas where clip to sun circle, creating gaps showing sky. Stars inside sun circle get erased too. Good. The shadow glow remains. However the sun fill includes a gradient with alpha 0 outer edge. destination-out may over-erase within circle, including transparency edges. Fine.

One issue: We draw ground after sun. Sun below horizon covered. Reflection draws in lower half but also might draw above horizon due to transformation? Actually no, only lower half. Good.

We might want to add a subtle line-loop animation for the starfield? No.

Could the grid's horizontal lines become too dense near horizon? We use square (p^2), so near horizon p small, p^2 tiny => high line density (good). Near bottom p=1, y=bottom.

Let's maybe reduce `far` to 25 so not too many horizon lines. With steps=70 and spacing=1, lines only up to far=34. Fine.

Potential performance with shadowBlur large, but sun only one, okay.

Need ensure file contains no dependencies. Good.

Maybe we should also fix `drawStars` hue variable unused? It's used in fillStyle. good.

Now check there are no syntax errors with node by extracting script. Could run a simple parse with node --check. We can use bash to put script in temp file.

     Node --check passed. Good.

Should we maybe test opening in a headless browser? Not necessary. The code is correct. However, let's check logical issue: In drawGrid, `d > far continue`. But with d wrap, d = near+spacing-scroll ~ near+1-0.x = near+0.x << far, not > far. Good. As i increases, d could exceed far near high i; continue. Fine. With scroll=0, lines for d=1..70, far=34; lines with d>34 skipped. So we have fixed number ~34 visible lines. Good.

Let's compute y for d near 1: p=(34-1)/(33)=1 -> y=horizon+dy=height. Good. d=34: p=0 -> y=horizon. Good. The perspective uses p^2, so near bottom lines spaced further, near horizon dense.

Alpha p*0.85: near bottom =0.85 visible, near horizon fade. Good.

Potential issue: Horizontal lines drawn under vertical lines; globalComposite 'lighter' means colors add. Fine.

One more: The reflection uses destination-in to fade. But since we set globalComposite 'destination-in', any subsequent fill within the same save affects existing content. After fillRect, we restore. Good. But inside the reflection clip, the earlier sun radial gradient has alpha 0.22. Then destination-in fade multiplies alpha by gradient. That works.

But we also filled a radial gradient with transparent outer; using destination-in after that will make the outer even more transparent (good). It may also erase beyond gradient? The gradient color alpha becomes lower; okay.

Need no other resources.

Maybe add `body { touch-action: none; }`? Not needed.

Now respond to user concisely, mention file path and features.