/* Liquid Border Effect for Cards */
.work-item.liquid-border {
    position: relative;
    z-index: 1;
    background-color: transparent; /* O fundo do card em si fica transparente */
}

.work-item.liquid-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Fica atrás do conteúdo do card */

    /* Pega o estilo do seu efeito líquido original */
    background: linear-gradient(135deg, var(--primary-color) 0%, #d66a50 100%);
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.1),
        inset -5px -5px 10px rgba(255, 255, 255, 0.7);
    
    /* Animação de morphing para a borda */
    border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
    animation: morphing-border 10s ease-in-out infinite;
    transition: border-radius 0.5s ease;
}

.work-item.liquid-border:hover::before {
    border-radius: 1rem; /* No hover, a borda fica mais estável, como o card */
    animation-play-state: paused;
}

/* Animação que muda o border-radius */
@keyframes morphing-border {
    0% {
        border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
    }
    25% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
    50% {
        border-radius: 64% 36% 25% 75% / 42% 36% 64% 58%;
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
    100% {
        border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
    }
}