/* База: скрыто до появления */
.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;
  }
}