From 393b78a0e82459a8d26b3f85da1d56609a359954 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 22 Feb 2026 09:27:29 +0100
Subject: [PATCH] fix: prevent animation flickering and refine post card hover
 state

---
 assets/css/tailwind.css | 12 ++++++++----
 assets/js/main.js       | 20 +++++++++-----------
 partials/post-card.hbs  |  2 +-
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 23c4614..0d1ff39 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -206,6 +206,14 @@
   fill: currentColor;
 }
 
+.post-grid-item {
+  opacity: 0;
+}
+
+.post-grid-item.animated {
+  opacity: 1;
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -216,7 +224,3 @@
 .animate-fadeInUp {
   animation: fadeInUp 0.5s ease-out forwards;
 }
-
-.post-grid-item.animated {
-  opacity: 1;
-}
diff --git a/assets/js/main.js b/assets/js/main.js
index 40676eb..a41b66b 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -20,12 +20,15 @@ document.addEventListener('DOMContentLoaded', () => {
     // Re-run animation and other setup when HTMX settles new content
     // Use document instead of document.body to persist across boosted navigation
     document.addEventListener('htmx:afterSettle', (event) => {
-        // Global page fade-in animation
-        const mainContent = document.getElementById('main-content');
-        if (mainContent) {
-            mainContent.classList.remove('animate-fadeInUp');
-            void mainContent.offsetWidth; // Force reflow to restart animation
-            mainContent.classList.add('animate-fadeInUp');
+        // Global page fade-in animation - only on full boosted navigations
+        if (event.detail.boosted) {
+            const mainContent = document.getElementById('main-content');
+            if (mainContent) {
+                mainContent.classList.remove('animate-fadeInUp');
+                void mainContent.offsetWidth; // Force reflow to restart animation
+                mainContent.classList.add('animate-fadeInUp');
+            }
+            animateGridItems();
         }
 
         // If the settled element is the posts-container or contains grid items
@@ -33,10 +36,5 @@ document.addEventListener('DOMContentLoaded', () => {
         if (target.id === 'posts-container' || target.querySelector('.post-grid-item')) {
             animateGridItems(target);
         }
-
-        // Handle global boost re-animation
-        if (event.detail.boosted) {
-             animateGridItems();
-        }
     });
 });
diff --git a/partials/post-card.hbs b/partials/post-card.hbs
index 80de794..a37ebb0 100644
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@@ -1,4 +1,4 @@
-<article class="post-grid-item opacity-0 h-80">
+<article class="post-grid-item h-80">
     <a href="{{url}}" class="group block h-full relative bg-[var(--bg-secondary)] rounded-xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
         {{#if feature_image}}
             <img