From c4a9c365cc91843efe8301e883970070909add40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 10 Jan 2026 18:34:36 +0100
Subject: [PATCH] fix: track card hover

---
 layouts/partials/track-card.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/layouts/partials/track-card.html b/layouts/partials/track-card.html
index c683e1a..ef4a9fd 100755
--- a/layouts/partials/track-card.html
+++ b/layouts/partials/track-card.html
@@ -1,5 +1,12 @@
 {{/* Track Card Component */}}
-<article class="track-card rounded-lg overflow-hidden group grayscale hover:grayscale-0">
+{{- $hasVideo := .Resources.GetMatch "preview.*" -}}
+<article
+  class="track-card rounded-lg overflow-hidden group transition-all duration-300"
+  :class="hovering ? '' : 'grayscale'"
+  x-data="{ hovering: false }"
+  @mouseenter="hovering = true; $refs.video?.play().catch(() => {})"
+  @mouseleave="hovering = false; if ($refs.video) { $refs.video.pause(); $refs.video.currentTime = 0; }"
+>
   {{/* Cover Image/Video */}}
   <a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
     {{- with .Resources.GetMatch "cover.*" }}
@@ -7,7 +14,8 @@
       <img
         src="{{ $img.RelPermalink }}"
         alt="{{ $.Title }}"
-        class="track-card__cover w-full h-full"
+        class="track-card__cover w-full h-full object-cover"
+        :class="{ 'opacity-0': hovering && $refs.video }"
         loading="lazy"
         decoding="async"
       >
@@ -22,18 +30,19 @@
     {{/* Video preview on hover */}}
     {{- with .Resources.GetMatch "preview.*" }}
     <video
+      x-ref="video"
       src="{{ .RelPermalink }}"
-      class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+      class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
+      :class="hovering ? 'opacity-100' : 'opacity-0'"
       muted
       loop
       playsinline
-      onmouseenter="this.play()"
-      onmouseleave="this.pause(); this.currentTime=0;"
+      preload="metadata"
     ></video>
     {{- end }}
 
-    {{/* Play overlay - hide if video exists */}}
-    {{- if not (.Resources.GetMatch "preview.*") }}
+    {{/* Play overlay - only show if NO video exists */}}
+    {{- if not $hasVideo }}
     <div class="absolute inset-0 bg-surface-0/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
       <div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform">
         <svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">