diff --git a/public/about.html b/public/about.html
index 332c2252..6adc6212 100644
--- a/public/about.html
+++ b/public/about.html
@@ -246,6 +246,9 @@
   <script src="/js/i18n-simple.js?v=1760818106"></script>
   <script src="/js/components/language-selector.js?v=1760818106"></script>
 
+  <!-- Scroll Animations (Phase 3) -->
+  <script src="/js/scroll-animations.js"></script>
+
   <!-- Footer Component -->
   <script src="/js/components/footer.js"></script>
 
diff --git a/public/architecture.html b/public/architecture.html
index 9bc9bf24..8253ad60 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -463,7 +463,10 @@
   </main>
 
   <!-- Footer -->
-    <!-- Footer Component -->
+  <!-- Scroll Animations (Phase 3) -->
+  <script src="/js/scroll-animations.js"></script>
+
+  <!-- Footer Component -->
   <script src="/js/components/footer.js"></script>
 
 </body>
diff --git a/public/implementer.html b/public/implementer.html
index 24bce1ab..9c27ab2f 100644
--- a/public/implementer.html
+++ b/public/implementer.html
@@ -745,6 +745,9 @@ if (pressure.level === 'CRITICAL') {
   <script src="/js/i18n-simple.js?v=1760818106"></script>
   <script src="/js/components/language-selector.js?v=1760818106"></script>
 
+  <!-- Scroll Animations (Phase 3) -->
+  <script src="/js/scroll-animations.js"></script>
+
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js"></script>
 
diff --git a/public/leader.html b/public/leader.html
index d6e50343..3bba3a16 100644
--- a/public/leader.html
+++ b/public/leader.html
@@ -598,6 +598,9 @@
   <script src="/js/i18n-simple.js?v=1760818106"></script>
   <script src="/js/components/language-selector.js?v=1760818106"></script>
 
+  <!-- Scroll Animations (Phase 3) -->
+  <script src="/js/scroll-animations.js"></script>
+
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js?v=0.1.0.1760680958072"></script>
   <script src="/js/leader-page.js?v=0.1.0.1760680958072"></script>
diff --git a/public/researcher.html b/public/researcher.html
index 06fb4400..68db939c 100644
--- a/public/researcher.html
+++ b/public/researcher.html
@@ -76,10 +76,10 @@
   <div id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
 
     <!-- Research Context -->
-    <section class="mb-16">
+    <section class="mb-16 animate-on-scroll" data-animation="fade-in">
       <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.research_context.heading">Research Context & Scope</h2>
 
-      <div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
+      <div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6 animate-on-scroll" data-animation="slide-up" data-stagger="100">
         <p class="text-sm text-amber-900 font-medium mb-2" data-i18n="sections.research_context.development_note">Development Context</p>
         <p class="text-sm text-amber-800" data-i18n="sections.research_context.development_text">
           Tractatus was developed over six months (April–October 2025) in progressive stages that evolved into a live demonstration of its capabilities in the form of a single-project context (https://agenticgovernance.digital). Observations derive from direct engagement with Claude Code (Anthropic's Sonnet 4.5 model) across approximately 500 development sessions. This is exploratory research, not controlled study.
@@ -97,11 +97,11 @@
     </section>
 
     <!-- Theoretical Foundations (Accordion) -->
-    <section class="mb-16">
+    <section class="mb-16 animate-on-scroll" data-animation="fade-in">
       <h2 class="text-2xl font-bold text-gray-900 mb-6" data-i18n="sections.theoretical_foundations.heading">Theoretical Foundations</h2>
 
       <!-- Organisational Theory -->
-      <div class="border-l-4 border border-gray-200 rounded-lg mb-4 border-l-service-validator">
+      <div class="border-l-4 border border-gray-200 rounded-lg mb-4 border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="100">
         <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="org-theory">
           <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.org_theory_title">Organisational Theory Basis</h3>
           <svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -150,7 +150,7 @@
       </div>
 
       <!-- Values Pluralism -->
-      <div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator">
+      <div class="border-l-4 border border-gray-200 rounded-lg border-l-service-validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
         <div class="accordion-button bg-white p-5 flex justify-between items-center hover:bg-purple-50 transition-colors duration-200" data-accordion="values">
           <h3 class="font-semibold text-gray-900 group-hover:text-[#8b5cf6] transition-colors" data-i18n="sections.theoretical_foundations.values_pluralism_title">Values Pluralism & Moral Philosophy</h3>
           <svg id="values-icon" class="accordion-icon w-5 h-5 text-purple-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -513,6 +513,9 @@
   <script src="/js/i18n-simple.js?v=1760818106"></script>
   <script src="/js/components/language-selector.js?v=1760818106"></script>
 
+  <!-- Scroll Animations (Phase 3) -->
+  <script src="/js/scroll-animations.js"></script>
+
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js"></script>
   <script src="/js/researcher-page.js"></script>