/* ========================================
   ANIMACIONES PARA TARJETAS DE DESTINOS
   ======================================== */

/* Animación de flotación suave y pausada */
@keyframes float-smooth {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(0.5deg);
    }
    50% {
        transform: translateY(-4px) rotate(-0.5deg);
    }
    75% {
        transform: translateY(-12px) rotate(0.3deg);
    }
}

/* Animación de temblor suave */
@keyframes shake-soft {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    10% {
        transform: translateX(-2px) translateY(-1px) rotate(-0.5deg);
    }
    20% {
        transform: translateX(2px) translateY(1px) rotate(0.5deg);
    }
    30% {
        transform: translateX(-2px) translateY(-1px) rotate(-0.3deg);
    }
    40% {
        transform: translateX(2px) translateY(1px) rotate(0.3deg);
    }
    50% {
        transform: translateX(-1px) translateY(0) rotate(-0.2deg);
    }
    60% {
        transform: translateX(1px) translateY(0) rotate(0.2deg);
    }
    70% {
        transform: translateX(-1px) translateY(0) rotate(-0.1deg);
    }
    80% {
        transform: translateX(1px) translateY(0) rotate(0.1deg);
    }
    90% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

/* Aplicar la animación flotante a todas las tarjetas */
.listing-item-container {
    animation: float-smooth 8s ease-in-out infinite;
    transition: transform 0.3s ease;
}

/* Diferentes delays para crear efecto escalonado */
.col-lg-4:nth-child(1) .listing-item-container,
.col-md-6:nth-child(1) .listing-item-container {
    animation-delay: 0s;
}

.col-lg-4:nth-child(2) .listing-item-container,
.col-md-6:nth-child(2) .listing-item-container {
    animation-delay: 2.5s;
}

.col-lg-4:nth-child(3) .listing-item-container,
.col-md-6:nth-child(3) .listing-item-container {
    animation-delay: 5s;
}

.col-lg-4:nth-child(4) .listing-item-container,
.col-md-6:nth-child(4) .listing-item-container {
    animation-delay: 1.5s;
}

.col-lg-4:nth-child(5) .listing-item-container,
.col-md-6:nth-child(5) .listing-item-container {
    animation-delay: 4s;
}

.col-lg-4:nth-child(6) .listing-item-container,
.col-md-6:nth-child(6) .listing-item-container {
    animation-delay: 6.5s;
}

.col-lg-4:nth-child(7) .listing-item-container,
.col-md-6:nth-child(7) .listing-item-container {
    animation-delay: 3s;
}

.col-lg-4:nth-child(8) .listing-item-container,
.col-md-6:nth-child(8) .listing-item-container {
    animation-delay: 5.5s;
}

.col-lg-4:nth-child(9) .listing-item-container,
.col-md-6:nth-child(9) .listing-item-container {
    animation-delay: 7s;
}

/* Clase para el efecto de temblor */
.listing-item-container.shake-active {
    animation: shake-soft 0.6s ease-in-out, float-smooth 8s ease-in-out infinite;
}

/* Mantener la animación flotante en hover pero con un ligero aumento */
.listing-item-container:hover {
    transform: translateY(-5px) scale(1.02);
}

/* Asegurar que las transiciones sean suaves */
.listing-item-container * {
    transition: all 0.3s ease;
}