/* =====================================================
   ANIMATIONS.CSS
   CONCIERGERIE IA V2
===================================================== */

/* ===============================
   APPARITION GENERALE
================================ */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    animation:fadeIn .8s ease forwards;

}

/* ===============================
   APPARITION BAS -> HAUT
================================ */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .7s ease forwards;

}

/* ===============================
   APPARITION GAUCHE
================================ */

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-left{

    animation:slideLeft .6s ease forwards;

}

/* ===============================
   APPARITION DROITE
================================ */

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-right{

    animation:slideRight .6s ease forwards;

}

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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    animation:zoomIn .6s ease;

}

/* ===============================
   BOUTONS
================================ */

.primary-btn,
.secondary-btn{

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-4px);

}

.secondary-btn:hover{

    transform:translateY(-4px);

}

/* ===============================
   CARDS
================================ */

.service-card,
.official-card,
.stat-card{

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

}

.official-card:hover{

    transform:translateY(-10px);

}

.stat-card:hover{

    transform:translateY(-8px);

}

/* ===============================
   LOGO
================================ */

.logo-circle{

    transition:.4s;

}

.logo-circle:hover{

    transform:rotate(360deg);

}

/* ===============================
   HERO
================================ */

.assistant-avatar{

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

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===============================
   STATUS DOT
================================ */

.status-dot,
.online-dot{

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.4;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ===============================
   CHAT
================================ */

.message{

    animation:fadeUp .4s ease;

}

.user .bubble{

    animation:slideRight .35s ease;

}

.assistant .bubble{

    animation:slideLeft .35s ease;

}

/* ===============================
   IA LOADER
================================ */

.typing span{

    animation:bounce 1.2s infinite;

}

.typing span:nth-child(2){

    animation-delay:.2s;

}

.typing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes bounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===============================
   SUGGESTIONS
================================ */

.suggestion{

    transition:.35s;

}

.suggestion:hover{

    transform:translateY(-5px);

}

/* ===============================
   LIENS
================================ */

a{

    transition:.3s;

}

a:hover{

    opacity:.9;

}

/* ===============================
   SCROLL APPARITION
================================ */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ===============================
   ROTATION
================================ */

.rotate{

    animation:rotate360 1.2s linear;

}

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ===============================
   SHAKE
================================ */

.shake{

    animation:shake .5s;

}

@keyframes shake{

    0%{transform:translateX(0);}

    20%{transform:translateX(-5px);}

    40%{transform:translateX(5px);}

    60%{transform:translateX(-5px);}

    80%{transform:translateX(5px);}

    100%{transform:translateX(0);}

}

/* ===============================
   SPINNER
================================ */

.spinner{

    width:40px;

    height:40px;

    border:4px solid #E5E7EB;

    border-top:4px solid #123C7A;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ===============================
   FIN
================================ */