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

/* Шапка поднимается при загрузке: тип и дата, заголовок, описание (у истории — ещё
   портрет с именем). */
.article-head__tags,
.article-head__title,
.article-head__lead,
.article-hero {
  animation: motion-fade-up 0.8s var(--motion-ease) both;
}

.article-head__tags {
  animation-delay: 0.05s;
}

.article-head__title {
  animation-delay: 0.15s;
}

.article-head__lead {
  animation-delay: 0.28s;
}

.article-hero {
  animation-delay: 0.36s;
}

/* Обложка открывается шторкой сверху вниз, снимок при этом медленно «отъезжает».
   Шторка — на самой обложке (вместе с фоном-заглушкой и иконкой, если фото нет). */
.article-cover {
  animation: article-cover-curtain 1.2s var(--motion-ease) 0.35s both;
}

.article-cover > .cover-img {
  animation: motion-zoom-out 1.8s var(--motion-ease) 0.35s both;
}

@keyframes article-cover-curtain {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0);
  }
}

/* Разделы текста появляются целиком, вместе со списками: текст заполняется в админке,
   число и длина пунктов заранее неизвестны — поочерёдную анимацию пунктов не делаем. */

/* Цитата: знак «кавычки» проявляется следом за врезкой. */
.article-body > .quote.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;
}

.article-body > .quote.reveal.is-visible .quote__mark {
  opacity: 1;
  scale: 1;
}

/* Фото в тексте открывается шторкой сверху вниз. */
.article-figure.reveal .article-figure__photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--motion-ease) 0.1s;
}

.article-figure.reveal.is-visible .article-figure__photo {
  clip-path: inset(0);
}

/* Видео: превью проявляется, кнопка play появляется следом. */
.article-video.reveal .article-video__play {
  opacity: 0;
  scale: 0.6;
  transition:
    opacity 0.5s var(--motion-ease) 0.4s,
    scale 0.6s var(--motion-ease) 0.4s,
    filter 0.15s ease;
}

.article-video.reveal.is-visible .article-video__play {
  opacity: 1;
  scale: 1;
}

/* Фото ленты «Фотоархива» только проявляются: лента прокручивается по горизонтали,
   сдвиг по вертикали дал бы в ней временную полосу прокрутки. */
.article-gallery__track > .reveal {
  transform: none;
}