@keyframes enhance-navbar {
    0% {
        background-color: transparent;
    }

    100% {
        background-color: white;
    }
}

/* Animar elemento de abajo hacia arriba con la opacidad de 0 a 1 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(110px);
    }

    50% {
        opacity: 0.5;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-110px);
    }

    50% {
        opacity: 0.5;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animar elemento para que salga desde la derecha hacia la izquierda con opacity 0 a opacidad 1 */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(110px);
    }

    50% {
        opacity: 0.5;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animar la opacidad y el scale */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.7);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animar la opacidad con el scroll */
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-header-text {
    animation: fadeInUp 1.6s ease-in-out;
}

.animate-fadeInUp {
    animation: fadeInUp linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

.animate-fadeInDown {
    animation: fadeInDown linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

.animate-fadeInScale {
    animation: fadeInScale linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

.animate-fadeInOpacity {
    animation: fadeInOpacity linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

/* Galeria de imagenes en modal */
.galeria img {
    flex-grow: 1;
    transition: .5s ease;
}

.galeria img:hover {
    filter: contrast(120%);
}