Add moon as SVG and adjust parallax speed for star/parallax behaviour

TODO: svgify everything, make moon react, randomise/tweeak parallax of star based on size/whatever

src/components/blog/Background.astro

···
     }
   }
 
-  #background > * {
+  #background  *[data-parallax] {
     @media (prefers-reduced-motion: no-preference) {
-      animation-name: scroll;
-      animation-duration: 1ms;
-      animation-direction: alternate;
+      animation: scroll, 1ms, alternate;
       animation-timeline: scroll();
     }
   }
···
 <script>
   // progressive enhancement
   const refresh = () => {
-    const time = new Date();
+    const time = new Date(0, 0, 0, 2);
     const accurateTime =
       time.getHours() + time.getMinutes() / 60 + time.getSeconds() / 60 ** 2;
 

src/components/blog/background/Clouds.astro

···
             height: ${height}rem;
             top: ${y}rem;
             left: calc(${x} * 200lvw - 100lvw);`}
+              data-parallax
             />,
           ],
         };

src/components/blog/background/Moon.astro

···
 ---
 import { blog } from "@/config";
-import { Moon as LunarPhase } from "lunarphase-js";
+import { Moon as LunarPhaseJS } from "lunarphase-js";
 
 // sorry south hemisphere, theres fuck all i can do without getting ur location which is weird </3
-const moon = LunarPhase.lunarPhaseEmoji();
 ---
 
 <style>
-  div {
+  svg {
     width: 20rem;
     height: 20rem;
     font-size: 20rem;
 
     position: absolute;
     top: 30rem;
-    right: 15rem;
+    right: 1rem;
   }
 </style>
 
-<div id="moon" style={`--parallax-speed: ${blog.background.parallax.moon}`}>
-  {moon}
-</div>
+<svg
+  id="moon"
+  width="100"
+  height="100"
+  style={`--parallax-speed: ${blog.background.parallax.moon};
+          --phase: ${LunarPhaseJS.lunarAgePercent()};`}
+  data-parallax
+>
+  <defs>
+    <clipPath id="shadow">
+      <rect x="50" y="0" width="50" height="100"></rect>
+    </clipPath>
+  </defs>
+
+  <circle style="fill:#ffffff" cx="50" cy="50" r="50"></circle>
+  <circle style="fill:#000000" cx="50" cy="50" r="50" clip-path="url(#shadow)"
+  ></circle>
+  <ellipse style="fill:#000000" cx="50" cy="50" rx="25" ry="50"></ellipse>
+</svg>

src/components/blog/background/Stars.astro

···
                 --size: ${blog.background.stars.size[0] + Math.random() * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem;
                 --x: ${Math.random()};
                 --y: ${Math.random()}`}
+                  data-parallax
+
       />
     ))
   }

src/components/blog/background/Sun.astro

···
   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}`}
+  data-parallax
 />

src/config.ts

···
       clouds: 50,
       sun: 10,
       moon: 20,
-      star: 40,
+      star: 5,
     },
     clouds: {
       count: 8,
···
     stars: {
       count: 40,
       size: [2, 5],
-    },
+    }
   },
 };