/* ==========================================================================
   Services news block — entrance animation (any page)
   ========================================================================== */

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

/* Hidden until the matching entrance step completes */
.services-news__inner:not(.is-services-news-entered--title) .services-news__title,
.services-news__inner:not(.is-services-news-entered--slides) .services-news-slider__slide,
.services-news__inner:not(.is-services-news-entered--btn) .services-news__btn,
.services-news__inner:not(.is-services-news-entered--btn) .services-news-slider__dots {
  opacity: 0;
  transform: translateY(24px);
}

.services-news__inner:not(.is-services-news-entered--intro) .services-news__intro,
.services-news__inner:not(.is-services-news-entered--intro) .services-news__intro-char {
  opacity: 0;
}

.services-news__inner:not(.is-services-news-entered--intro) .services-news__intro-char {
  transform: translateY(10px);
}

.services-news__inner.is-services-news-animating .services-news__title,
.services-news__inner.is-services-news-animating .services-news__intro-char,
.services-news__inner.is-services-news-animating .services-news-slider__slide,
.services-news__inner.is-services-news-animating .services-news__btn,
.services-news__inner.is-services-news-animating .services-news-slider__dots {
  will-change: transform, opacity;
}

.services-news__inner.is-services-news-animating .services-news__title,
.services-news__inner.is-services-news-animating .services-news-slider__slide,
.services-news__inner.is-services-news-animating .services-news__btn {
  transition:
    opacity var(--services-news-enter-duration) var(--services-news-enter-ease),
    transform var(--services-news-enter-duration) var(--services-news-enter-ease);
}

.services-news__inner.is-services-news-animating .services-news__intro-char {
  display: inline-block;
  transition:
    opacity var(--services-news-char-duration) var(--services-news-enter-ease),
    transform var(--services-news-char-duration) var(--services-news-enter-ease);
}

.services-news__inner.is-services-news-animating .services-news-slider__dots {
  transition: opacity var(--services-news-item-duration) var(--services-news-enter-ease);
}

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

.services-news__inner.is-services-news-entered--intro .services-news__intro,
.services-news__inner.is-services-news-entered--intro .services-news__intro-char {
  opacity: 1;
  transform: translateY(0);
}

.services-news__inner.is-services-news-animating.is-services-news-entered--intro .services-news__intro-char {
  transition-delay: calc(var(--char-index, 0) * var(--services-news-char-step));
}

.services-news__inner.is-services-news-entered--slides .services-news-slider__slide {
  opacity: 1;
  transform: translateY(0);
}

.services-news__inner.is-services-news-animating.is-services-news-entered--slides .services-news-slider__slide {
  transition-duration: var(--services-news-item-duration);
}

.services-news__inner.is-services-news-animating.is-services-news-entered--slides .services-news-slider__slide {
  transition-delay: calc(var(--news-slide-index, 0) * var(--services-news-item-step));
}

.services-news__inner.is-services-news-entered--btn .services-news__btn,
.services-news__inner.is-services-news-entered--btn .services-news-slider__dots {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .services-news__inner .services-news__title,
  .services-news__inner .services-news__intro,
  .services-news__inner .services-news__intro-char,
  .services-news__inner .services-news-slider__slide,
  .services-news__inner .services-news__btn,
  .services-news__inner .services-news-slider__dots {
    opacity: 1;
    transform: none;
    transition: none;
  }
}