/* Estilos generales */
.like-container {
    position: relative;
    overflow: hidden;
}

#overlay-like-image {
    opacity: 0; /* Inicialmente oculta */
    transition: opacity 0.3s ease;
}

/* Clase para la animación */
.like-animation {
    animation: like-spin-up 0.7s ease-out forwards; /* Animación de giro hacia arriba */
}

/* Keyframes de la animación */
@keyframes like-spin-up {
    0% {
        opacity: 0.8;
        transform: translate(-50%, 100%) rotate(0deg) scale(0.7); /* Comienza abajo */
    }
        75% {
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(720deg) scale(1); /* Gira al subir y se mantiene visible en el centro */
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(720deg) scale(1); /* Gira y se desvanece en el centro */
    }
}