.card-hover {
    position: relative;
    transition: transform 0.4s ease;
    z-index: 0;
    cursor: pointer;
}

.card-hover:hover,
.card-hover:focus-visible {
    transform: scale(1.03);
    outline: none;
}

.card-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 6px solid #2563eb;
    border-radius: 1rem;
    pointer-events: none;
    z-index: 1;
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    transition: clip-path 0.6s ease-in-out;
}

.card-hover:hover::after,
.card-hover:focus-visible::after {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Mobile-friendly tap effect */
@media (hover: none) and (pointer: coarse) {
    .card-hover:active {
        transform: scale(1.03);
    }
    .card-hover:active::after {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transition: clip-path 0.6s ease-in-out;
    }
}