4 files changed, 71 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 4516fad..f2182a6 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -766,6 +766,24 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
     box-shadow: 0 0 18px color-mix(in srgb, var(--type-photo) 10%, transparent);
   }
 
+  /* ---- Timeline lazy-reveal (scroll-triggered) ---- */
+  .js-lazy-timeline > .timeline-item {
+    opacity: 0;
+    transform: translateX(-18px);
+    transition: opacity 320ms ease-out, transform 320ms ease-out;
+  }
+
+  @screen md {
+    .js-lazy-timeline > .timeline-item--right {
+      transform: translateX(18px);
+    }
+  }
+
+  .js-lazy-timeline > .timeline-item.is-visible {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
   /* Header navigation styling */
   .header {
     @apply fixed top-0 left-0 right-0 z-40;
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 000ec85..362d7df 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1900,6 +1900,19 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
 
 /* Photo (pink) */
 
+/* ---- Timeline lazy-reveal (scroll-triggered) ---- */
+
+.js-lazy-timeline > .timeline-item {
+  opacity: 0;
+  transform: translateX(-18px);
+  transition: opacity 320ms ease-out, transform 320ms ease-out;
+}
+
+.js-lazy-timeline > .timeline-item.is-visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
 /* Header navigation styling */
 
 .header {
diff --git a/themes/danix-xyz-hacker/assets/js/article-lazy.js b/themes/danix-xyz-hacker/assets/js/article-lazy.js
new file mode 100644
index 0000000..64ca862
--- /dev/null
+++ b/themes/danix-xyz-hacker/assets/js/article-lazy.js
@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var timeline = document.querySelector('ol.timeline');
+  if (!timeline) return;
+
+  // Progressive enhancement: activates CSS hidden state
+  timeline.classList.add('js-lazy-timeline');
+
+  var items = Array.prototype.slice.call(
+    timeline.querySelectorAll('.timeline-item')
+  );
+
+  function reveal(item) {
+    item.classList.add('is-visible');
+  }
+
+  var observer = new IntersectionObserver(
+    function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          reveal(entry.target);
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    {
+      rootMargin: '-80px 0px 0px 0px',
+      threshold: 0.12,
+    }
+  );
+
+  items.forEach(function (item) {
+    observer.observe(item);
+  });
+});
diff --git a/themes/danix-xyz-hacker/layouts/_default/baseof.html b/themes/danix-xyz-hacker/layouts/_default/baseof.html
index c22e990..fe41f09 100644
--- a/themes/danix-xyz-hacker/layouts/_default/baseof.html
+++ b/themes/danix-xyz-hacker/layouts/_default/baseof.html
@@ -116,5 +116,11 @@
   <!-- Search functionality script -->
   {{ $searchScript := resources.Get "js/search.js" | minify }}
   <script src="{{ $searchScript.RelPermalink }}"></script>
+
+  <!-- Timeline lazy-reveal (scroll-triggered reveal animation) -->
+  {{ if eq .Kind "section" }}
+  {{ $lazyScript := resources.Get "js/article-lazy.js" | minify }}
+  <script src="{{ $lazyScript.RelPermalink }}"></script>
+  {{ end }}
 </body>
 </html>