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

/* ── 1. Первый экран ─────────────────────────────────────────────────────── */

/* Гравюра медленно «отъезжает»; translate — параллакс из home-motion.js. */
.home-hero__bg {
  translate: 0 var(--hero-parallax, 0px);
  animation: home-hero-bg 1.8s var(--motion-ease) both;
  will-change: translate;
}

@keyframes home-hero-bg {
  from {
    scale: 1.08;
    opacity: 0.6;
  }
}

/* Заголовок поднимается по словам из-под маски. Поля по вертикали — чтобы
   маска не срезала выносные элементы букв. */
.home-hero__word {
  display: inline-block;
  overflow: hidden;
  margin-block: -0.12em;
  padding-block: 0.12em;
  vertical-align: top;
}

.home-hero__word > span {
  display: inline-block;
  animation: home-hero-word 0.9s var(--motion-ease) both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.08s);
}

@keyframes home-hero-word {
  from {
    transform: translateY(110%);
  }
}

.home-hero__text,
.home-hero__search {
  animation: motion-fade-up 0.8s var(--motion-ease) both;
}

.home-hero__text {
  animation-delay: 0.75s;
}

.home-hero__search {
  animation-delay: 0.9s;
}

/* ── 2. Появление при прокрутке ──────────────────────────────────────────── */

/* Плашка «Посещение» только проявляется — её строки сами выезжают по очереди. */
.home-visit__panel.reveal {
  transform: none;
}

/* ── 3. «Немного о центре» ───────────────────────────────────────────────── */

/* Фото открывается шторкой сверху вниз, снимок при этом чуть отъезжает.
   Шторка — на самом снимке: полностью обрезанный блок IntersectionObserver не видит. */
.home-about__photo.reveal {
  opacity: 1;
  transform: none;
}

/* Заливку-заглушку убираем только под снимком: фото в админке необязательное,
   без него на месте блока остаётся заливка, как у других карточек без фото. */
.home-about__photo.reveal:has(img) {
  background: transparent;
}

.home-about__photo.reveal img {
  clip-path: inset(0 0 100% 0);
  scale: 1.12;
  transition:
    clip-path 1.1s var(--motion-ease),
    scale 1.4s var(--motion-ease);
}

.home-about__photo.reveal.is-visible img {
  clip-path: inset(0);
  scale: 1;
}

/* Пункты 01 / 02 / 03 по очереди слева направо: сначала прорисовывается линия,
   следом из-под неё выплывает слева номер и текст. --d — задержка пункта. */
.home-about__list.reveal {
  opacity: 1;
  transform: none;
}

.home-about__list.reveal li {
  --d: 0s;
}

.home-about__list.reveal li:nth-child(2) {
  --d: 0.25s;
}

.home-about__list.reveal li:nth-child(3) {
  --d: 0.5s;
}

.home-about__list.reveal li + li {
  border-top-color: transparent;
  background: linear-gradient(var(--line), var(--line)) left top / 0% 1px no-repeat border-box;
  transition: background-size 0.9s var(--motion-ease) var(--d);
}

.home-about__list.reveal li > * {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.6s var(--motion-ease),
    transform 0.7s var(--motion-ease);
  transition-delay: calc(var(--d) + 0.2s);
}

/* Текст выплывает чуть позже номера. */
.home-about__list.reveal li > .home-about__item {
  transition-delay: calc(var(--d) + 0.3s);
}

.home-about__list.reveal.is-visible li {
  background-size: 100% 1px;
}

.home-about__list.reveal.is-visible li > * {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) {
  .home-about__list.reveal li {
    border-top-color: transparent;
    background: linear-gradient(var(--line), var(--line)) left top / 0% 1px no-repeat border-box;
    transition: background-size 0.9s var(--motion-ease) var(--d);
  }
}