// Add smooth scroll behavior document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => { anchor.addEventListener(‘click’, function (e) { e.preventDefault(); document.querySelector(this.getAttribute(‘href’)).scrollIntoView({ behavior: ‘smooth’ }); }); });// Add click animation document.querySelectorAll(‘.category-card’).forEach(card => { card.addEventListener(‘click’, function(e) { // Create ripple effect const ripple = document.createElement(‘div’); ripple.style.position = ‘absolute’; ripple.style.borderRadius = ‘50%’; ripple.style.background = ‘rgba(33, 150, 243, 0.3)’; ripple.style.transform = ‘scale(0)’; ripple.style.animation = ‘ripple 0.6s linear’; ripple.style.left = (e.clientX – card.offsetLeft) + ‘px’; ripple.style.top = (e.clientY – card.offsetTop) + ‘px’; ripple.style.width = ripple.style.height = ’20px’; ripple.style.marginLeft = ripple.style.marginTop = ‘-10px’; card.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); });// Add CSS for ripple animation const style = document.createElement(‘style’); style.textContent = ` @keyframes ripple { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style);// Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: ‘0px 0px -50px 0px’ };const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.animationPlayState = ‘running’; } }); }, observerOptions);document.querySelectorAll(‘.category-card’).forEach(card => { observer.observe(card); });