/*
    Examples d'animations :
        - https://animate.style/

*/
:root {
    --animate-duration: 1s;
    --animate-delay: .75s;
    --animate-delay2: 1.25s;
    --animate-delay3: 1.75s;
}

.zoom img, .translation-h, .translation-v { transition: all var(--duree-transition); }

@media (prefers-reduced-motion: no-preference) {
    
    .zoom { overflow: hidden;  }
    a:hover .zoom img, a:active .zoom img, a:focus .zoom img { transform: scale3d(1.05,1.05,1); }
    /* Translation verticale */
    a:hover .translation-h, a:active .translation-h, a:focus .translation-h { transform: translate3d(.5rem,0,0); }
    a:hover .translation-v, a:active .translation-v, a:focus .translation-v { transform: translate3d(0,-.5rem,0); }

}

/* Animation des grille */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.anim_fadeInUp, .anim_fadeIn { visibility: hidden; }
.anim_fadeInUp.detectview_inview, .anim_fadeIn.detectview_inview {
    visibility: inherit;
    opacity: 0;
    animation-duration: var(--animate-duration);
    animation-delay: var(--animate-delay);
    animation-name: fadeInUp;
    animation-fill-mode: forwards;
}

li:nth-of-type(2).anim_fadeInUp.detectview_inview {animation-delay: var(--animate-delay2); }
li:nth-of-type(3).anim_fadeInUp.detectview_inview {animation-delay: var(--animate-delay3); }

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.anim_fadeIn.detectview_inview { animation-name: fadeIn; }
li:nth-of-type(2).anim_fadeIn.detectview_inview {animation-delay: var(--animate-delay2); }
li:nth-of-type(3).anim_fadeIn.detectview_inview {animation-delay: var(--animate-delay3); }