/* ==========================================================================
   News page — entrance animation on load
   ========================================================================== */

.page-news {
  --news-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --news-enter-duration: 0.65s;
  --news-item-step: 50ms;
  --news-item-duration: 0.4s;
  --news-char-step: 15ms;
  --news-char-duration: 0.2s;
}

.page-news.is-news-animating .news__title,
.page-news.is-news-animating .news__intro-char,
.page-news.is-news-animating .news-filters .news-filter,
.page-news.is-news-animating .news-grid .news-card {
  will-change: transform, opacity;
}

.page-news.is-news-animating .news__title,
.page-news.is-news-animating .news-filters .news-filter,
.page-news.is-news-animating .news-grid .news-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--news-enter-duration) var(--news-enter-ease),
    transform var(--news-enter-duration) var(--news-enter-ease);
}

.page-news.is-news-animating .news__intro-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--news-char-duration) var(--news-enter-ease),
    transform var(--news-char-duration) var(--news-enter-ease);
}

.page-news.is-news-animating.is-news-entered--title .news__title {
  opacity: 1;
  transform: translateY(0);
}

.page-news.is-news-animating.is-news-entered--intro .news__intro-char {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--char-index, 0) * var(--news-char-step));
}

.page-news.is-news-animating.is-news-entered--intro .news-filters .news-filter {
  opacity: 1;
  transform: translateY(0);
  transition-duration: var(--news-item-duration);
  transition-delay: calc(var(--filter-index, 0) * var(--news-item-step));
}

.page-news.is-news-animating.is-news-entered--intro .news-grid .news-card {
  opacity: 1;
  transform: translateY(0);
  transition-duration: var(--news-item-duration);
  transition-delay: calc(var(--news-card-index, 0) * var(--news-item-step));
}

@media (prefers-reduced-motion: reduce) {
  .page-news.is-news-animating .news__title,
  .page-news.is-news-animating .news__intro-char,
  .page-news.is-news-animating .news-filters .news-filter,
  .page-news.is-news-animating .news-grid .news-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}