.reveal{
    opacity:0;
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.22,1,.36,1),
        filter .75s ease;
    will-change:opacity, transform;
}

.reveal-up{
    transform:translateY(28px);
}

.reveal-down{
    transform:translateY(-28px);
}

.reveal-left{
    transform:translateX(-38px);
}

.reveal-right{
    transform:translateX(38px);
}

.reveal-zoom{
    transform:scale(.94);
}

.reveal-blur{
    transform:translateY(18px);
    filter:blur(8px);
}

.reveal.show{
    opacity:1;
    transform:none;
    filter:blur(0);
}

.delay-1{ transition-delay:.08s; }
.delay-2{ transition-delay:.16s; }
.delay-3{ transition-delay:.24s; }
.delay-4{ transition-delay:.32s; }

.about-graphic{
    animation:floatSoft 5s ease-in-out infinite;
    will-change:transform;
}

.about-floating-card{
    animation:floatCard 4s ease-in-out infinite;
    will-change:transform;
}

@keyframes floatSoft{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

.hero-scroll .scroll-mouse{
    animation:scrollFloat 2.2s ease-in-out infinite;
}

.hero-scroll > i{
    animation:arrowBounce 1.4s ease-in-out infinite;
}

@keyframes scrollFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(8px);
    }
}

@keyframes arrowBounce{
    0%,100%{
        transform:translateY(0);
        opacity:.65;
    }
    50%{
        transform:translateY(6px);
        opacity:1;
    }
}