/* ============================================
   REVEAL / ENTER ANIMATIONS
   ============================================ */

:root {
    --reveal-duration: 600ms;
    --reveal-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --reveal-distance: 12px;
}

.reveal {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition: opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.reveal--up {
    transform: translate3d(0, var(--reveal-distance), 0);
}

.reveal--down {
    transform: translate3d(0, calc(var(--reveal-distance) * -1), 0);
}

.reveal--left {
    transform: translate3d(var(--reveal-distance), 0, 0);
}

.reveal--right {
    transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.reveal--scale {
    transform: translate3d(0, 0, 0) scale(0.96);
    transform-origin: center;
}

.reveal--fade {
    transform: translate3d(0, 0, 0);
}

body:not(.page-enter) [data-enter] {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
}

body.page-enter [data-enter] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 520ms var(--reveal-ease),
        transform 520ms var(--reveal-ease);
    will-change: opacity, transform;
}

body.page-enter [data-enter].is-entered {
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none !important;
        transition: none !important;
    }

    body:not(.page-enter) [data-enter],
    body.page-enter [data-enter] {
        opacity: 1;
        transform: none !important;
        transition: none !important;
    }
}