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

css/styles.css

@@ -71,6 +71,77 @@
   to { width: 200px; height: 200px; opacity: 0; }
 }
 
+/* ========================================
+   CLASSY SCROLL ANIMATIONS — Premium Motion Design
+   ======================================== */
+
+/* Parallax-style subtle depth shift */
+@keyframes depthShift {
+  0% { transform: translateZ(0px) scale(1); }
+  100% { transform: translateZ(20px) scale(1.01); }
+}
+
+/* Smooth scale entry */
+@keyframes scaleEntry {
+  from { opacity: 0; transform: scale(0.92) translateY(30px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* Subtle glow pulse */
+@keyframes glowPulse {
+  0%, 100% { box-shadow: 0 2px 8px rgba(24, 119, 242, 0.08); }
+  50% { box-shadow: 0 4px 20px rgba(24, 119, 242, 0.15); }
+}
+
+/* Smooth counter highlight */
+@keyframes counterHighlight {
+  0% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(24, 119, 242, 0); }
+  25% { transform: scale(1.12); color: #fff; text-shadow: 0 0 20px rgba(24, 119, 242, 0.4); }
+  50% { transform: scale(0.97); }
+  100% { transform: scale(1); color: #fff; text-shadow: 0 0 0 rgba(24, 119, 242, 0); }
+}
+
+/* Smooth reveal from sides */
+@keyframes revealLeft {
+  from { opacity: 0; transform: translateX(-40px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes revealRight {
+  from { opacity: 0; transform: translateX(40px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+/* Smooth divider line animation */
+@keyframes lineExpand {
+  from { width: 0; }
+  to { width: 60px; }
+}
+
+/* Smooth badge entrance */
+@keyframes badgeDrop {
+  from { opacity: 0; transform: translateY(-10px) scale(0.9); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* Smooth card stack entrance */
+@keyframes cardStack {
+  from { opacity: 0; transform: translateY(40px) rotateX(8deg); }
+  to { opacity: 1; transform: translateY(0) rotateX(0deg); }
+}
+
+/* Smooth text underline reveal */
+@keyframes underlineReveal {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+/* Smooth progress indicator */
+@keyframes progressFill {
+  from { width: 0%; }
+  to { width: var(--progress); }
+}
+
 /* Scroll reveal visible state */
 .fade-in-section.visible,
 .section.visible {
@@ -94,13 +165,174 @@
 .stagger-3 { animation-delay: 0.24s !important; }
 .stagger-4 { animation-delay: 0.32s !important; }
 
-/* Scroll reveal base state */
+/* Scroll reveal base state — elegant entrance */
 .fade-in-section {
-  opacity: 1;
+  opacity: 0;
-  transform: none;
+  transform: translateY(30px);
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Scroll reveal visible — premium motion */
+.fade-in-section.visible,
+.section.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  animation: scaleEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Section titles — slide in with underline */
+.section-title {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
+              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
+}
+.section-title.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  position: relative;
+}
+.section-title.visible::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #1877f2, #42b0ff);
+  border-radius: 2px;
+  animation: lineExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
+}
+
+/* Hero stats — staggered counter entry */
+.stat {
+  opacity: 0;
+  transform: translateY(15px);
   transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
+.stat.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+.stat.visible .stat-number {
+  animation: counterHighlight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* About cards — staggered stack */
+.about-card {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.about-card.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  animation: cardStack 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Wiki cards — staggered entrance */
+.wiki-card-new {
+  opacity: 0;
+  transform: translateY(25px);
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.wiki-card-new.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Member cards — staggered entrance */
+.member-card {
+  opacity: 0;
+  transform: translateY(25px);
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.member-card.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Date cards — staggered entrance */
+.date-card {
+  opacity: 0;
+  transform: translateY(25px);
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.date-card.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  animation: cardStack 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Newsletter card — elegant scale */
+.newsletter-card {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.newsletter-card.visible {
+  opacity: 1 !important;
+  transform: scale(1) !important;
+  animation: scaleEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Hero CTA — smooth entrance */
+.btn-cta {
+  opacity: 0;
+  transform: translateY(15px);
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
+              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
+}
+.btn-cta.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+
+/* Hero title — smooth reveal */
+.hero-title {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
+}
+.hero-title.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+
+/* Hero subtitle — smooth reveal */
+.hero-subtitle {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s,
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
+}
+.hero-subtitle.visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+
+/* About card staggered delays */
+.about-card.stagger-1 { transition-delay: 0s !important; }
+.about-card.stagger-2 { transition-delay: 0.1s !important; }
+.about-card.stagger-3 { transition-delay: 0.2s !important; }
+.about-card.stagger-4 { transition-delay: 0.3s !important; }
+
+/* Wiki card staggered delays */
+.wiki-card-new.stagger-1 { transition-delay: 0s !important; }
+.wiki-card-new.stagger-2 { transition-delay: 0.08s !important; }
+.wiki-card-new.stagger-3 { transition-delay: 0.16s !important; }
+.wiki-card-new.stagger-4 { transition-delay: 0.24s !important; }
 
 /* ========================================
    BASE

index.html

@@ -301,7 +301,7 @@
           <span class="hide-en">About the Community</span>
         </h2>
         <div class="about-grid">
-          <div class="about-card" data-image="banking">
+          <div class="about-card stagger-1" data-image="banking">
             <img src="https://images.unsplash.com/photo-1601597111158-2fceff292cdc?w=400&h=250&fit=crop&q=80" alt="Banking" class="about-image" />
             <h3>
               <span class="hide-de">Banken & Zahlungsverkehr</span>
@@ -312,7 +312,7 @@
               <span class="hide-en">Experiences with Paraguayan and international banks, accounts, transfers and credit cards.</span>
             </p>
           </div>
-          <div class="about-card" data-image="legal">
+          <div class="about-card stagger-2" data-image="legal">
             <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=400&h=250&fit=crop&q=80" alt="Legal" class="about-image" />
             <h3>
               <span class="hide-de">Rechtliches</span>
@@ -323,7 +323,7 @@
               <span class="hide-en">Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay.</span>
             </p>
           </div>
-          <div class="about-card" data-image="taxes">
+          <div class="about-card stagger-3" data-image="taxes">
             <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop&q=80" alt="Taxes" class="about-image" />
             <h3>
               <span class="hide-de">Steuern & Buchhaltung</span>

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);