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

/* ── 1. Обложка: фото «отъезжает», адрес, заголовок и текст поднимаются ── */

.about-intro__photo {
  animation: motion-zoom-out 1.8s var(--motion-ease) both;
}

.about-intro__place,
.about-intro__title,
.about-intro__lead {
  animation: motion-fade-up 0.8s var(--motion-ease) both;
}

.about-intro__place {
  animation-delay: 0.2s;
}

.about-intro__title {
  animation-delay: 0.32s;
}

.about-intro__lead {
  animation-delay: 0.46s;
}

/* ── 2. История: пункты 01–04 выплывают слева, линия у номера прорисовывается ── */

.about-history__point.reveal {
  transform: translateX(-24px);
}

.about-history__point.reveal.is-visible {
  transform: none;
}

.about-history__point.reveal .about-history__number::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--motion-ease);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.15s);
}

.about-history__point.reveal.is-visible .about-history__number::after {
  transform: none;
}

/* Десктоп: пункты стоят колонками (01, 02 слева, 03, 04 справа). Сначала левая колонка,
   затем правая — линии 03 и 04 продолжают линии 01 и 02, как одна полоса слева направо. */
@media (min-width: 768px) {
  .about-history__point.reveal:nth-child(1) {
    transition-delay: 0s;
  }

  .about-history__point.reveal:nth-child(2) {
    transition-delay: 0.12s;
  }

  .about-history__point.reveal:nth-child(3) {
    transition-delay: 0.6s;
  }

  .about-history__point.reveal:nth-child(4) {
    transition-delay: 0.72s;
  }

  .about-history__point.reveal:nth-child(1) .about-history__number::after {
    transition-delay: 0.15s;
  }

  .about-history__point.reveal:nth-child(2) .about-history__number::after {
    transition-delay: 0.27s;
  }

  .about-history__point.reveal:nth-child(3) .about-history__number::after {
    transition-delay: 0.85s;
  }

  .about-history__point.reveal:nth-child(4) .about-history__number::after {
    transition-delay: 0.97s;
  }
}

/* Цитата: знак «кавычки» проявляется следом за врезкой. */
.quote--about.reveal .quote__mark {
  opacity: 0;
  scale: 0.6;
  transition:
    opacity 0.5s var(--motion-ease),
    scale 0.6s var(--motion-ease);
  transition-delay: 0.3s;
}

.quote--about.reveal.is-visible .quote__mark {
  opacity: 1;
  scale: 1;
}

/* Хронология: линия от года прорисовывается слева направо. */
.about-timeline__item.reveal .about-timeline__head::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--motion-ease);
  transition-delay: calc(var(--step, 0s) + 0.45s);
}

.about-timeline__item.reveal.is-visible .about-timeline__head::after {
  transform: none;
}

/* Хронология — путь по годам слева направо: подложка карточки раскрывается,
   следом появляется год и выплывает текст. Шаг между карточками вдвое больше
   обычного (--reveal-delay × 2), чтобы читался порядок лет. */
.about-timeline__item.reveal {
  --plate: var(--surface);
  --step: calc(var(--reveal-delay, 0s) * 2);
  position: relative;
  isolation: isolate;
  background: transparent;
  opacity: 1;
  transform: none;
}

.about-timeline__item--current.reveal {
  --plate: var(--brown);
}

.about-timeline__item.reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--plate);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--motion-ease);
  transition-delay: var(--step);
}

.about-timeline__item.reveal .about-timeline__year {
  opacity: 0;
  scale: 0.7;
  transition:
    opacity 0.4s var(--motion-ease),
    scale 0.5s var(--motion-ease);
  transition-delay: calc(var(--step) + 0.35s);
}

.about-timeline__item.reveal .about-timeline__text {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 0.5s var(--motion-ease),
    transform 0.6s var(--motion-ease);
  transition-delay: calc(var(--step) + 0.45s);
}

.about-timeline__item.reveal.is-visible::before {
  clip-path: inset(0);
}

.about-timeline__item.reveal.is-visible .about-timeline__year {
  opacity: 1;
  scale: 1;
}

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

/* Фотоматериалы открываются шторкой сверху вниз, снимок чуть отъезжает. */
.about-photos__item.reveal .about-photos__photo {
  background: transparent;
}

.about-photos__item.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);
  transition-delay: var(--reveal-delay, 0s);
}

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

/* ── 4. Посещение: тёмная карточка только проявляется — строки дней,
   шаги записи и услуги выплывают слева по очереди. ── */

.about-hours.reveal {
  transform: none;
}

.about-hours__day.reveal,
.about-booking__step.reveal,
.about-services__item.reveal,
.about-contacts__row.reveal {
  transform: translateX(-20px);
}

.about-hours__day.reveal.is-visible,
.about-booking__step.reveal.is-visible,
.about-services__item.reveal.is-visible,
.about-contacts__row.reveal.is-visible {
  transform: none;
}