/* Efecto de desvanecimiento */
.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

.image.fade-out {
    opacity: 0;
}

/* Efecto de deslizamiento */
.image {
    transition: transform 0.5s ease-in-out;
}

.image.slide-out {
    transform: translateX(100%); /* Desplaza la imagen hacia la derecha */
}

.image.slide-in {
    transform: translateX(0); /* Desplaza la imagen a su posición original */
}

/* Efecto de zoom */
.image {
    transition: transform 0.5s ease-in-out;
}

.image.zoom-in {
    transform: scale(1.2); /* Aumenta el tamaño de la imagen */
}

.image.zoom-out {
    transform: scale(1); /* Vuelve al tamaño original */
}

/* Efecto de desvanecimiento con deslizamiento */
.image {
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.image.fade-slide-out {
    opacity: 0;
    transform: translateY(50px); /* La imagen se desliza hacia abajo */
}

.image.fade-slide-in {
    opacity: 1;
    transform: translateY(0); /* La imagen vuelve a su posición original */
}

/* Efecto de rotación */
.image {
    transition: transform 0.5s ease-in-out;
}

.image.rotate-out {
    transform: rotate(180deg); /* Rota la imagen 180 grados */
}

.image.rotate-in {
    transform: rotate(0); /* Restaura la rotación original */
}

/* Efecto de desenfoque */
.image {
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.image.blur-out {
    opacity: 0;
    filter: blur(5px); /* Aplica un desenfoque */
}

.image.blur-in {
    opacity: 1;
    filter: blur(0); /* Elimina el desenfoque */
}

/* Efecto de giro */
.image {
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.image.flip-out {
    transform: rotateY(180deg); /* Gira la imagen hacia atrás */
}

.image.flip-in {
    transform: rotateY(0); /* Vuelve a la posición original */
}

/* Efecto de desvanecimiento y desplazamiento hacia arriba */
.image {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.image.slide-up-fade-out {
    opacity: 0;
    transform: translateY(-50px); /* Desplaza la imagen hacia arriba */
}

.image.slide-up-fade-in {
    opacity: 1;
    transform: translateY(0); /* Vuelve a la posición original */
}