fix

src/App.jsx

@@ -2205,8 +2205,10 @@ function PixelMountains() {
   )
   const [previousTheme, setPreviousTheme] = useState(null)
   const [skyTransition, setSkyTransition] = useState('')
+  const [skyPaths, setSkyPaths] = useState({})
   const activeCanvasRef = useRef(null)
   const previousCanvasRef = useRef(null)
+  const skyRef = useRef(null)
   const fadeTimerRef = useRef(null)
   const skyTimerRef = useRef(null)
 
@@ -2254,9 +2256,39 @@ function PixelMountains() {
     }
   }, [])
 
+  useEffect(() => {
+    function quadraticPath(start, control, end) {
+      return `path("M ${start.x.toFixed(1)} ${start.y.toFixed(1)} Q ${control.x.toFixed(1)} ${control.y.toFixed(1)} ${end.x.toFixed(1)} ${end.y.toFixed(1)}")`
+    }
+
+    function updateSkyPaths() {
+      const rect = skyRef.current?.getBoundingClientRect()
+      const width = rect?.width || window.innerWidth || 1920
+      const height = rect?.height || window.innerHeight || 900
+      const display = { x: width * 0.78, y: height * 0.18 }
+      const westSet = { x: width * 0.08, y: height * 0.67 }
+      const eastRise = { x: width * 0.94, y: height * 0.67 }
+      const westControl = { x: width * 0.46, y: height * -0.05 }
+      const eastControl = { x: width * 0.98, y: height * -0.03 }
+
+      setSkyPaths({
+        '--celestial-exit-path': quadraticPath(display, westControl, westSet),
+        '--celestial-enter-path': quadraticPath(eastRise, eastControl, display),
+      })
+    }
+
+    updateSkyPaths()
+    window.addEventListener('resize', updateSkyPaths)
+    return () => window.removeEventListener('resize', updateSkyPaths)
+  }, [])
+
   return (
     <div className="pixel-mountains" aria-hidden="true">
-      <div className={`pixel-sky pixel-sky-${skyTransition || activeTheme}`}>
+      <div
+        className={`pixel-sky pixel-sky-${skyTransition || activeTheme}`}
+        ref={skyRef}
+        style={skyPaths}
+      >
         <span className="pixel-sun" />
         <span className="pixel-moon">
           <span className="pixel-star pixel-star-a" />

src/styles.css

@@ -397,19 +397,43 @@ h3 {
 }
 
 .pixel-sky-light-to-dark .pixel-sun {
-  animation: sunSetWest 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  animation: celestialPathExit 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  left: 0;
+  offset-anchor: center;
+  offset-path: var(--celestial-exit-path);
+  offset-rotate: 0deg;
+  top: 0;
+  transform: none;
 }
 
 .pixel-sky-light-to-dark .pixel-moon {
-  animation: moonRiseEast 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation: celestialPathEnter 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  left: 0;
+  offset-anchor: center;
+  offset-path: var(--celestial-enter-path);
+  offset-rotate: 0deg;
+  top: 0;
+  transform: none;
 }
 
 .pixel-sky-dark-to-light .pixel-moon {
-  animation: moonSetWest 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  animation: celestialPathExit 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  left: 0;
+  offset-anchor: center;
+  offset-path: var(--celestial-exit-path);
+  offset-rotate: 0deg;
+  top: 0;
+  transform: none;
 }
 
 .pixel-sky-dark-to-light .pixel-sun {
-  animation: sunRiseEast 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation: celestialPathEnter 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  left: 0;
+  offset-anchor: center;
+  offset-path: var(--celestial-enter-path);
+  offset-rotate: 0deg;
+  top: 0;
+  transform: none;
 }
 
 :root[data-theme="dark"] .pixel-mountains {
@@ -502,82 +526,26 @@ h3 {
   }
 }
 
-@keyframes sunSetWest {
+@keyframes celestialPathExit {
   0% {
-    left: 78%;
+    offset-distance: 0%;
     opacity: 1;
-    top: 18%;
-  }
-
-  42% {
-    left: 48%;
-    opacity: 0.85;
-    top: 9%;
   }
 
   100% {
-    left: 12%;
+    offset-distance: 100%;
     opacity: 0;
-    top: 68%;
   }
 }
 
-@keyframes moonRiseEast {
+@keyframes celestialPathEnter {
   0% {
-    left: 93%;
+    offset-distance: 0%;
     opacity: 0;
-    top: 68%;
-  }
-
-  55% {
-    left: 86%;
-    opacity: 0.86;
-    top: 8%;
   }
 
   100% {
-    left: 78%;
+    offset-distance: 100%;
     opacity: 1;
-    top: 18%;
-  }
-}
-
-@keyframes moonSetWest {
-  0% {
-    left: 78%;
-    opacity: 1;
-    top: 18%;
-  }
-
-  42% {
-    left: 48%;
-    opacity: 0.85;
-    top: 9%;
-  }
-
-  100% {
-    left: 12%;
-    opacity: 0;
-    top: 68%;
-  }
-}
-
-@keyframes sunRiseEast {
-  0% {
-    left: 93%;
-    opacity: 0;
-    top: 68%;
-  }
-
-  55% {
-    left: 86%;
-    opacity: 0.86;
-    top: 8%;
-  }
-
-  100% {
-    left: 78%;
-    opacity: 1;
-    top: 18%;
   }
 }