From 954112e30e1ce912ca7098455555f675a49f9841 Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Sun, 15 Mar 2026 23:50:04 -0500
Subject: [PATCH] feat: add fallback to run animations on switch

---
 src/components/sections/WeatherSection.astro |  8 ++++--
 src/layouts/BaseLayout.astro                 | 27 +++++++++++++++++---
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/sections/WeatherSection.astro b/src/components/sections/WeatherSection.astro
index 6674540..8d6a46c 100644
--- a/src/components/sections/WeatherSection.astro
+++ b/src/components/sections/WeatherSection.astro
@@ -19,8 +19,12 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
     </div>
   </div>
   {error ? (
-  <div class="card-base p-10 text-accent text-center">
-    Sorry, {error.toLowerCase()}
+  <div class="smooth-reveal flex flex-wrap justify-center gap-4 lg:gap-6">
+    <div class="card-base flex flex-col justify-center items-center p-10 w-48 h-56">
+      <h1 class="card-text-header block text-accent text-center">
+        Sorry, {error.toLowerCase()}
+      </h1>
+    </div>
   </div>
   ) : (
   <div class="flex flex-wrap justify-center gap-4 lg:gap-6">
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index dae7e92..585bbb9 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -93,7 +93,7 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
 
         <!-- Footer -->
         <Footer />
-        
+
       </main>
     </div>
 
@@ -103,16 +103,34 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
 <script>
   import { initPhotoSwipe } from '@/scripts/photoswipe';
   import { animateContent } from '@/scripts/animations';
-  
+
   const resetScroll = () => {
     const scrollContainer = document.getElementById('reset-scroll');
     if (scrollContainer) scrollContainer.scrollTop = 0;
   };
-  
+
   resetScroll();
   initPhotoSwipe();
   animateContent();
 
+  const observer = new MutationObserver((mutations) => {
+    const hasNewNodes = mutations.some(
+      (mutation) => mutation.type === 'childList' && mutation.addedNodes.length > 0
+    );
+
+    if (hasNewNodes) {
+      animateContent();
+      if (typeof (window as any).HSStaticMethods !== 'undefined') {
+        (window as any).HSStaticMethods.autoInit();
+      }
+    }
+  });
+
+  const targetNode = document.getElementById('reset-scroll');
+  if (targetNode) {
+    observer.observe(targetNode, { childList: true, subtree: true });
+  }
+
   document.addEventListener('swup:page:view', () => {
     resetScroll();
     initPhotoSwipe();
@@ -121,7 +139,7 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       (window as any).HSStaticMethods.autoInit();
     }
     if (typeof (window as any).rybbit === 'function') {
-      (window as any).rybbit('trackPageview'); 
+      (window as any).rybbit('trackPageview');
     }
   });
 </script>
@@ -152,6 +170,7 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   /* Background that creates the "glimmer" effect */
   .bg {
     animation: slide 25s ease-in-out infinite alternate;
+    will-change: transform;
     background-image: linear-gradient(-55deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
     filter: blur(40px);
     top: 0;