feat: Add CSS animations and image lightbox

assets/js/main.js

@@ -2,6 +2,42 @@
 document.addEventListener('DOMContentLoaded', () => {
     console.log('Palina theme loaded!');
 
-    // Add any interactive JavaScript here
-    // For example, a simple image modal or lazy loading
+    // Staggered fade-in animation for post grid
+    const gridItems = document.querySelectorAll('.post-grid-item');
+    gridItems.forEach((item, index) => {
+        item.style.animationDelay = `${index * 100}ms`;
+        item.classList.add('animate-fadeInUp');
+    });
+
+    // Lightbox for post images
+    const lightbox = document.getElementById('lightbox');
+    if (lightbox) {
+        const lightboxImage = document.getElementById('lightbox-image');
+        const lightboxClose = document.getElementById('lightbox-close');
+
+        const images = document.querySelectorAll('.kg-image-card img, .post-content img');
+
+        images.forEach(image => {
+            image.style.cursor = 'pointer';
+            image.addEventListener('click', () => {
+                lightbox.classList.remove('hidden');
+                lightbox.classList.add('show');
+                lightboxImage.src = image.src;
+            });
+        });
+
+        lightboxClose.addEventListener('click', () => {
+            lightbox.classList.add('hidden');
+            lightbox.classList.remove('show');
+            lightboxImage.src = '';
+        });
+
+        lightbox.addEventListener('click', (e) => {
+            if (e.target.id !== 'lightbox-image') {
+                lightbox.classList.add('hidden');
+                lightbox.classList.remove('show');
+                lightboxImage.src = '';
+            }
+        });
+    }
 });