feat: add fallback to run animations on switch

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;