.fade{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.fade.active{

opacity:1;

transform:translateY(0);

}

.zoom{

transform:scale(.8);

opacity:0;

transition:1s;

}

.zoom.active{

transform:scale(1);

opacity:1;

}
@keyframes scroll{

0%{

opacity:0;

top:8px;

}

50%{

opacity:1;

}

100%{

opacity:0;

top:24px;

}

}
.fade-up{
    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;
}

.fade-up.active{
    opacity:1;
    transform:translateY(0);
}
/*==================================
SCROLL REVEAL
==================================*/

.reveal{

opacity:0;

transform:translateY(80px);

transition:all 1s cubic-bezier(.22,1,.36,1);

}

.reveal.active{

opacity:1;

transform:translateY(0);

}
/*=====================================================================
   HERO WORD-BY-WORD REVEAL
   Markup is generated by js/animation.js (initHeroWordReveal).
=====================================================================*/

.hero-title .word-wrap{
    display:inline-block;
    overflow:hidden;
    padding-bottom:0.08em;
    margin-bottom:-0.08em;
}

.hero-title .word-inner{
    display:inline-block;
    transform:translateY(115%);
    transition:transform 1s cubic-bezier(.16,1,.3,1);
}

.hero-title.words-ready .word-inner{
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){

    .hero-title .word-inner{
        transition:none;
        transform:none;
    }

}

/*=====================================================================
   MAGNETIC BUTTONS
   .btn / .btn-outline get their transform set inline by
   initMagneticButtons() in js/animation.js — this just keeps the
   movement smooth and cheap to repaint.
=====================================================================*/

.btn,
.btn-outline{
    will-change:transform;
}