/* =====================================================
   SCROLL REVEAL ANIMATIONS
===================================================== */

/* FROM BOTTOM */

.reveal {
    opacity: 0;
    transform: translateY(70px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.16, 1, .3, 1);
}


/* FROM BOTTOM - ALTERNATIVE */

.reveal-up {
    opacity: 0;
    transform: translateY(80px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, .61, .36, 1);
}


/* FROM TOP */

.reveal-down {
    opacity: 0;
    transform: translateY(-80px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, .61, .36, 1);
}


/* FROM LEFT */

.reveal-left {
    opacity: 0;
    transform: translateX(-90px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22, .61, .36, 1);
}


/* FROM RIGHT */

.reveal-right {
    opacity: 0;
    transform: translateX(90px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22, .61, .36, 1);
}


/* =====================================================
   ACTIVE / VISIBLE STATE
===================================================== */

.reveal.show,
.reveal-up.show,
.reveal-down.show,
.reveal-left.show,
.reveal-right.show {
    opacity: 1;
    transform: translate(0, 0);
}


/* =====================================================
   PROJECT REVEAL ANIMATION
===================================================== */

.project-item .project-image {
    transition:
        transform 1.2s cubic-bezier(.16, 1, .3, 1);
}


.project-item .project-content {
    transition:
        opacity 1s ease .15s,
        transform 1s cubic-bezier(.16, 1, .3, 1);
}


/* =====================================================
   PROJECT STAGGER
===================================================== */

.project-item.revealed .project-content {
    animation:
        projectContentReveal 1s
        cubic-bezier(.16, 1, .3, 1)
        .15s both;
}


@keyframes projectContentReveal {

    from {
        opacity: 0;
        transform: translateX(60px);
    }

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

}