/* ==========================================================================
   Страница зала: анимации, которые есть только здесь. Общие правила
   (появление при прокрутке, наведение) — css/motion.css.
   ========================================================================== */

/* «Смотреть экспонаты» плавно прокручивает к списку. */
html:has(.hall-page) {
  scroll-behavior: smooth;
}

/* У заголовка списка фокус ставит скрипт после перелистывания — без обводки. */
.hall-exhibits__title:focus {
  outline: none;
}

/* ── Первый экран: фото «отъезжает», текст панели поднимается по очереди ── */

.hall-hero__photo .cover-img {
  animation: motion-zoom-out 1.8s var(--motion-ease) both;
}

.hall-hero__number,
.hall-hero__title,
.hall-hero__lead {
  animation: motion-fade-up 0.8s var(--motion-ease) both;
}

.hall-hero__number {
  animation-delay: 0.2s;
}

.hall-hero__title {
  animation-delay: 0.3s;
}

.hall-hero__lead {
  animation-delay: 0.42s;
}

/* Цифры зала: линия над ними прорисовывается слева направо, следом выплывают
   значения (42 и 3 досчитывают от нуля). */
.hall-hero__stats.reveal {
  opacity: 1;
  transform: none;
}

.hall-hero__bottom:has(.hall-hero__stats.reveal)::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--motion-ease) 0.3s;
}

.hall-hero__bottom:has(.hall-hero__stats.is-visible)::before {
  transform: none;
}

.hall-hero__stats.reveal > li {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 0.5s var(--motion-ease),
    transform 0.6s var(--motion-ease);
  transition-delay: 0.5s;
}

.hall-hero__stats.reveal > li:nth-child(2) {
  transition-delay: 0.6s;
}

.hall-hero__stats.reveal > li:nth-child(3) {
  transition-delay: 0.7s;
}

.hall-hero__stats.reveal.is-visible > li {
  opacity: 1;
  transform: none;
}

/* Кнопки появляются после цифр. */
.hall-hero__actions > .reveal {
  transition-delay: calc(var(--reveal-delay, 0s) + 0.75s);
}