Hover-Activated Ritual Info Card with Video

<div class="max-w-md w-full animate-in fade-in duration-1000">
        <div class="flex flex-col w-full aspect-[3/5] hover:scale-[1.03] transition-all duration-300 hover:shadow-3xl group sm:p-10 ring-1 ring-cyan-400/10 bg-center relative overflow-hidden animate-in slide-in-from-bottom duration-700 delay-200 text-white bg-[url(https://cdn.midjourney.com/1d4fd59c-9023-4628-8ea1-4256408af86b/0_1.png?w=800&amp;q=80)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 justify-between" 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(()=&gt;{});}})(this)" onmouseleave="(function(el){const v=el.querySelector('video'); if(v){v.pause(); v.currentTime=0;}})(this)">
            <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
                <video src="https://cdn.midjourney.com/video/157de36c-d492-4080-87f3-0dcebd3b268f/1.mp4" preload="metadata" muted="" playsinline="" webkit-playsinline="" loop="" class="w-full h-full object-cover opacity-0 group-hover:opacity-100 scale-105 group-hover:scale-100 transition-all duration-300"></video>
                <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="space-y-6 relative z-10 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 w-8 h-8 text-cyan-200 group-hover:scale-110 transition-transform"><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="text-xs px-3 py-1.5 bg-cyan-400/20 text-cyan-200 rounded-full font-inter font-medium">Whisking</span>
                </div>
                <div class="animate-in slide-in-from-left duration-700 delay-500">
                    <p class="text-2xl sm:text-3xl tracking-tight font-instrument-serif">Whisk &amp; Breathe</p>
                    <p class="text-cyan-200 text-base mt-2 font-inter">Calming Ritual</p>
                </div>
                <div class="relative animate-in slide-in-from-right duration-700 delay-600">
                    <div class="absolute top-0 right-0 text-right">
                        <p class="text-cyan-200 text-2xl font-instrument-serif">5 min</p>
                        <p class="text-cyan-300 text-sm font-inter font-light">session</p>
                    </div>
                </div>
            </div>
            <div class="relative z-10 animate-in slide-in-from-bottom duration-700 delay-700 border-stone-600/50 border-t pt-6 space-y-4">
                <p class="leading-relaxed text-sm text-slate-50 font-inter font-light">
                    Pair mindful breathing with gentle whisking to settle the mind and invite steady energy.
                </p>
                <div class="flex justify-between items-center animate-in fade-in duration-700 delay-800">
                    <div class="flex items-center gap-2">
                        <span class="text-xs tracking-wider font-inter font-semibold">MATCHA</span>
                        <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="check-circle" class="lucide lucide-check-circle w-4 h-4 text-cyan-200"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
                    </div>
                    <a href="#" class="text-cyan-200 text-sm hover:underline hover:text-cyan-100 transition-colors font-inter font-medium">Start ritual</a>
                </div>
            </div>
        </div>
    </div>