/* Animation de gradient */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animation loader-1 */
@keyframes loader-1 {
    0% {
        transform: translate3d(0, 0, 0) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1.5);
        opacity: 0;
    }
}

/* Animation loader-2 */
@keyframes loader-2 {
    0% {
        transform: translate3d(0, 0, 0) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
    }
}

.loader span::after {
    animation: loader-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;
}

/* Animation blink */
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Animation rotateBack */
@keyframes rotateBack {
    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* Media queries pour les écrans de moins de 768px */
@media (max-width: 768px) {
    /* Animation rotateAnimation */
    @keyframes rotateAnimation {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(180deg);
        }
    }

    /* Animation slideUp */
    @keyframes slideUp {
        from {
            margin-top: 100vh;
        }
        to {
            margin-top: 7vh;
        }
    }

    /* Animation slideDown */
    @keyframes slideDown {
        from {
            margin-top: 7vh;
        }
        to {
            margin-top: 100vh;
        }
    }

    .slideUp {
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
    }

    .slideDown {
        animation-name: slideDown;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
    }
}