/* ======================================================
   ЭФФЕКТ: появление из блюра при скролле
   Вставляется в Настройки сайта → Ещё → Вставка кода
   → поле "Дополнительный CSS-код" (применяется ко всем
   страницам сайта разом)
   ====================================================== */

.reveal{
  opacity: 0;
  filter: blur(14px);
  transform: translateY(22px);
  transition:
    opacity 0.9s cubic-bezier(.22,.61,.36,1),
    filter 0.9s cubic-bezier(.22,.61,.36,1),
    transform 0.9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, filter, transform;
}

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

/* Классы задержки — добавляют элементу класс "reveal" +
   один из этих классов, чтобы соседние элементы проявлялись
   не одновременно, а друг за другом ("волной") */
.reveal.r-d1{ transition-delay: 0.08s; }
.reveal.r-d2{ transition-delay: 0.16s; }
.reveal.r-d3{ transition-delay: 0.24s; }
.reveal.r-d4{ transition-delay: 0.32s; }
.reveal.r-d5{ transition-delay: 0.40s; }
.reveal.r-d6{ transition-delay: 0.48s; }

/* Отключаем эффект для тех, кто в системе выключил анимации */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}