/*==========================================================
    TRACKING SYSTEM
    animations.css
==========================================================*/

/*==============================
    DURACIÓN
===============================*/

:root{

    --fast:.25s;

    --normal:.4s;

    --slow:.8s;

}

/*==============================
    ANIMACIONES BASE
===============================*/

.fade-in{

    animation:fadeIn .8s 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 .5s ease forwards;

}

.zoom-out{

    animation:zoomOut .5s ease forwards;

}

.rotate{

    animation:rotate360 1s linear;

}

.float{

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

}

.pulse{

    animation:pulse 2s infinite;

}

.bounce{

    animation:bounce 1.8s infinite;

}

/*==============================
    BOTONES
===============================*/

.btn{

    transition:

    transform .3s,

    box-shadow .3s,

    background .3s;

}

.btn:hover{

    transform:translateY(-4px);

}

.btn:active{

    transform:scale(.96);

}

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

.card{

    transition:

    transform .35s,

    box-shadow .35s;

}

.card:hover{

    transform:translateY(-8px);

}

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

.hero h1{

    animation:fadeDown 1s ease;

}

.hero p{

    animation:fadeUp 1.1s ease;

}

.search{

    animation:zoomIn 1s ease;

}

/*==============================
    TIMELINE
===============================*/

.timeline-item{

    opacity:0;

    transform:translateX(30px);

    animation:timelineEntry .6s forwards;

}

.timeline-item:nth-child(1){

    animation-delay:.2s;

}

.timeline-item:nth-child(2){

    animation-delay:.4s;

}

.timeline-item:nth-child(3){

    animation-delay:.6s;

}

.timeline-item:nth-child(4){

    animation-delay:.8s;

}

.timeline-item:nth-child(5){

    animation-delay:1s;

}

.timeline-item:nth-child(6){

    animation-delay:1.2s;

}

/*==============================
    SEARCH
===============================*/

.search input{

    transition:

    box-shadow .3s,

    transform .3s;

}

.search input:focus{

    transform:scale(1.01);

}

.search button{

    overflow:hidden;

    position:relative;

}

.search button::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );

    transform:translateX(-120%);

}

.search button:hover::after{

    animation:shine .8s;

}

/*==============================
    BADGES
===============================*/

.badge{

    transition:.3s;

}

.badge:hover{

    transform:scale(1.08);

}

/*==============================
    INFO BOX
===============================*/

.info-box{

    transition:.3s;

}

.info-box:hover{

    transform:translateY(-6px);

}

/*==============================
    MAP
===============================*/

.map-box{

    transition:.4s;

}

.map-box:hover{

    transform:scale(1.01);

}

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

.loader{

    animation:spin 1s linear infinite;

}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes zoomOut{

from{

opacity:0;

transform:scale(1.2);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes rotate360{

to{

transform:rotate(360deg);

}

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes shine{

100%{

transform:translateX(120%);

}

}

@keyframes timelineEntry{

to{

opacity:1;

transform:translateX(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;

}

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

.glow:hover{

box-shadow:

0 0 25px rgba(217,4,41,.35);

}

/*==============================
    ICON ANIMATION
===============================*/

.icon-hover{

transition:.3s;

}

.icon-hover:hover{

transform:rotate(15deg) scale(1.15);

}