feat: sync track cover hover effect with playing state

layouts/partials/track-card.html

@@ -1,11 +1,20 @@
 {{/* Track Card Component */}}
 {{- $hasVideo := .Resources.GetMatch "preview.*" -}}
+{{- $audio := "" -}}
+{{- with .Resources.GetMatch "track.*" -}}
+  {{- $audio = .RelPermalink -}}
+{{- end -}}
 <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; }"
+  x-data="{ 
+    hovering: false,
+    get isActive() {
+      return this.hovering || ($store.audio.isPlaying && $store.audio.currentTrack?.url === '{{ $audio }}');
+    }
+  }"
+  :class="isActive ? '' : 'grayscale'"
+  @mouseenter="hovering = true"
+  @mouseleave="hovering = false"
 >
   {{/* Cover Image/Video */}}
   <a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
@@ -15,7 +24,7 @@
         src="{{ $img.RelPermalink }}"
         alt="{{ $.Title }}"
         class="track-card__cover w-full h-full object-cover"
-        :class="{ 'opacity-0': hovering && $refs.video }"
+        :class="{ 'opacity-0': isActive && $refs.video }"
         loading="lazy"
         decoding="async"
       >
@@ -27,24 +36,25 @@
       </div>
     {{- end }}
 
-    {{/* Video preview on hover */}}
+    {{/* Video preview on hover or playing */}}
     {{- with .Resources.GetMatch "preview.*" }}
     <video
       x-ref="video"
       src="{{ .RelPermalink }}"
       class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
-      :class="hovering ? 'opacity-100' : 'opacity-0'"
+      :class="isActive ? 'opacity-100' : 'opacity-0'"
       muted
       loop
       playsinline
       preload="metadata"
+      x-effect="if (isActive) { $el.play().catch(() => {}) } else { $el.pause(); $el.currentTime = 0; }"
     ></video>
     {{- end }}
 
     {{/* 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">
+    <div class="absolute inset-0 bg-surface-0/60 transition-opacity flex items-center justify-center" :class="isActive ? 'opacity-100' : 'opacity-0'">
+      <div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform transition-transform" :class="isActive ? 'scale-100' : 'scale-90'">
         <svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
           <path d="M8 5v14l11-7z"/>
         </svg>