/* ============================================================
   animations.css — состояния появления, keyframes, reduced-motion
   Логика (когда включить класс) живёт в js/animations.js,
   всё оформление движения — здесь.
   ============================================================ */

/* ---------- 1. Scroll-reveal ----------
   Элемент с [data-reveal] скрыт до пересечения вьюпорта.
   Задержка stagger проставляется из JS через --reveal-delay. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease) var(--reveal-delay, 0ms),
              transform var(--dur-slow) var(--ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Вариант для боковых блоков */
[data-reveal="left"] { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.96); }

[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible {
  transform: none;
}

/* Пока JS не подключился, ничего не прячем — контент виден всегда.
   Класс js-ready ставится в main.js первым делом. */
html:not(.js-ready) [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- 2. Подсветка секции после перехода из блока выбора ---------- */
@keyframes target-pulse {
  from { box-shadow: inset 0 0 0 2px var(--gold); }
  to { box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0); }
}
}

.is-targeted {
  animation: target-pulse 1200ms var(--ease);
}

/* ---------- 3. Появление пунктов мобильного меню ---------- */
@keyframes menu-item-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.menu.is-open .menu__link {
  animation: menu-item-in var(--dur-mid) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 50ms + 60ms);
}

/* ---------- 4. Плавное раскрытие FAQ ----------
   Анимацию высоты делает Web Animations API в main.js,
   здесь только подготовка слоя. */
.faq details[open] .faq__panel {
  animation: faq-fade var(--dur-mid) var(--ease);
}

@keyframes faq-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 5. Медленное дыхание свечения в hero ---------- */
@keyframes glow-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, 2%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.hero__wash {
  animation: glow-drift 18s var(--ease) infinite;
}

/* ---------- 6. Полное отключение движения ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__wash,
  .menu.is-open .menu__link,
  .faq details[open] .faq__panel,
  .is-targeted {
    animation: none !important;
  }
}