/* td animate v1.2 - mobile first */

/* ----------------------------------------
   etat initial : elements masques
   la duree est injectee inline par le JS
---------------------------------------- */

/* fade */
.tdanim-fade,
[class*="tdanim-fade-"] {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

/* slides horizontaux */
.tdanim-slide-left,
[class*="tdanim-slide-left-"],
.tdanim-slide-right,
[class*="tdanim-slide-right-"] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    transform: translateX(-48px);
}

.tdanim-slide-right,
[class*="tdanim-slide-right-"] {
    transform: translateX(48px);
}

/* slides verticaux */
.tdanim-slide-top,
[class*="tdanim-slide-top-"],
.tdanim-slide-bottom,
[class*="tdanim-slide-bottom-"] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    transform: translateY(-48px);
}

.tdanim-slide-bottom,
[class*="tdanim-slide-bottom-"] {
    transform: translateY(48px);
}

/* grayscale : noir et blanc vers couleur */
.tdanim-grayscale,
[class*="tdanim-grayscale-"] {
    filter: grayscale(1);
    transition-property: filter;
    transition-timing-function: ease-out;
    will-change: filter;
}

/* ----------------------------------------
   etat visible (classe ajoutee par le JS)
---------------------------------------- */

.tdanim-fade.is-visible,
[class*="tdanim-fade-"].is-visible {
    opacity: 1;
}

.tdanim-slide-left.is-visible,
[class*="tdanim-slide-left-"].is-visible,
.tdanim-slide-right.is-visible,
[class*="tdanim-slide-right-"].is-visible,
.tdanim-slide-top.is-visible,
[class*="tdanim-slide-top-"].is-visible,
.tdanim-slide-bottom.is-visible,
[class*="tdanim-slide-bottom-"].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

.tdanim-grayscale.is-visible,
[class*="tdanim-grayscale-"].is-visible {
    filter: grayscale(0);
}

/* ----------------------------------------
   ameliorations desktop : decalage plus marque
---------------------------------------- */

@media (min-width: 1000px) {
    .tdanim-slide-left,
    [class*="tdanim-slide-left-"] {
        transform: translateX(-64px);
    }

    .tdanim-slide-right,
    [class*="tdanim-slide-right-"] {
        transform: translateX(64px);
    }

    .tdanim-slide-top,
    [class*="tdanim-slide-top-"] {
        transform: translateY(-64px);
    }

    .tdanim-slide-bottom,
    [class*="tdanim-slide-bottom-"] {
        transform: translateY(64px);
    }

    .tdanim-slide-left.is-visible,
    [class*="tdanim-slide-left-"].is-visible,
    .tdanim-slide-right.is-visible,
    [class*="tdanim-slide-right-"].is-visible,
    .tdanim-slide-top.is-visible,
    [class*="tdanim-slide-top-"].is-visible,
    .tdanim-slide-bottom.is-visible,
    [class*="tdanim-slide-bottom-"].is-visible {
        transform: translate(0, 0);
    }
}