Card with image scale hover effect

<!--
  Расхождение с апстримом: `https://picsum.photos/...?random=N` заменён
  локальным 1x1 data-URI (`PIXEL`) — см. комментарий в `c-card-7.vue`
  (picsum отдаёт случайное фото на каждый запрос, а не стабильный сид).
-->
<script setup lang="ts">
import { Card } from "@/components/ui/card"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <Card class="group/card relative h-96 w-full max-w-xs overflow-hidden border-0 p-0">
    <img
      :src="PIXEL"
      alt="Background"
      width="1000"
      height="800"
      class="absolute inset-0 size-full object-cover transition-transform duration-500 group-hover/card:scale-110"
    />

    <!-- Background fade effects -->
    <div class="absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-black/60 to-transparent transition-opacity duration-500 group-hover/card:from-black/70" />

    <!-- Content -->
    <div class="relative flex h-full flex-col justify-end p-6">
      <h3 class="text-2xl font-bold text-white">Image Scale Effect</h3>
      <p class="mt-2 text-sm text-white/90">
        This card features a smooth image scaling effect and background
        overlay on hover.
      </p>
    </div>
  </Card>
</template>