@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.fade-up{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.fade-in{

    opacity:0;

    animation:fadeIn .8s ease forwards;

}

.scale-in{

    opacity:0;

    animation:scaleIn .6s ease forwards;

}

.float{

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

}

.delay-1{

    animation-delay:.15s;

}

.delay-2{

    animation-delay:.3s;

}

.delay-3{

    animation-delay:.45s;

}

.delay-4{

    animation-delay:.6s;

}

.delay-5{

    animation-delay:.75s;

}

.reveal{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

.card{

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease;

}

.card:hover{

    transform:translateY(-8px);

}

.hero .badge{

    animation:fadeIn .8s ease;

}

.hero h1{

    animation:fadeUp .9s ease;

}

.hero h2{

    animation:fadeUp 1.1s ease;

}

.hero p{

    animation:fadeUp 1.3s ease;

}

.hero-actions{

    animation:fadeUp 1.5s ease;

}

.live-card{

    animation:

        fadeUp 1.7s ease,

        float 6s ease-in-out infinite;

}