Remove "progressive enhancement" for time of day this is again done by the server

astro.request and http date header ftw

src/Base.astro

···
         h6 {
           text-wrap: balance;
         }
-
-        .hide-till-script {
-          display: none;
-        }
       }
     </style>
   </head>

src/components/blog/Background.astro

···
 import Stars from "./background/Stars.astro";
 import Moon from "./background/Moon.astro";
 import Sun from "./background/Sun.astro";
+
+const date = new Date(Astro.request.headers.get("Date") ?? Date.now());
+const accurateHours =
+  date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 ** 2;
+const daytime = accurateHours > 6 && accurateHours < 18;
 ---
 
 <style is:inline>
···
     }
   }
 
-  #background  *[data-parallax] {
+  #background *[data-parallax] {
     @media (prefers-reduced-motion: no-preference) {
       animation: scroll, 1ms, alternate;
       animation-timeline: scroll();
···
   }
 
   /* time styling */
-  #background:not([data-time]) > :is(#stars, #sun, #moon) {
-    display: none;
-  }
-
   #background[data-time="day"] {
     background-color: dodgerblue;
 
···
   }
 </style>
 
-<script>
-  // progressive enhancement
-  const refresh = () => {
-    const time = new Date(0, 0, 0, 2);
-    const accurateTime =
-      time.getHours() + time.getMinutes() / 60 + time.getSeconds() / 60 ** 2;
-
-    const daytime = accurateTime > 6 && accurateTime < 18;
-    const bg = document.getElementById("background");
-    if (bg === null) throw new Error("no #background");
-    bg.dataset.time = daytime ? "day" : "night";
-
-    if (daytime) {
-      const percent = (accurateTime - 6) / 12;
-      const sun = document.getElementById("sun");
-      if (sun === null) throw new Error("no #sun");
-      sun.style.setProperty("--sun-progress-percent", percent + "");
-    }
-
-    setTimeout(refresh, 5 * 60 * 1000);
-  };
-
-  refresh();
-</script>
-
 <style>
   #background {
     background: dodgerblue;
···
   }
 </style>
 
-<div id="background">
+<div id="background" data-time={daytime ? "day" : "night"}>
   <Clouds />
   <Stars />
-  <Sun />
+  <Sun percent={(accurateHours - 6) / 12} />
   <Moon />
 </div>

src/components/blog/background/Sun.astro

···
 ---
 import { blog } from "@/config";
+
+interface Props {
+  percent: number;
+}
+
+const { percent } = Astro.props;
 ---
 
 <style>
···
     position: absolute;
     border-radius: 100%;
     top: 15rem;
-    left: 5rem;
+    left: calc(100lvw * var(--sun-progress-percent) - 7.5rem);
     z-index: -1;
 
-    transition: left 0.2s ease-in-out;
-    left: calc(100lvw * var(--sun-progress-percent) - 7.5rem);
   }
 </style>
 
···
   id="sun"
   src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/BBSO_full-disk_H-alpha_2002-07-26_153931_color.png/250px-BBSO_full-disk_H-alpha_2002-07-26_153931_color.png"
   alt=""
-  style={`--parallax-speed: ${blog.background.parallax.sun}`}
+  style={`--parallax-speed: ${blog.background.parallax.sun};
+          --sun-progress-percent: ${percent}`}
   data-parallax
 />