From 4752eec5d015307253b7f4ba211bb8995ed50eab Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.com>
Date: Fri, 13 Mar 2026 12:05:33 -0400
Subject: [PATCH] Implement AOS scroll animations for article cards

---
 footer.php                      | 11 +++++++++++
 functions.php                   |  6 ++++++
 template-parts/content-card.php |  2 +-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/footer.php b/footer.php
index c51b496..f1a236b 100644
--- a/footer.php
+++ b/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>
\ No newline at end of file
diff --git a/functions.php b/functions.php
index b8fdbe2..c5c2a88 100644
--- a/functions.php
+++ b/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');
 
diff --git a/template-parts/content-card.php b/template-parts/content-card.php
index 68e33ab..5f0bb7d 100644
--- a/template-parts/content-card.php
+++ b/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(); ?>">