Add classy scroll animations — staggered reveals, underline titles, counter highlights, card stacks, smooth hero entrance

js/main.js

@@ -160,12 +160,52 @@ function initScrollReveal() {
 
   // Observe all sections for reveal animation
   document.querySelectorAll('.section, .telegram-banner, #newsletter-section').forEach(section => {
-    // Add initial invisible state for smooth reveal
     section.style.opacity = '0';
     section.style.transform = 'translateY(20px)';
     section.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
     observer.observe(section);
   });
+
+  // Observe individual interactive elements for staggered reveals
+  const staggerElements = [
+    '.section-title',
+    '.stat',
+    '.about-card',
+    '.wiki-card-new',
+    '.member-card',
+    '.date-card',
+    '.newsletter-card',
+    '.btn-cta',
+    '.hero-title',
+    '.hero-subtitle'
+  ];
+
+  staggerElements.forEach(selector => {
+    document.querySelectorAll(selector).forEach(el => {
+      el.style.opacity = '0';
+      el.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
+      observer.observe(el);
+    });
+  });
+
+  // Hero elements fade in on load (not scroll)
+  if (window.location.hash === '' || window.location.hash === '#hero') {
+    document.querySelectorAll('.hero-title, .hero-subtitle, .btn-cta').forEach((el, i) => {
+      setTimeout(() => {
+        el.classList.add('visible');
+        el.style.opacity = '';
+        el.style.transform = '';
+      }, 300 + i * 150);
+    });
+    // Also observe hero stats
+    document.querySelectorAll('.stat').forEach((el, i) => {
+      setTimeout(() => {
+        el.classList.add('visible');
+        el.style.opacity = '';
+        el.style.transform = '';
+      }, 400 + i * 100);
+    });
+  }
 }
 
 // ========================================
@@ -655,7 +695,7 @@ function renderWikiCards(data) {
   
   sorted.forEach(item => {
     const card = document.createElement('div');
-    card.className = 'wiki-card-new';
+    card.className = 'wiki-card-new stagger-' + (idx % 4 + 1);
     card.setAttribute('role', 'button');
     card.setAttribute('tabindex', '0');
     
@@ -805,7 +845,7 @@ function renderDates(events) {
   
   sorted.forEach(event => {
     const card = document.createElement('div');
-    card.className = 'date-card';
+    card.className = 'date-card stagger-' + (idx % 4 + 1);
     
     // Parse date/time from ISO string
     const startDate = new Date(event.start);