/* ==========================================================================
   Общие анимации (главная, «О центре»). Только transform и opacity, без библиотек.
   Механизм — js/motion.js; что именно анимируется на странице — её *-motion.css/js.
   При «уменьшить движение» длительности обнуляет правило в base.css,
   а motion.js не прячет блоки.
   ========================================================================== */

:root {
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Появление снизу при загрузке страницы (первый экран). */
@keyframes motion-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Фото медленно «отъезжает» при загрузке страницы. */
@keyframes motion-zoom-out {
  from {
    scale: 1.08;
  }
}

/* ── Появление при прокрутке (класс .reveal ставит motion.js) ────────────── */

/* Пока скрипт расставляет .reveal, переходы выключены — блоки прячутся сразу. */
.reveal-init .reveal,
.reveal-init .reveal * {
  transition: none !important;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--motion-ease),
    transform 0.7s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Печать: блоки, до которых не долистали, на бумаге видны сразу, — иначе, например,
   нижние вопросы «Частых вопросов» не печатаются (при печати раскрываются все ответы).
   Конечные состояния вложенных анимаций ставит motion.js перед печатью (beforeprint). */
@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
  }
}

/* Счётчики (data-count) не меняют ширину блока, пока досчитывают. */
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

/* Список экспонатов в карточке зала (его наполняют в админке) проявляется целиком,
   одним блоком, чуть позже самой карточки — строки по очереди не выезжают. */
.reveal .hall-card__list-block ul {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s var(--motion-ease),
    transform 0.7s var(--motion-ease);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.3s);
}

.reveal.is-visible .hall-card__list-block ul {
  opacity: 1;
  transform: none;
}

/* ── Наведение: фото приближается, стрелки сдвигаются.
   Карточки не поднимаются и не получают тень — так в проекте не делаем;
   затемнение карточки при наведении — из components.css. ── */

.exhibit-card__photo img,
.material-card__cover img {
  transition: scale 0.6s var(--motion-ease);
}

.more-link .icon,
.btn .icon,
.story-card__go .icon,
.hall-card__item > .icon,
.material-row__arrow {
  transition: translate 0.25s var(--motion-ease), color 0.15s ease;
}

.story-card__go {
  transition: scale 0.25s var(--motion-ease);
}

@media (hover: hover) {
  .exhibit-card:hover .exhibit-card__photo img,
  .material-card:hover .material-card__cover img {
    scale: 1.05;
  }

  .exhibit-card:hover .more-link .icon,
  .material-card:hover .more-link .icon,
  .btn:hover .icon,
  .story-card:hover .story-card__go .icon,
  .hall-card__item:hover > .icon,
  .material-row:hover .material-row__arrow {
    translate: 3px 0;
  }

  .story-card:hover .story-card__go {
    scale: 1.1;
  }
}