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

/* Standard reveal */

.reveal {
    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Reveal from left */

.reveal-left {
    opacity: 0;

    transform: translateX(-45px);

    transition:
        opacity 0.12s ease,
        transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Reveal from right */

.reveal-right {
    opacity: 0;

    transform: translateX(45px);

    transition:
        opacity 0.12s ease,
        transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Active state */

.reveal-active {
    opacity: 1;

    transform: translate(0);
}


/* ========================================
   STAGGER ITEMS
======================================== */

.stagger-item {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-item.reveal-active {
    opacity: 1;

    transform: translateY(0);
}


/* ========================================
   ACCESSIBILITY
======================================== */

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

    .reveal,
    .reveal-left,
    .reveal-right,
    .stagger-item {
        opacity: 1;

        transform: none;

        transition: none;
    }

}