/* Базовое состояние: элементы видны (для no-js) */
.reveal {
  --reveal-duration: 0.8s;
  --reveal-easing: ease-out;
  --reveal-translate: 40px;
  --reveal-scale: 0.95;
  
  transition: opacity var(--reveal-duration) var(--reveal-easing), 
              transform var(--reveal-duration) var(--reveal-easing);
}

/* Скрываем элементы, если JS включен */
:not(.no-js) .reveal {
  opacity: 0;
}

/* Состояние "активен" (применяется JS-ом) */
.reveal.active {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Модификаторы направления */
.reveal-left { transform: translateX(calc(var(--reveal-translate) * -1)); }
.reveal-right { transform: translateX(var(--reveal-translate)); }
.reveal-up { transform: translateY(var(--reveal-translate)); }
.reveal-down { transform: translateY(calc(var(--reveal-translate) * -1)); }
.reveal-zoom { transform: scale(var(--reveal-scale)); }

/* Accessibility: Отключение анимаций для тех, кому это нужно */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}