now showing night shots at appropriate times

app/Http/Controllers/WeatherController.php

@@ -53,10 +53,7 @@ class WeatherController extends Controller
                 'detailedForecast' => $period->detailed_forecast,
             ]);
 
-        $background = $this->getBackgroundForForecast(
-            $currentPeriod?->short_forecast,
-            $currentPeriod?->is_daytime ?? true
-        );
+        $background = $this->getBackgroundForForecast($currentPeriod?->short_forecast);
 
         return Inertia::render('Weather', [
             'current' => $currentPeriod ? [
@@ -87,10 +84,10 @@ class WeatherController extends Controller
     /**
      * @return array{imageUrl: string|null, licenseHtml: string|null}
      */
-    private function getBackgroundForForecast(?string $forecast, bool $isDaytime): array
+    private function getBackgroundForForecast(?string $forecast): array
     {
         $folder = $this->mapForecastToFolder($forecast);
-        $timeOfDay = $isDaytime ? 'day' : 'night';
+        $timeOfDay = $this->isCurrentlyDaytime() ? 'day' : 'night';
         $basePath = storage_path('app/public/backgrounds/'.$folder);
 
         if (! File::isDirectory($basePath)) {
@@ -153,6 +150,16 @@ class WeatherController extends Controller
         };
     }
 
+    private function isCurrentlyDaytime(): bool
+    {
+        $sunriseHour = 6.75;  // 6:45 AM
+        $sunsetHour = 17.5;   // 5:30 PM
+
+        $currentHour = now()->hour + (now()->minute / 60);
+
+        return $currentHour >= $sunriseHour && $currentHour < $sunsetHour;
+    }
+
     private function mapIconToEmoji(?string $forecast): string
     {
         if (! $forecast) {

resources/js/pages/Weather.vue

@@ -104,14 +104,8 @@ const sunPosition = computed(() => {
     const isDaytime = t >= 0 && t <= 1;
 
     if (!isDaytime) {
-        // Nighttime: position sun below horizon
-        // Before sunrise: position on left side below horizon
-        // After sunset: position on right side below horizon
-        if (currentHour < sunriseHour) {
-            return { cx: 20, cy: 85 };
-        } else {
-            return { cx: 180, cy: 85 };
-        }
+        // Nighttime: show moon at top of arc
+        return { cx: 100, cy: 10, isNight: true };
     }
 
     // Quadratic bezier curve: M 10 70 Q 100 -10 190 70
@@ -127,7 +121,7 @@ const sunPosition = computed(() => {
     const cx = oneMinusT * oneMinusT * p0.x + 2 * oneMinusT * t * p1.x + t * t * p2.x;
     const cy = oneMinusT * oneMinusT * p0.y + 2 * oneMinusT * t * p1.y + t * t * p2.y;
 
-    return { cx: Math.round(cx), cy: Math.round(cy) };
+    return { cx: Math.round(cx), cy: Math.round(cy), isNight: false };
 });
 
 const formattedSunrise = computed(() => {
@@ -269,14 +263,23 @@ const formattedSunset = computed(() => {
                                         stroke-width="2"
                                         stroke-dasharray="4 4"
                                     />
-                                    <!-- Sun position indicator -->
+                                    <!-- Sun position indicator (daytime) -->
                                     <circle
+                                        v-if="!sunPosition.isNight"
                                         :cx="sunPosition.cx"
                                         :cy="sunPosition.cy"
                                         r="8"
                                         fill="rgb(250, 204, 21)"
                                         class="drop-shadow-lg transition-all duration-1000"
                                     />
+                                    <!-- Moon indicator (nighttime) -->
+                                    <g v-else :transform="`translate(${sunPosition.cx - 8}, ${sunPosition.cy - 8})`" class="transition-all duration-1000">
+                                        <path
+                                            d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8c1.1 0 2.1-.2 3-.6-1.8-1.1-3-3.1-3-5.4s1.2-4.3 3-5.4C10.1.2 9.1 0 8 0z"
+                                            fill="rgb(226, 232, 240)"
+                                            class="drop-shadow-lg"
+                                        />
+                                    </g>
                                 </svg>
                             </div>
                             <div class="flex justify-between text-xs text-white/40">