feat: layer the nightdrive sky and atmosphere

src/styles/world.css

@@ -29,23 +29,83 @@
   object-fit: cover;
   background:
     radial-gradient(
-      circle at 50% 53%,
-      rgb(247 105 115 / 82%) 0 7%,
-      transparent 7.3%
+      ellipse at 42% 89%,
+      rgb(255 45 85 / 72%) 0 0.65%,
+      rgb(255 45 85 / 20%) 0.9% 2.6%,
+      transparent 4.8%
+    ),
+    radial-gradient(
+      ellipse at 58% 89%,
+      rgb(255 45 85 / 72%) 0 0.65%,
+      rgb(255 45 85 / 20%) 0.9% 2.6%,
+      transparent 4.8%
+    ),
+    linear-gradient(
+      166deg,
+      transparent 0 67%,
+      rgb(12 21 31 / 98%) 67.2% 76%,
+      transparent 76.2%
+    ),
+    linear-gradient(
+      194deg,
+      transparent 0 67%,
+      rgb(12 21 31 / 98%) 67.2% 76%,
+      transparent 76.2%
+    ),
+    radial-gradient(
+      ellipse at 50% 91%,
+      rgb(5 9 15 / 100%) 0 13%,
+      transparent 13.4%
+    ),
+    radial-gradient(
+      ellipse at 50% 55.8%,
+      transparent 0 4.8%,
+      rgb(4 8 20 / 88%) 5% 5.35%,
+      transparent 5.55%
+    ),
+    radial-gradient(
+      ellipse at 50% 54.6%,
+      rgb(244 173 103 / 92%) 0 6.7%,
+      rgb(199 75 145 / 65%) 7.1% 9.8%,
+      transparent 14%
+    ),
+    repeating-linear-gradient(
+      0deg,
+      transparent 0 5.2%,
+      rgb(4 8 20 / 88%) 5.3% 5.65%,
+      transparent 5.75% 7.2%
     ),
     linear-gradient(
       165deg,
-      transparent 0 60%,
-      rgb(73 198 215 / 34%) 60.2% 60.5%,
-      transparent 60.7%
+      transparent 0 55%,
+      rgb(120 216 229 / 54%) 55.12% 55.32%,
+      transparent 55.5%
     ),
     linear-gradient(
       195deg,
-      transparent 0 60%,
-      rgb(73 198 215 / 34%) 60.2% 60.5%,
-      transparent 60.7%
+      transparent 0 55%,
+      rgb(120 216 229 / 54%) 55.12% 55.32%,
+      transparent 55.5%
     ),
-    linear-gradient(180deg, #050817 0 48%, #24142c 67%, #080c17 100%);
+    conic-gradient(
+      from 167deg at 50% 55%,
+      rgb(5 9 17 / 96%) 0 12deg,
+      transparent 12.4deg 335.6deg,
+      rgb(5 9 17 / 96%) 336deg 360deg
+    ),
+    repeating-linear-gradient(
+      0deg,
+      transparent 0 6.5%,
+      rgb(73 198 215 / 14%) 6.65% 6.8%,
+      transparent 6.95% 9.5%
+    ),
+    radial-gradient(
+      ellipse at 50% 62%,
+      rgb(131 41 109 / 42%) 0,
+      transparent 48%
+    ),
+    linear-gradient(180deg, #030713 0 38%, #0c1025 54%, #26162e 69%, #050a14 100%);
+  background-size: cover;
 }
 
 .journey-canvas {
@@ -276,13 +336,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .journey-poster {
-    background:
-      radial-gradient(
-        circle at 50% 53%,
-        rgb(247 105 115 / 48%) 0 7%,
-        transparent 7.3%
-      ),
-      linear-gradient(180deg, #050817 0 48%, #24142c 67%, #080c17 100%);
+    filter: saturate(0.86) brightness(0.92);
   }
 }