/* -------------------------------------------------------------------------- */
/* File: css/reveal.css
   Purpose: Scroll reveal animations (IntersectionObserver)
*/
/* -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translate3d(var(--reveal-x, 0), 14px, 0) scale(0.985);
    filter: blur(1px);
    transition:
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 520ms ease,
        filter 220ms ease;
    will-change: transform, opacity, filter;
}

.reveal-left {
    --reveal-x: -92px;
}

.reveal-right {
    --reveal-x: 92px;
}

.reveal.in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

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

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}