let's try this bitch

themes/basspistol2025/layouts/_default/index.html

@@ -34,25 +34,46 @@
 </style>
 <script>
 
-// Only run on mobile
+// Wait for the page to fully load
-if (window.matchMedia("(max-width: 768px)").matches) {
+document.addEventListener('DOMContentLoaded', () => {
-  let scrollTimeout;
+  // Check if mobile AND touch device (dual verification)
+  const isMobile = window.matchMedia("(max-width: 768px)").matches;
+  const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+  if (isMobile && isTouch) {
     const html = document.documentElement;
+    let scrollTimeout;
+    let lastScrollTime = 0;
+
+    // Handle both touch AND scroll for compatibility
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('touchmove', handleScroll, { passive: true });
+
+    function handleScroll() {
+      const now = Date.now();
+
+      // Throttle events to improve performance
+      if (now - lastScrollTime < 50) return; // 50ms throttle
+      lastScrollTime = now;
 
-  window.addEventListener('scroll', () => {
-    // Add color mode
       html.classList.add('color-mode');
-
-    // Reset timeout on scroll
       clearTimeout(scrollTimeout);
 
-    // Revert to grayscale after 1 second of no scrolling
+      // Longer delay for touch momentum (2 seconds)
       scrollTimeout = setTimeout(() => {
         html.classList.remove('color-mode');
-    }, 1000);
+      }, 2000);
-  }, { passive: true }); // Optimized for performance
     }
 
+    // Reset on touch end (for immediate feedback)
+    window.addEventListener('touchend', () => {
+      scrollTimeout = setTimeout(() => {
+        html.classList.remove('color-mode');
+      }, 500); // Shorter delay after touch ends
+    }, { passive: true });
+  }
+});
+
 </script>
 {{ partial "body/now.html" . }}