implement mobile scroll-triggered animations for footer links; adjust background styles in crumple.css and footer-delay.js

Author: zesameri

css/crumple.css

@@ -639,3 +639,17 @@ body:has(.footer__link--home:hover) .crumple:after {
     animation: d 1s .25s linear forwards;
   }
 }
+
+/* Mobile Scroll Test - Trigger animations on scroll */
+@media (hover: none) and (pointer: coarse) {
+  /* Test if animations work by triggering on scroll */
+  body:has(.footer__link--writings) .crumple {
+    background: #020121;
+    z-index: 0;
+  }
+  
+  body:has(.footer__link--writings) .crumple:after {
+    -webkit-animation: e 1s .25s linear forwards;
+    animation: e 1s .25s linear forwards;
+  }
+}

js/footer-delay.js

@@ -199,10 +199,23 @@ function initFooterDelay() {
         if (animationName) {
           // Create a temporary style to trigger the animation
           const style = document.createElement('style');
+          let backgroundStyle = '';
+          
+          // Set background color based on link type
+          if (linkClass.includes('footer__link--writings')) {
+            backgroundStyle = 'background: #020121; z-index: 0;';
+          } else if (linkClass.includes('footer__link--alhambra')) {
+            backgroundStyle = 'background: #020121; z-index: 0;';
+          }
+          
           style.textContent = `
+            .crumple {
+              ${backgroundStyle}
+            }
             .crumple:after {
               -webkit-animation: ${animationName} 1s .25s linear forwards;
               animation: ${animationName} 1s .25s linear forwards;
+              background-color: #222;
             }
           `;
           document.head.appendChild(style);