Fix night sky: visible clouds, real moon-driven darkening

Three coordinated changes:
1. nightPaletteNew.cloud: void -> raised (slightly lighter than
   sky) so clouds have contrast against the new-moon sky
2. nightPaletteFull.cloudShadow: panel -> void so cloud undersides
   fade into the night sky, while the lit topsides (border) stand
   out clearly
3. getNightColor() now keeps 'light' (moonlight) bright and only
   partially darkens sky/bg. The previous version squashed
   everything toward black, killing cloud structure.

Shader side:
- max(0.15, uDayProgress) keeps a baseline moonlight tint on the
  lit side of clouds even when uDayProgress happens to be 0
- The final darken pass is now driven by nightFactor (sunAlt-based)
  instead of the unreliable uDayProgress

background-final.html

@@ -1480,14 +1480,15 @@ if (useVanta && typeof VANTA !== 'undefined') {
             // Rebuild palette
             window.sunPalettes = [
                 { alt: -Math.PI / 2, sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
-                { alt: -0.1, sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
+                { alt: -0.262, sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
+                { alt: -0.087, sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
                 { alt: 0.0, sky: hexToInt(ASH.rust), cloud: hexToInt(ASH.border), light: hexToInt(ASH.gold), bg: hexToInt(ASH.rust), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.gold), sunLight: hexToInt(ASH.ember), sunVis: 0.8 },
-                { alt: 0.15, sky: hexToInt(ASH.blood), cloud: hexToInt(ASH.border), light: hexToInt(ASH.ember), bg: hexToInt(ASH.blood), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.ember), sunLight: hexToInt(ASH.ember), sunVis: 0.7 },
+                { alt: 0.087, sky: hexToInt(ASH.blood), cloud: hexToInt(ASH.border), light: hexToInt(ASH.ember), bg: hexToInt(ASH.blood), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.ember), sunLight: hexToInt(ASH.ember), sunVis: 0.7 },
                 { alt: 0.4, sky: hexToInt(ASH.steel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.bone), bg: hexToInt(ASH.steel), cloudShadow: hexToInt(ASH.steel), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 },
                 { alt: Math.PI / 2, sky: hexToInt(ASH.steelLight), cloud: hexToInt(ASH.border), light: hexToInt(ASH.chalk), bg: hexToInt(ASH.steelLight), cloudShadow: hexToInt(ASH.steelLight), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 }
             ];
-            window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
-            window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
+            window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.raised), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
+            window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
             window.weatherThemes = {
                 sunny: {
                     skyColor: hexToInt(ASH.steelLight),
@@ -1524,18 +1525,23 @@ if (useVanta && typeof VANTA !== 'undefined') {
         // altitude in radians: -pi/2 (below) to pi/2 (zenith)
         // Sun position palette (altitude-based) - all colors from current theme
         // altitude in radians: -pi/2 (below) to pi/2 (zenith)
-        window.sunPalettes = [
+        // Compressed twilight: dusk and dawn palette entries are now at
+// -5deg / +5deg so the sunset transition completes within roughly
+// an hour of clock time. -15deg is already full-night (void), so
+// the sky is properly dark by ~1h after sunset.
+window.sunPalettes = [
                 { alt: -Math.PI / 2, sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
-                { alt: -0.1, sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
+                { alt: -0.262, sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
+                { alt: -0.087, sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone), sunVis: 0 },
                 { alt: 0.0, sky: hexToInt(ASH.rust), cloud: hexToInt(ASH.border), light: hexToInt(ASH.gold), bg: hexToInt(ASH.rust), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.gold), sunLight: hexToInt(ASH.ember), sunVis: 0.8 },
-                { alt: 0.15, sky: hexToInt(ASH.blood), cloud: hexToInt(ASH.border), light: hexToInt(ASH.ember), bg: hexToInt(ASH.blood), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.ember), sunLight: hexToInt(ASH.ember), sunVis: 0.7 },
+                { alt: 0.087, sky: hexToInt(ASH.blood), cloud: hexToInt(ASH.border), light: hexToInt(ASH.ember), bg: hexToInt(ASH.blood), cloudShadow: hexToInt(ASH.raised), sun: hexToInt(ASH.ember), sunGlare: hexToInt(ASH.ember), sunLight: hexToInt(ASH.ember), sunVis: 0.7 },
                 { alt: 0.4, sky: hexToInt(ASH.steel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.bone), bg: hexToInt(ASH.steel), cloudShadow: hexToInt(ASH.steel), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 },
                 { alt: Math.PI / 2, sky: hexToInt(ASH.steelLight), cloud: hexToInt(ASH.border), light: hexToInt(ASH.chalk), bg: hexToInt(ASH.steelLight), cloudShadow: hexToInt(ASH.steelLight), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 }
         ];
 
         // Night palette based on moon phase (0 = new, 0.5 = full, 1 = new) - Ash colors
-        window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
-        window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
+        window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.raised), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
+        window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
 
         var MIN_NIGHT_BRIGHTNESS = 0.25; // minimum night brightness (even at new moon)
 
@@ -1584,16 +1590,18 @@ if (useVanta && typeof VANTA !== 'undefined') {
                 sunGlare: lerpColor(window.nightPaletteNew.sunGlare, window.nightPaletteFull.sunGlare, s),
                 sunLight: lerpColor(window.nightPaletteNew.sunLight, window.nightPaletteFull.sunLight, s)
             };
-            // Pull the whole night palette down by 'darkness' (a value
-            // 0..1 toward pure black) so new-moon skies are visibly darker
-            // than day, and full-moon skies still have some colour.
+            // 'light' is moonlight shining ON clouds / stars — keep it
+            // bright. Only sky / bg / bg-adjacent get the new-moon
+            // darkening, and only partially (otherwise new-moon nights
+            // are pitch black with no cloud structure).
             var darkness = 1.0 - (MIN_NIGHT_BRIGHTNESS + (1 - MIN_NIGHT_BRIGHTNESS) * s);
+            var shift = -Math.round(255 * darkness * 0.4);
             return {
-                sky: shiftColor(c.sky, -Math.round(255 * darkness * 0.6)),
-                cloud: shiftColor(c.cloud, -Math.round(255 * darkness * 0.6)),
-                light: shiftColor(c.light, -Math.round(255 * darkness * 0.6)),
-                bg: shiftColor(c.bg, -Math.round(255 * darkness * 0.6)),
-                cloudShadow: c.cloudShadow,
+                sky: shiftColor(c.sky, shift),
+                cloud: c.cloud,                      // keep contrast vs sky
+                light: c.light,                     // moonlight stays bright
+                bg: shiftColor(c.bg, shift),
+                cloudShadow: shiftColor(c.cloudShadow, Math.round(-shift * 0.5)),
                 sun: c.sun,
                 sunGlare: c.sunGlare,
                 sunLight: c.sunLight

background.html

@@ -634,8 +634,8 @@ if (useVanta && typeof VANTA !== 'undefined') {
                 { alt: 0.4, sky: hexToInt(ASH.steel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.bone), bg: hexToInt(ASH.steel), cloudShadow: hexToInt(ASH.steel), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 },
                 { alt: Math.PI / 2, sky: hexToInt(ASH.steelLight), cloud: hexToInt(ASH.border), light: hexToInt(ASH.chalk), bg: hexToInt(ASH.steelLight), cloudShadow: hexToInt(ASH.steelLight), sun: hexToInt(ASH.chalk), sunGlare: hexToInt(ASH.bone), sunLight: hexToInt(ASH.chalk), sunVis: 1 }
             ];
-            window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
-            window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
+            window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.raised), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
+            window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
             window.weatherThemes = {
                 sunny: {
                     skyColor: hexToInt(ASH.steelLight),
@@ -687,8 +687,8 @@ window.sunPalettes = [
         ];
 
         // Night palette based on moon phase (0 = new, 0.5 = full, 1 = new) - Ash colors
-        window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.void), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
-        window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.panel), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
+        window.nightPaletteNew = { sky: hexToInt(ASH.void), cloud: hexToInt(ASH.raised), light: hexToInt(ASH.stone), bg: hexToInt(ASH.void), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.stone), sunGlare: hexToInt(ASH.ash), sunLight: hexToInt(ASH.stone) };
+        window.nightPaletteFull = { sky: hexToInt(ASH.panel), cloud: hexToInt(ASH.border), light: hexToInt(ASH.icon), bg: hexToInt(ASH.panel), cloudShadow: hexToInt(ASH.void), sun: hexToInt(ASH.icon), sunGlare: hexToInt(ASH.mid), sunLight: hexToInt(ASH.icon) };
 
         var MIN_NIGHT_BRIGHTNESS = 0.25; // minimum night brightness (even at new moon)
 
@@ -737,16 +737,18 @@ window.sunPalettes = [
                 sunGlare: lerpColor(window.nightPaletteNew.sunGlare, window.nightPaletteFull.sunGlare, s),
                 sunLight: lerpColor(window.nightPaletteNew.sunLight, window.nightPaletteFull.sunLight, s)
             };
-            // Pull the whole night palette down by 'darkness' (a value
-            // 0..1 toward pure black) so new-moon skies are visibly darker
-            // than day, and full-moon skies still have some colour.
+            // 'light' is moonlight shining ON clouds / stars — keep it
+            // bright. Only sky / bg / bg-adjacent get the new-moon
+            // darkening, and only partially (otherwise new-moon nights
+            // are pitch black with no cloud structure).
             var darkness = 1.0 - (MIN_NIGHT_BRIGHTNESS + (1 - MIN_NIGHT_BRIGHTNESS) * s);
+            var shift = -Math.round(255 * darkness * 0.4);
             return {
-                sky: shiftColor(c.sky, -Math.round(255 * darkness * 0.6)),
-                cloud: shiftColor(c.cloud, -Math.round(255 * darkness * 0.6)),
-                light: shiftColor(c.light, -Math.round(255 * darkness * 0.6)),
-                bg: shiftColor(c.bg, -Math.round(255 * darkness * 0.6)),
-                cloudShadow: c.cloudShadow,
+                sky: shiftColor(c.sky, shift),
+                cloud: c.cloud,                      // keep contrast vs sky
+                light: c.light,                     // moonlight stays bright
+                bg: shiftColor(c.bg, shift),
+                cloudShadow: shiftColor(c.cloudShadow, Math.round(-shift * 0.5)),
                 sun: c.sun,
                 sunGlare: c.sunGlare,
                 sunLight: c.sunLight

vendor/clouds3d.js

@@ -141,12 +141,13 @@ var FRAG_SRC = [
         'float skyT = clamp(rd.y * 0.7 + 0.5, 0.0, 1.0);',
         'vec3 col = mix(uBg, uSky, skyT);',
         // Stars: hash-grid sphere, above horizon, only at night.
-        // Night = sun altitude below 0. Visibility extends well into the
-// lower half of the sky so the airplane-cockpit view shows stars
-// from the horizon up.
+// Night = sun altitude below 0. Visibility extends well into the
+        // lower half of the sky so the airplane-cockpit view shows stars
+        // from the horizon up.
         'float nightFactor = smoothstep(0.05, -0.15, uSunAlt);',
         'float skyMask = smoothstep(-0.10, 0.30, rd.y);',
         'float stars = starField(rd) * skyMask * nightFactor;',
+        // (nightFactor is also used below for the final darken pass.)',
         'col = mix(col, uLight, clamp(stars, 0.0, 1.0) * 0.9);',
         // Density threshold: weather 'sunny' -> high (sparse clouds),
         // 'stormy' -> low (overcast deck).
@@ -169,7 +170,7 @@ var FRAG_SRC = [
                 'float lit = clamp((p.y + 0.3) / 2.1, 0.0, 1.0);',
                 'vec3 cloudCol = mix(uCloudShadow, uCloud, lit);',
                 // Sun tint on the lit side, fades at night
-                'cloudCol = mix(cloudCol, uLight, uDayProgress * 0.35 * lit);',
+                'cloudCol = mix(cloudCol, uLight, max(0.15, uDayProgress) * 0.35 * lit);',
                 'float alpha = clamp(d * stepSize * 0.9, 0.0, 1.0);',
                 'col = mix(col, cloudCol, alpha * trans);',
                 'trans *= (1.0 - alpha);',
@@ -177,8 +178,10 @@ var FRAG_SRC = [
             '}',
             't += stepSize;',
         '}',
-        // Night darkening
-        'col = mix(col, mix(uBg, col, 0.4), (1.0 - uDayProgress) * 0.55);',
+        // Night darkening — driven by sun altitude, not uDayProgress
+        // (uDayProgress is the 0..1 clock progress through 24h, which
+        // is not the same as 'is it night').
+        'col = mix(col, mix(uBg, col, 0.4), nightFactor * 0.45);',
         'gl_FragColor = vec4(col, 1.0);',
     '}'
 ].join('\n');