/* =========================
   Reveal (viewport enter)
   ========================= */

/*
  Базовый принцип:
  - JS добавляет классы:
	  .reveal        — элемент участвует
	  .reveal--init  — инициализирован (скрыт)
	  .is-inview     — попал во viewport
  - Вся анимация — через CSS
*/

/* дефолтные значения (опционально можно переопределять) */
:root {
  --reveal-y: 60px;
  --reveal-opacity: 0.8s;
  --reveal-move: 2s;
  --reveal-delay: 0ms;
}

/* стартовое состояние */
.reveal.reveal--init {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  will-change: opacity, transform;
}

/* когда элемент вошёл во viewport */
.reveal.reveal--init.is-inview {
  opacity: 1;
  transform: translateY(0);

  transition-property: opacity, transform;
  transition-timing-function: var(--ease);

  /* раздельные тайминги */
  transition-duration: var(--reveal-opacity), var(--reveal-move);
  transition-timing-function: var(--ease);
  /* общая задержка (опционально) */
  transition-delay: var(--reveal-delay), var(--reveal-delay);
}

/* =========================
   Опциональные модификаторы
   ========================= */

/* мягкое появление */
.reveal--soft {
  --reveal-y: 24px;
  --reveal-opacity: 1s;
  --reveal-move: 2.4s;
}

/* быстрое */
.reveal--fast {
  --reveal-opacity: 0.4s;
  --reveal-move: 0.9s;
}

/* без смещения */
.reveal--fade {
  --reveal-y: 0px;
}

/* =========================
   Accessibility
   ========================= */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal--init,
  .reveal.reveal--init.is-inview {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}