/*==============================================================
#
# EcoClimPro V2
# Animations CSS
# Version : 2.0
#
==============================================================*/


/*==============================================================
# Reveal au scroll
==============================================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:opacity,transform;

}

.reveal.is-visible{

    opacity:1;

    transform:translateY(0);

}


/*==============================================================
# Fade
==============================================================*/

.fade-in{

    animation:fadeIn .8s ease both;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*==============================================================
# Slide Up
==============================================================*/

.slide-up{

    animation:slideUp .7s ease both;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==============================================================
# Slide Left
==============================================================*/

.slide-left{

    animation:slideLeft .7s ease both;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==============================================================
# Slide Right
==============================================================*/

.slide-right{

    animation:slideRight .7s ease both;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==============================================================
# Zoom
==============================================================*/

.zoom-in{

    animation:zoomIn .6s ease both;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*==============================================================
# Rotation douce
==============================================================*/

.rotate-hover{

    transition:.35s;

}

.rotate-hover:hover{

    transform:rotate(5deg);

}


/*==============================================================
# Floating
==============================================================*/

.float{

    animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==============================================================
# Pulse
==============================================================*/

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


/*==============================================================
# Shine
==============================================================*/

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

}

.shine:hover::before{

    animation:shine .8s;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}


/*==============================================================
# Hover Lift
==============================================================*/

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}


/*==============================================================
# Hover Scale
==============================================================*/

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.03);

}


/*==============================================================
# Image Zoom
==============================================================*/

.img-zoom{

    overflow:hidden;

}

.img-zoom img{

    transition:.6s;

}

.img-zoom:hover img{

    transform:scale(1.08);

}


/*==============================================================
# Apparition en cascade
==============================================================*/

.stagger>*{

    opacity:0;

    transform:translateY(25px);

}

.stagger.is-visible>*{

    animation:fadeUp .7s forwards;

}

.stagger.is-visible>*:nth-child(1){animation-delay:.05s;}
.stagger.is-visible>*:nth-child(2){animation-delay:.15s;}
.stagger.is-visible>*:nth-child(3){animation-delay:.25s;}
.stagger.is-visible>*:nth-child(4){animation-delay:.35s;}
.stagger.is-visible>*:nth-child(5){animation-delay:.45s;}
.stagger.is-visible>*:nth-child(6){animation-delay:.55s;}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:none;

    }

}


/*==============================================================
# Accessibilité
==============================================================*/

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

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

    animation:none!important;

    transition:none!important;

}

.reveal{

    opacity:1!important;

    transform:none!important;

}

}