imporve cards animations

app/components/Card.vue

@@ -16,11 +16,18 @@
             {{ props.track.card?.rank }}
           </div>
         </div>
+
+        <div class="flex items-center justify-center size-7 absolute top-6 left-6" v-else>
+          <div class="rank text-white font-bold absolute -mt-1">
+            {{ props.track.order }}
+          </div>
+        </div>
         <!-- Cover -->
         <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
           @click="playerStore.playTrack(track)">
           <playButton :objectToPlay="track" />
-          <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
+          <img v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
+            class="w-full h-full object-cover object-center" />
         </figure>
         <!-- Body -->
         <div class="p-3 text-center bg-white rounded-b-xl">
@@ -63,9 +70,12 @@ const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
 const isPlaylistTrack = computed(() => props.track.type === 'playlist')
 const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
-const coverUrl = props.track.coverId.startsWith('http')
-  ? props.track.coverId
-  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
+const coverUrl = computed(() => {
+  if (!props.track.coverId) return ''
+  return props.track.coverId.startsWith('http')
+    ? props.track.coverId
+    : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
+})
 </script>
 
 <style lang="scss">
@@ -138,7 +148,7 @@ const coverUrl = props.track.coverId.startsWith('http')
     @apply z-50;
 
     .face-up {
-      @apply shadow-2xl-custom;
+      @apply shadow-none;
       transition:
         box-shadow 0.6s,
         transform 0.6s;