[data-reveal] {
    --reveal-x: 0;
    --reveal-y: 0;
    --reveal-delay: 0ms;
}

[data-reveal="up"] { --reveal-y: 18px; }
[data-reveal="left"] { --reveal-x: -18px; }
[data-reveal="right"] { --reveal-x: 18px; }

.reveal-enabled [data-reveal] {
    opacity: 0;
    transform: translate3d(var(--reveal-x), var(--reveal-y), 0);
}

.reveal-enabled [data-reveal].is-revealed {
    animation: reveal-entry 300ms var(--ease-standard) var(--reveal-delay) both;
}

@keyframes reveal-entry {
    from {
        opacity: 0;
        transform: translate3d(var(--reveal-x), var(--reveal-y), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-enabled [data-reveal],
    .reveal-enabled [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
        animation: none;
    }
}