From 3caa9a3cf2525e7f2280831dea33e32718a6134a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 22 Feb 2026 08:28:46 +0100
Subject: [PATCH] style: enhance post card hover effects with card lift and
 animated details

---
 partials/post-card.hbs | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/partials/post-card.hbs b/partials/post-card.hbs
index 267c2ed..3b85683 100644
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@@ -1,8 +1,8 @@
-<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group h-80">
+<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-xl shadow-lg overflow-hidden group h-80 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 hover:ring-2 hover:ring-[var(--brand-primary)]/50">
     <a href="{{url}}" class="block h-full relative">
         {{#if feature_image}}
             <img
-                class="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110"
+                class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
                 src="{{img_url feature_image size="m"}}"
                 srcset="{{img_url feature_image size="s"}} 400w,
                         {{img_url feature_image size="m"}} 600w,
@@ -13,22 +13,27 @@
                 loading="lazy"
             >
         {{else}}
-            <div class="w-full h-full flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
+            <div class="w-full h-full flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl transition-colors duration-500 group-hover:bg-[var(--bg-secondary)]">No Image</div>
         {{/if}}
 
         {{!-- Gradient Overlay --}}
-        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300"></div>
+        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-70 group-hover:opacity-80 transition-opacity duration-500"></div>
 
         {{!-- Content Overlay --}}
-        <div class="absolute inset-0 p-6 flex flex-col justify-end transform transition-transform duration-300 group-hover:translate-y-[-4px]">
-            {{#if primary_tag}}
-                <span class="text-[var(--brand-primary)] text-xs uppercase tracking-widest font-bold mb-2 block">
-                    {{primary_tag.name}}
-                </span>
-            {{/if}}
-            <h2 class="text-white text-xl md:text-2xl font-bold leading-tight line-clamp-2">
-                {{title}}
-            </h2>
+        <div class="absolute inset-0 p-8 flex flex-col justify-end">
+            <div class="overflow-hidden">
+                {{#if primary_tag}}
+                    <span class="text-[var(--brand-primary)] text-xs uppercase tracking-[0.2em] font-bold mb-3 block transform transition-transform duration-500 translate-y-4 group-hover:translate-y-0">
+                        {{primary_tag.name}}
+                    </span>
+                {{/if}}
+                <h2 class="text-white text-xl md:text-2xl font-bold leading-tight line-clamp-2 transform transition-transform duration-500 delay-75 translate-y-2 group-hover:translate-y-0">
+                    {{title}}
+                </h2>
+                
+                {{!-- Decorative line that expands on hover --}}
+                <div class="w-0 h-1 bg-[var(--brand-primary)] mt-4 transition-all duration-500 ease-out group-hover:w-16"></div>
+            </div>
         </div>
     </a>
 </article>