/* Float */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.float-anim {
    animation: float 5s ease-in-out infinite;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reveal Anim */
.reveal {
    opacity: 0;
}

.reveal.active {
    animation: fadeUp 0.9s ease-out forwards;
}

/* stagger delay helper */
.delay-1 {
    animation-delay: .15s;
}

.delay-2 {
    animation-delay: .3s;
}

.delay-3 {
    animation-delay: .45s;
}

.delay-4 {
    animation-delay: .6s;
}

/* Hero */
@keyframes heroFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes heroUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-bg {
    animation: heroFade 1.2s ease-out forwards;
}

.hero-title {
    opacity: 0;
    animation: heroUp 0.9s ease-out forwards;
    animation-delay: .4s;
}

.hero-text {
    opacity: 0;
    animation: heroUp 0.9s ease-out forwards;
    animation-delay: .65s;
}

.hero-cta {
    opacity: 0;
    animation: heroUp 0.9s ease-out forwards;
    animation-delay: .85s;
}

.hero-image {
    opacity: 0;
    animation: heroUp 1s ease-out forwards;
    animation-delay: 1.1s;
}

/* Reveal Fast */
@keyframes fadeUpFast {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-fast {
    opacity: 0;
}

.reveal-fast.active {
    animation: fadeUpFast 0.45s ease-out forwards;
}