Video Hover Card

<div
  class="group relative flex flex-col aspect-[1/1] w-full justify-between overflow-hidden rounded-3xl bg-center bg-cover text-white ring-1 ring-cyan-400/10 transition-all duration-300 hover:scale-[1.03] hover:shadow-3xl animate-in slide-in-from-bottom duration-700 delay-200 bg-[url(https://dev.getampere.ai/assets/video/video-thumbnail.jpg?w=800&amp;q=80)]"
  style="box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 50px -12px, rgba(34, 211, 238, 0.12) 0px 0px 0px 1px"
  onmouseenter="(function(el){const v=el.querySelector('video'); if(v){v.currentTime=0; v.play().catch(()=>{});}})(this)"
  onmouseleave="(function(el){const v=el.querySelector('video'); if(v){v.pause(); v.currentTime=0;}})(this)">
  <!-- Background video + overlay (edge-to-edge, ignores padding) -->
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
    <video src="https://dev.getampere.ai/assets/video/animated-voice-agent-speech-v2.mp4" preload="metadata" muted
      playsinline webkit-playsinline loop
      class="h-full w-full object-cover opacity-0 scale-105 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100"></video>
    <div class="absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
  </div>

  <!-- Content wrapper (this is where padding belongs) -->
  <div class="relative z-10 flex h-full flex-col justify-between p-8 sm:p-10">
    <div class="space-y-6 animate-in slide-in-from-top duration-700 delay-400">
      <div class="flex items-center justify-between">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wind"
          class="lucide lucide-wind h-8 w-8 text-cyan-200 transition-transform group-hover:scale-110">
          <path d="M12.8 19.6A2 2 0 1 0 14 16H2"></path>
          <path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"></path>
          <path d="M9.8 4.4A2 2 0 1 1 11 8H2"></path>
        </svg>

        <span class="rounded-full bg-cyan-400/20 px-3 py-1.5 text-xs font-inter font-medium text-cyan-200">
          Whisking
        </span>
      </div>

      <div class="animate-in slide-in-from-left duration-700 delay-500">
        <p class="font-instrument-serif text-2xl tracking-tight sm:text-3xl">Whisk &amp; Breathe</p>
        <p class="mt-2 font-inter text-base text-cyan-200">Calming Ritual</p>
      </div>

      <div class="relative animate-in slide-in-from-right duration-700 delay-600">
        <div class="absolute right-0 top-0 text-right">
          <p class="font-instrument-serif text-2xl text-cyan-200">5 min</p>
          <p class="font-inter text-sm font-light text-cyan-300">session</p>
        </div>
      </div>
    </div>

   
  </div>
</div>