Implement AOS scroll animations for article cards

footer.php

@@ -53,6 +53,17 @@
 
 <?php wp_footer(); ?>
 
+<script>
+	// Initialize Anime On Scroll globally
+	document.addEventListener('DOMContentLoaded', function () {
+		AOS.init({
+			duration: 800,
+			once: true,
+			offset: 100
+		});
+	});
+</script>
+
 </body>
 
 </html>

functions.php

@@ -40,11 +40,17 @@ function wisdom1_scripts()
 	// Enqueue Bootstrap CSS
 	wp_enqueue_style('bootstrap-style', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css', array(), '5.3.3');
 
+	// Enqueue AOS (Animate On Scroll) CSS
+	wp_enqueue_style('aos-style', 'https://unpkg.com/aos@2.3.1/dist/aos.css', array(), '2.3.1');
+
 	// Enqueue Theme CSS (depends on Bootstrap so it loads after)
 	wp_enqueue_style('wisdom1-style', get_stylesheet_uri(), array('bootstrap-style'), '1.1.0');
 
 	// Enqueue Bootstrap JS Bundle (includes Popper)
 	wp_enqueue_script('bootstrap-script', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js', array(), '5.3.3', true);
+
+	// Enqueue AOS Script
+	wp_enqueue_script('aos-script', 'https://unpkg.com/aos@2.3.1/dist/aos.js', array(), '2.3.1', true);
 }
 add_action('wp_enqueue_scripts', 'wisdom1_scripts');
 

template-parts/content-card.php

@@ -1,4 +1,4 @@
-<div class="col-md-6 col-lg-4 d-flex align-items-stretch">
+<div class="col-md-6 col-lg-4 d-flex align-items-stretch" data-aos="fade-up">
     <article id="post-<?php the_ID(); ?>" <?php post_class('card w-100 border-0 shadow-sm overflow-hidden h-100'); ?>>
         <?php if (has_post_thumbnail()): ?>
             <a href="<?php the_permalink(); ?>">