@keyframes fadeUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .theme-card { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease-out forwards; animation-play-state: paused; } .theme-card.visible { animation-play-state: running; } document.addEventListener('DOMContentLoaded', function () { // Modal functionality function showImg(src, event) { event.preventDefault(); const modal = document.getElementById("imgModal"); document.getElementById("modalImage").src = src; modal.style.display = "block"; } function closeModal() { document.getElementById("imgModal").style.display = "none"; } window.showImg = showImg; window.closeModal = closeModal; // Animation with Intersection Observer const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) entry.target.classList.add("visible"); }); }, { threshold: 0.1 }); document.querySelectorAll('.theme-card').forEach((card) => observer.observe(card)); });