Enhance product card filtering and animation in Home view

- Added dynamic transition delay for product cards based on visible items to improve animation effects.
- Reset animation state and transition delay for hidden cards to ensure smooth filtering experience.
- Improved overall user interaction with category-based product visibility.

resources/views/home.blade.php

@@ -150,20 +150,32 @@
                 btn.classList.add(...activeClasses);
 
                 // 2. Filter products
+                let visibleIndex = 0;
+                
                 productCards.forEach(card => {
+                    // Reset animation state
+                    card.classList.remove('is-visible');
+                    
                     if (category === 'all' || card.getAttribute('data-category') === category) {
                         card.style.display = 'block';
-                        // Small timeout to allow display:block to apply before re-animating
+                        
+                        // Recalculate transition delay dynamically based on visible items
+                        card.style.transitionDelay = `${(visibleIndex % 4) * 100}ms`;
+                        visibleIndex++;
+                        
+                        // Small timeout to allow browser to register display:block before animating
                         setTimeout(() => {
                             card.classList.add('is-visible');
                         }, 50);
                     } else {
                         card.style.display = 'none';
-                        card.classList.remove('is-visible');
+                        // Reset delay so it doesn't affect future changes
+                        card.style.transitionDelay = '0ms';
                     }
                 });
             });
         });
+        
     });
 </script>
 </x-layouts.app>