/* =========================================
GLOBAL SCROLL ANIMATIONS
========================================= */

.reveal{
    opacity:0;

    transform:
    translateY(80px);

    transition:
    opacity 1s ease,
    transform 1s ease;
}

/* ACTIVE */

.reveal.active{
    opacity:1;

    transform:
    translateY(0);
}

/* =========================================
LEFT REVEAL
========================================= */

.reveal-left{
    opacity:0;

    transform:
    translateX(-80px);

    transition:
    opacity 1s ease,
    transform 1s ease;
}

.reveal-left.active{
    opacity:1;

    transform:
    translateX(0);
}

/* =========================================
RIGHT REVEAL
========================================= */

.reveal-right{
    opacity:0;

    transform:
    translateX(80px);

    transition:
    opacity 1s ease,
    transform 1s ease;
}

.reveal-right.active{
    opacity:1;

    transform:
    translateX(0);
}

/* =========================================
ZOOM REVEAL
========================================= */

.reveal-zoom{
    opacity:0;

    transform:
    scale(0.8);

    transition:
    opacity 1s ease,
    transform 1s ease;
}

.reveal-zoom.active{
    opacity:1;

    transform:
    scale(1);
}

/* =========================================
STAGGER DELAYS
========================================= */

.delay-1{
    transition-delay:0.1s;
}

.delay-2{
    transition-delay:0.2s;
}

.delay-3{
    transition-delay:0.3s;
}

.delay-4{
    transition-delay:0.4s;
}

.delay-5{
    transition-delay:0.5s;
}

/* =========================================
FLOAT ANIMATION
========================================= */

.float-animation{
    animation:
    floatAnimation 4s ease-in-out infinite;
}

@keyframes floatAnimation{

    0%{
        transform:translateY(0px);
    }

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

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

}

/* =========================================
PULSE GLOW
========================================= */

.pulse-glow{
    animation:
    pulseGlow 2.5s infinite;
}

@keyframes pulseGlow{

    0%{
        box-shadow:
        0 0 0 rgba(255,0,0,0.3);
    }

    50%{
        box-shadow:
        0 0 30px rgba(255,0,0,0.5);
    }

    100%{
        box-shadow:
        0 0 0 rgba(255,0,0,0.3);
    }

}