/* ======================================================
   FIREVIK SUPLEMENTOS
   animations.css
====================================================== */

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

.fade-in{
    animation:fadeIn 1s ease forwards;
}

.fade-up{
    animation:fadeUp .8s ease forwards;
}

.fade-down{
    animation:fadeDown .8s ease forwards;
}

.fade-left{
    animation:fadeLeft .8s ease forwards;
}

.fade-right{
    animation:fadeRight .8s ease forwards;
}

.zoom-in{
    animation:zoomIn .7s ease forwards;
}

.rotate-in{
    animation:rotateIn .8s ease forwards;
}

/* ==========================
   KEYFRAMES
========================== */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    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 zoomIn{

    from{

        opacity:0;
        transform:scale(.75);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes rotateIn{

    from{

        opacity:0;
        transform:rotate(-10deg) scale(.9);

    }

    to{

        opacity:1;
        transform:rotate(0deg) scale(1);

    }

}

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

.btn-primary,
.btn-secondary,
.btn-menu{

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

}

.btn-primary:hover,
.btn-secondary:hover,
.btn-menu:hover{

    transform:translateY(-5px);

    filter:brightness(1.08);

}

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

.card,
.future-item,
.info-box{

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

}

.card:hover,
.future-item:hover,
.info-box:hover{

    transform:translateY(-8px);

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

}

/* ==========================
   IMAGENS
========================== */

.hero-image img,
.about-logo,
.footer-logo{

    transition:
        transform .4s ease,
        filter .4s ease;

}

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

    transform:scale(1.04);

    filter:drop-shadow(0 0 35px rgba(255,90,31,.4));

}

/* ==========================
   LINKS
========================== */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:#ff5a1f;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/* ==========================
   TÍTULOS
========================== */

section h2{

    animation:fadeUp .8s ease;

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(255,90,31,.45);

    }

    70%{

        transform:scale(1.03);

        box-shadow:0 0 0 20px rgba(255,90,31,0);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(255,90,31,0);

    }

}

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

.float{

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

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================
   BRILHO
========================== */

.glow{

    animation:glow 2s ease-in-out infinite alternate;

}

@keyframes glow{

    from{

        filter:drop-shadow(0 0 8px rgba(255,90,31,.25));

    }

    to{

        filter:drop-shadow(0 0 28px rgba(255,90,31,.6));

    }

}

/* ==========================
   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;

}
/* ==========================
   RIPPLE BUTTON EFFECT
========================== */

.btn-primary,
.btn-secondary,
.btn-menu{

    position:relative;
    overflow:hidden;

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    background:rgba(255,255,255,.35);

    animation:ripple .6s linear;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}