.reveal {
    --reveal-dur: 0.65s;
    --reveal-offset: 50px;

    opacity: 0;
    transform: translateY(var(--reveal-offset));
    transition: opacity var(--reveal-dur) ease-out, transform var(--reveal-dur) ease-out;
    will-change: opacity, transform;
}

a.reveal {
    display: inline-block;
}

.reveal--from-left {
    transform: translateX(calc(-1 * var(--reveal-offset)));
}

.reveal--from-right {
    transform: translateX(var(--reveal-offset));
}

.hero .reveal--from-left,
.hero .reveal--from-right {
    transform: translateY(var(--reveal-offset));
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* каскад — шаги как на contentformat (75 / 150 / 200 / 300 ms…) */
.reveal[data-delay="1"] { transition-delay: 0.075s; }
.reveal[data-delay="2"] { transition-delay: 0.15s; }
.reveal[data-delay="3"] { transition-delay: 0.2s; }
.reveal[data-delay="4"] { transition-delay: 0.3s; }
.reveal[data-delay="5"] { transition-delay: 0.4s; }
.reveal[data-delay="6"] { transition-delay: 0.5s; }
.reveal[data-delay="7"] { transition-delay: 0.6s; }
.reveal[data-delay="8"] { transition-delay: 0.7s; }

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

@media screen and (max-width: 768px) {
    .reveal {
        --reveal-offset: 28px;
    }

    /* горизонтальный выезд на узком экране даёт горизонтальный скролл */
    .reveal--from-left:not(.is-visible),
    .reveal--from-right:not(.is-visible) {
        transform: translateY(var(--reveal-offset));
    }
}