/**
 * ==========================================================
 * MetrYMMO V2
 * Animations & Reveal System
 * ==========================================================
 */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --reveal-duration: .7s;

    --reveal-distance: 28px;

    --reveal-easing:
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


/* ==========================================================
   REVEAL — ÉTAT INITIAL
========================================================== */

.reveal {

    opacity: 1;

    transform: none;

    visibility: visible;

}


/* ==========================================================
   REVEAL — ÉTAT ANIMÉ
========================================================== */

.reveal.is-visible {

    opacity: 1;

    transform: translate3d(
        0,
        0,
        0
    );

    visibility: visible;

}


/* ==========================================================
   IMPORTANT
   Les sections principales du site doivent toujours
   rester visibles même si le JavaScript d'animation
   ne se charge pas.
========================================================== */

section.reveal,
section.reveal-up,
section.reveal-down,
section.reveal-left,
section.reveal-right {

    opacity: 1;

    visibility: visible;

}


/* ==========================================================
   ANIMATION D'ENTRÉE
   Utilisée uniquement lorsque JS ajoute .animate-in
========================================================== */

.reveal.animate-in,
.card-reveal.animate-in {

    animation:
        metrymmoReveal
        var(--reveal-duration)
        var(--reveal-easing)
        both;

}


/* ==========================================================
   KEYFRAME
========================================================== */

@keyframes metrymmoReveal {

    from {

        opacity: 0;

        transform:
            translate3d(
                0,
                var(--reveal-distance),
                0
            );

    }

    to {

        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


/* ==========================================================
   FADE
========================================================== */

.fade-in {

    opacity: 0;

}

.fade-in.is-visible {

    opacity: 1;

}


/* ==========================================================
   DELAYS
========================================================== */

.delay-1 {
    animation-delay: .1s;
}

.delay-2 {
    animation-delay: .2s;
}

.delay-3 {
    animation-delay: .3s;
}

.delay-4 {
    animation-delay: .4s;
}

.delay-5 {
    animation-delay: .5s;
}


/* ==========================================================
   HOVER PREMIUM
========================================================== */

.hover-lift {

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hover-lift:hover {

    transform:
        translateY(-6px);

}


/* ==========================================================
   IMAGE ZOOM
========================================================== */

.image-zoom {

    overflow: hidden;

}

.image-zoom img {

    transition:
        transform .65s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}

.image-zoom:hover img {

    transform:
        scale(1.045);

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}