/* Apparitiondu logo sur la home : dézoom (version desktop) */
@media (min-width:981px) {
    @keyframes logo_wrapper_apparition {
        from {bottom:-25vw; right:-140vw; opacity:0;}
        60% {opacity:.2;}
        to {bottom:3.7vw; right:4.6vw; opacity:1;}
    }
    body.home #header {
        animation: logo_wrapper_apparition .9s ease-out both;
        animation-delay:.8s;
    }
    @keyframes logo_apparition {
        from {width:416.8vw; height:133vw;}
        to {width:10.42vw; height:3.325vw;}
    }
    body.home #header .logo {
        animation: logo_apparition .9s ease-out both;
        animation-delay:.8s;
    }
}



/* Apparition logo sur la home */
@media (max-width:980px) {

    @keyframes body_home_apparition {
        from {opacity:0;}
        to {opacity:1;}
    }
    body.home #main,
    body.home #header,
    body.home #burger-btn {
        animation: body_home_apparition .5s linear both;
        animation-delay:.6s;
    }

    @keyframes mobile_logo_home_apparition {
        from {opacity:0; top:-20vh; left:-206vh; height:155vh;}
        20% {opacity:1;}
        90% {opacity:1;}
        99% {opacity:0; top:26px; left:24px; height:25px;}
        to {opacity:0; top:0; left:0; height:1px;}
    }
    body.home .home-logo-mobile {
        display:block;
        position:fixed; z-index:99999;
        width:auto;
        animation: mobile_logo_home_apparition .5s ease-out both;
        animation-delay:.4s;
    }
}



/* Effet "enfoncé" au clic sur un bouton */
.skew-on-click:active {
    transform:skew(4deg,0);
}



/* Effet d'explosion rapide lorsqu'un élément devient visible */
@keyframes pop_effect {
    from {transform:scale(0) translateY(2vw); opacity:0; filter:blur(.2vw);}
    75%  {transform:scale(1.15) translateY(-.5vw); opacity:.4;}
    to   {transform:scale(1) translateY(0); opacity:1; filter:blur(0);}
}
.pop-effect {
    transform:scale(0);
}
.pop-effect.animate {
    animation:pop_effect .5s ease-out both;
}


@keyframes pop_effect_2 {
    from {transform:scale(0) translateY(2vw); opacity:.5;}
    80%  {transform:scale(1.08) translateY(-.5vw); opacity:1;}
    to   {transform:scale(1) translateY(0); opacity:1;}
}
.pop-effect-2 {
    transform:scale(0);
}
.pop-effect-2.animate {
    animation:pop_effect_2 .4s ease-out both;
}



/* Ouverture / fermeture MENU */
@keyframes menu_opening {
    from {width:75%; opacity:0; transform: translate3d(20%,0,0);}
    to   {width:100%; opacity:1; transform: translate3d(0, 0, 0);}
}
@keyframes menu_closing {
    from {width:100%; opacity:1; transform:translate3d(0, 0, 0);}
    99%   {width:75%; opacity:0; transform:translate3d(20%, 0, 0);}
    to   {width:0M; opacity:0; transform:translate3d(20%, 0, 0);}
}
body.menu-opening #menu {
    animation:menu_opening .6s ease-out both;
}
body.menu-closing #menu {
    animation:menu_closing .6s ease-out both;
    animation-delay:.4s;
}



/* Apparition de la barre oblique */
@keyframes menu_line_opening {
    from, 33% {transform:translateX(25vw) rotateZ(90deg) scaleY(0); opacity:.3;}
    70%       {transform:translateX(0) rotateZ(90deg) scaleY(.1); opacity:1;}
    to        {transform:translateX(0) rotateZ(30deg) scaleY(1); opacity:1;}
}
@keyframes menu_line_closing {
    from    {transform:translateX(0) rotateZ(30deg) scaleY(1); opacity:1;}
    30%     {transform:translateX(0) rotateZ(90deg) scaleY(.1); opacity:1;}
    to, 66% {transform:translateX(25vw) rotateZ(90deg) scaleY(0); opacity:.3;}
}
#menu .line {
    transform:translateX(0) rotateZ(30deg) scale(1);
}
body.menu-opening #menu .line {
    animation:menu_line_opening 1.2s ease-out both;
}
body.menu-closing #menu .line {
    animation:menu_line_closing 1s ease-out both;
}




/* Apparition / disparition bouton de fermeture du menu */
@keyframes close_menu_opening {
    from {transform:translateX(4vw) scale3d(0, .94, 1); opacity:0;}
    to {transform:translateX(0) scale3d(.94, .94, 1); opacity:1;}
}
@keyframes close_menu_closing {
    from {transform:translateX(0) scale3d(.94, .94, 1); opacity:1;}
    to {transform:translateX(4vw) scale3d(0, .94, 1); opacity:0;}
}
body.menu-opening #burger-btn .close {
    animation: close_menu_opening .4s ease-out both;
}
body.menu-closing #burger-btn .close {
    animation: close_menu_closing .7s ease-out both;
}


/* Disparition des liens du menu qui ne sont pas cliqués */
@keyframes menu_items_fadeout {
    from {filter:blur(0); opacity:1;}
    to   {filter:blur(.1vw); opacity:0;}
}
#menu.item-selected li a:not(.selected) {
    animation:menu_items_fadeout .3s ease-out both;
}


@keyframes continue_opening {
    from {opacity:0; transform:scaleY(0);}
    66% {opacity:.3;}
    to {opacity:1; transform:scaleY(1)}
}
.has-continue .continue {
    animation:continue_opening .7s ease-in both;
    animation-delay:1.2s;
}
body.single-colorz_realisations .has-continue .continue {
    animation-delay:.5s;
}


/* Nos services */
@keyframes services_line_opening {
    from {bottom:calc(100% - .5vw); opacity:0;}
    to   {bottom:1.3vw; opacity:1;}
}
.services.animate ul:before {
    transform-origin: top right;
    transform:skew(-30deg, 30deg);
    animation:services_line_opening .8s ease-out both;
}
@keyframes services_item_fadein {
    from {transform:scale(1.2) translateX(5vw) translateY(-1vw); opacity:0;}
    to   {transform:scale(1) translateX(0) translateY(0); opacity:1;}
}
.services.animate .item {
    animation: services_item_fadein .8s ease-out both;
}
.services.animate .item:nth-child(2) {
    animation-delay:.1s;
}
.services.animate .item:nth-child(3) {
    animation-delay:.2s;
}
.services.animate .item:nth-child(4) {
    animation-delay:.3s;
}


/* Sélection d'une réalisation : fade-out */
@keyframes hide_body {
    from {opacity:1;}
    to {opacity:0;}
}
body.realisation-clicked {
    animation: hide_body .3s linear both;
}


/* Apparition d'une réalisation : fade-in */
@keyframes show_body {
    from {opacity:0;}
    to {opacity:1;}
}
body.single-colorz_realisations {
    animation: show_body .3s linear both;
}


/* Loader réalisations */
@keyframes display_loader {
    from {opacity:0;}
    to {opacity:1;}
}
.realisations:not(.loaded):before {
    animation: display_loader .5s linear both;
}