/* ===========================
   ANIMAÇÕES GERAIS
=========================== */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes fadeDown {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes fadeLeft {

    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes fadeRight {

    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes scaleIn {

    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

/* ===========================
   FLOAT
=========================== */

@keyframes floating {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }

}

/* ===========================
   GLOW
=========================== */

@keyframes glow {

    0% {

        box-shadow:
        0 0 0 rgba(0,150,255,0);

    }

    50% {

        box-shadow:
        0 0 35px rgba(0,150,255,.45);

    }

    100% {

        box-shadow:
        0 0 0 rgba(0,150,255,0);

    }

}

/* ===========================
   PULSE
=========================== */

@keyframes pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }

}

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

@keyframes gradientMove {

    0% {
        background-position: left center;
    }

    50% {
        background-position: right center;
    }

    100% {
        background-position: left center;
    }

}

/* ===========================
   CLASSES DE ANIMAÇÃO
=========================== */

.fade-up {

    opacity: 0;

}

.fade-up.active {

    animation: fadeUp .9s ease forwards;

}

.fade-down {

    opacity: 0;

}

.fade-down.active {

    animation: fadeDown .9s ease forwards;

}

.fade-left {

    opacity: 0;

}

.fade-left.active {

    animation: fadeLeft .9s ease forwards;

}

.fade-right {

    opacity: 0;

}

.fade-right.active {

    animation: fadeRight .9s ease forwards;

}

.scale-in {

    opacity: 0;

}

.scale-in.active {

    animation: scaleIn .8s ease forwards;

}

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

.card {

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

}

.card:hover {

    animation:
    pulse .4s ease,
    glow 2s infinite;

}

/* ===========================
   BOTÕES
=========================== */

.btn:hover,
button:hover,
.back-home:hover {

    animation:
    glow 1.5s infinite;

}

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

.logo {

    animation:
    fadeDown .8s ease;

}

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

.hero h1 {

    animation:
    fadeUp 1s ease;

}

.hero p {

    animation:
    fadeUp 1.2s ease;

}

.hero .btn {

    animation:
    fadeUp 1.4s ease;

}

/* ===========================
   PARTNERS
=========================== */

.partners-grid a {

    transition: .4s;

}

.partners-grid a:hover {

    transform:
    translateY(-8px)
    scale(1.03);

}

/* ===========================
   FAQ
=========================== */

.faq-item {

    transition: .4s;

}

.faq-item:hover {

    transform: translateX(8px);

}

/* ===========================
   HEADER SCROLL
=========================== */

.header-scrolled {

    background: rgba(6,12,24,.95);

    transition: .4s;

}

/* ===========================
   REVEAL SCROLL
=========================== */

.reveal {

    opacity: 0;

    transform: translateY(50px);

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

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

/* ===========================
   DELAYS
=========================== */

.delay-1 {

    animation-delay: .2s;

}

.delay-2 {

    animation-delay: .4s;

}

.delay-3 {

    animation-delay: .6s;

}

.delay-4 {

    animation-delay: .8s;

}

.delay-5 {

    animation-delay: 1s;

}