/* База: скрыто до появления */
.reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .9, .2, 1), filter .9s ease;
    will-change: transform, opacity;
    filter: blur(6px);
}

/* Когда элемент стал видимым */
.reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* 1) POP: легкое увеличение + проявление */
.reveal-pop {
    opacity: 0;
    transform: scale(.96) translate3d(0, 14px, 0);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .9, .2, 1), filter .9s ease;
    filter: blur(6px);
    will-change: transform, opacity;
}

.reveal-pop.is-visible {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(0);
}

/* 2) RISE: плавный подъем снизу */
.reveal-rise {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .7s ease, transform 1s cubic-bezier(.2, .9, .2, 1), filter .9s ease;
    filter: blur(6px);
    will-change: transform, opacity;
}

.reveal-rise.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* 3) SHRINK: "уменьшение" к норме (из чуть большего) */
.reveal-shrink {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .7s ease, transform 1s cubic-bezier(.2, .9, .2, 1), filter .9s ease;
    filter: blur(6px);
    will-change: transform, opacity;
}

.reveal-shrink.is-visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* Уважение reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-pop, .reveal-rise, .reveal-shrink {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}