feat: add fallback to run animations on switch

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">
+  <div class="smooth-reveal flex flex-wrap justify-center gap-4 lg:gap-6">
-    Sorry, {error.toLowerCase()}
+    <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">

src/layouts/BaseLayout.astro

@@ -113,6 +113,24 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   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();
@@ -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;