/*==================================================
ANIMATIONS
EvaaOrakel Premium
==================================================*/

/*----------------------------------
Transitions générales
----------------------------------*/

*{
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}

/*----------------------------------
Fade Up
----------------------------------*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

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

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/*----------------------------------
Fade Left
----------------------------------*/

.fade-left{

    opacity:0;

    transform:translateX(-60px);

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

}

.fade-left.show{

    opacity:1;

    transform:none;

}

/*----------------------------------
Fade Right
----------------------------------*/

.fade-right{

    opacity:0;

    transform:translateX(60px);

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

}

.fade-right.show{

    opacity:1;

    transform:none;

}

/*----------------------------------
Zoom
----------------------------------*/

.zoom{

    opacity:0;

    transform:scale(.92);

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

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

/*----------------------------------
Rotation douce
----------------------------------*/

.rotate{

    opacity:0;

    transform:rotate(-3deg) scale(.95);

    transition:.8s ease;

}

.rotate.show{

    opacity:1;

    transform:rotate(0) scale(1);

}

/*----------------------------------
Cartes
----------------------------------*/

.skill-card,
.service-card,
.testimonial-card,
.faq-item,
.method-card,
.process-card{

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

}

.skill-card:hover,
.service-card:hover,
.testimonial-card:hover,
.method-card:hover,
.process-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/*----------------------------------
Images
----------------------------------*/

.about-image img,
.hero img{

    transition:
        transform .7s ease;

}

.about-image:hover img,
.hero:hover img{

    transform:scale(1.04);

}

/*----------------------------------
Boutons
----------------------------------*/

.btn{

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

/*----------------------------------
Navigation
----------------------------------*/

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#6d28d9;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/*----------------------------------
Titre
----------------------------------*/

.section-title,
h2{

    transition:.5s;

}

.section-title:hover,
h2:hover{

    letter-spacing:.5px;

}

/*----------------------------------
Animation Hero
----------------------------------*/

.hero h1,
.about-hero h1{

    animation:fadeHero 1s ease forwards;

}

.hero p,
.about-hero p{

    animation:fadeHero 1.4s ease forwards;

}

.hero .btn,
.about-hero .btn{

    animation:fadeHero 1.8s ease forwards;

}

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*----------------------------------
Flottement doux
----------------------------------*/

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*----------------------------------
Pulse
----------------------------------*/

.pulse{

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(109,40,217,.35);

    }

    70%{

        box-shadow:0 0 0 18px rgba(109,40,217,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(109,40,217,0);

    }

}