More realistic sunrise and sunset colours

assets/js/utils.js

@@ -13,7 +13,7 @@
 //    confidenceBand(i)                    day-tab gradient + label
 //    moonPhaseFraction(date)              0..1 synodic phase
 //    moonGlyph(p)                         phase fraction → emoji
-//    skyFillForElev(e)                    solar elevation → sky hex colour
+//    skyGradientForElev(e, isRising)      solar elevation + direction → {top,bot} sky gradient
 //    grassFillForElev(e)                  solar elevation → {top,bot} hex
 // ════════════════════════════════════════════════════════════════════════
 
@@ -212,26 +212,51 @@ export function moonGlyph(p) {
 }
 
 // ═══════════════════════════════════════════════════════════════════
-// SKY FILL — colour inside the little circle, based on sun elevation.
+// SKY GRADIENT — top/bottom colour pair for the SkyScope disk gradient.
 // ───────────────────────────────────────────────────────────────────
-//   > 30°  high noon (bright blue)
-//   > 10°  mid-sky (pale blue)
-//   >  3°  morning/afternoon (warm gold)
-//   > -3°  golden hour / sunset (deep amber)
-//   > -8°  civil twilight (dusky lilac)
-//   > -14° nautical twilight (deep blue-violet)
-//   else   night (indigo)
-// To shift "when sunset starts" visually, tweak the elevation
-// thresholds. To recolour: replace the hex codes.
+// isRising: true when sun is climbing (local hour < 12).
+//
+// Sunrise palette → reds, oranges, yellows at the horizon.
+// Sunset palette  → pinks, purples, mauves at the horizon.
+// Both share the same deep blue zenith at high elevations.
 // ═══════════════════════════════════════════════════════════════════
-export function skyFillForElev(e) {
-  if (e > 30)  return '#9fd3ef';
-  if (e > 10)  return '#c8e3ee';
-  if (e > 3)   return '#ffd596';
-  if (e > -3)  return '#f59b6e';
-  if (e > -8)  return '#9279b0';
-  if (e > -14) return '#3a2f60';
-  return '#1a1538';
+export function skyGradientForElev(e, isRising) {
+  // Full daytime — blue sky, paler toward horizon
+  if (e > 30)  return { top: '#5bb8e8', bot: '#9fd3ef' };
+  if (e > 10)  return { top: '#7cc5ec', bot: '#c8e3ee' };
+
+  // Low sun — golden hour / near-horizon
+  if (e > 3) {
+    return isRising
+      ? { top: '#6aaddb', bot: '#ffb347' }   // sunrise: blue → warm amber/orange
+      : { top: '#7b8fc4', bot: '#ffb877' };  // sunset:  blue-violet → golden
+  }
+
+  // Sun at/just below horizon — the dramatic band
+  if (e > -3) {
+    return isRising
+      ? { top: '#4a7aaa', bot: '#e8622a' }   // sunrise: deep blue → vivid red-orange
+      : { top: '#7a5090', bot: '#e8826a' };  // sunset:  violet → coral/pink
+  }
+
+  // Civil twilight
+  if (e > -8) {
+    return isRising
+      ? { top: '#2a3a6a', bot: '#a04828' }   // pre-dawn: indigo → burnt sienna
+      : { top: '#5a3572', bot: '#c07080' };  // dusk: purple → dusty rose/mauve
+  }
+
+  // Nautical twilight
+  if (e > -14) return { top: '#1e1a50', bot: '#3a2f60' };
+
+  // Night
+  return { top: '#0e0c28', bot: '#1a1538' };
+}
+
+// Convenience flat colour — returns the bot (horizon) colour for contexts
+// that still need a single fill (e.g. moon shadow fill).
+export function skyFillForElev(e, isRising = false) {
+  return skyGradientForElev(e, isRising).bot;
 }
 
 // Grass palette — mirrors skyFillForElev but for the ground.