/* ============================================================================
   ANIMATIONS AU SCROLL
   ============================================================================ */

/* 1 - État initial */

.anime-up,
.anime-down,
.anime-left,
.anime-right,
.anime-fade,
.anime-zoom {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 400ms;
    transition-timing-function: ease;
}

.anime-up {
    transform: translate3d(0, 100px, 0);
}

.anime-down {
    transform: translate3d(0, -100px, 0);
}

.anime-left {
    transform: translate3d(-100px, 0, 0);
}

.anime-right {
    transform: translate3d(100px, 0, 0);
}

.anime-zoom {
    transform: scale(0.6);
}

/* 2 - État actif */

.anime-up.anime-active,
.anime-down.anime-active,
.anime-left.anime-active,
.anime-right.anime-active,
.anime-fade.anime-active,
.anime-zoom.anime-active {
    opacity: 1;
    transform: translateZ(0);
    animation: none;
}

/* 3 - Délais */

.anime-delay-100 {
    transition-delay: 100ms;
}

.anime-delay-200 {
    transition-delay: 200ms;
}

.anime-delay-300 {
    transition-delay: 300ms;
}

.anime-delay-400 {
    transition-delay: 400ms;
}

.anime-delay-500 {
    transition-delay: 500ms;
}

.anime-delay-600 {
    transition-delay: 600ms;
}

.anime-delay-700 {
    transition-delay: 700ms;
}

.anime-delay-800 {
    transition-delay: 800ms;
}

.anime-delay-900 {
    transition-delay: 900ms;
}

.anime-delay-1000 {
    transition-delay: 1000ms;
}

.anime-delay-1100 {
    transition-delay: 1100ms;
}

.anime-delay-1200 {
    transition-delay: 1200ms;
}

/* 4 - Filet de sécurité */

html:not(.anime-js) .anime-up,
html:not(.anime-js) .anime-down,
html:not(.anime-js) .anime-left,
html:not(.anime-js) .anime-right,
html:not(.anime-js) .anime-fade,
html:not(.anime-js) .anime-zoom {
    animation: anime-failsafe 400ms ease 3s forwards;
}

@keyframes anime-failsafe {
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

/* 5 - Neutralisation */

.anime-no-anim .anime-up,
.anime-no-anim .anime-down,
.anime-no-anim .anime-left,
.anime-no-anim .anime-right,
.anime-no-anim .anime-fade,
.anime-no-anim .anime-zoom {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .anime-up,
    .anime-down,
    .anime-left,
    .anime-right,
    .anime-fade,
    .anime-zoom {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}