/* ==================================================
   TRANSIÇÕES
================================================== */



    a,
    button,
    .button,
    .project-card,
    .mission-card,
    .advantage-card,
    [data-animation]{

        transition:
            background-color .3s ease,
            color .3s ease,
            border-color .3s ease,
            transform .3s ease,
            opacity .3s ease;

        }


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

.fade{

    opacity:0;

}

.fade.show{

    opacity:1;

}

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

@keyframes scrollIndicator{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(12px);

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==================================================
   ANIMATION DEFAULT
================================================== */

[data-animation]{

    opacity:0;

    visibility:hidden;

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

    will-change:opacity, transform;

}
/* ==================================================
   ANIMATION ACTIVE
================================================== */

[data-animation].animate{

    opacity:1;

    visibility:visible;

    transform:translate3d(0,0,0);

}

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

[data-animation="fade-up"]{
    transform:translateY(40px);
}

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

[data-animation="fade-down"]{
    transform:translateY(-40px);
}

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

[data-animation="fade-left"]{
    transform:translateX(-24px);
}

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

[data-animation="fade-right"]{
    transform:translateX(24px);
}

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

[data-animation="zoom"]{
    transform:scale(.92);
}