function filterClients(category) { const cards = document.querySelectorAll('.client-card'); const buttons = document.querySelectorAll('.filter-btn'); // Update active button buttons.forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); // Filter cards with animation cards.forEach((card, index) => { if (category === 'all') { setTimeout(() => { card.style.display = 'block'; setTimeout(() => card.style.opacity = '1', 10); }, index * 50); } else { const cardCategory = card.getAttribute('data-category'); if (cardCategory === category) { setTimeout(() => { card.style.display = 'block'; setTimeout(() => card.style.opacity = '1', 10); }, index * 50); } else { card.style.opacity = '0'; setTimeout(() => card.style.display = 'none', 300); } } }); } // Add fade-in animation on scroll const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); document.querySelectorAll('.client-card').forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; observer.observe(card); });