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

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

.page-services.is-services-animating .services-hero__title,
.page-services.is-services-animating .services-hero__intro-char,
.page-services.is-services-animating .service-item {
  will-change: transform, opacity;
}

.page-services.is-services-animating .services-hero__title {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--services-enter-duration) var(--services-enter-ease),
    transform var(--services-enter-duration) var(--services-enter-ease);
}

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

.page-services.is-services-animating .service-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--services-enter-duration) var(--services-enter-ease),
    transform var(--services-enter-duration) var(--services-enter-ease);
}

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

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

.page-services.is-services-animating.is-services-entered--accordion .service-item {
  opacity: 1;
  transform: translateY(0);
  transition-duration: var(--services-item-duration);
  transition-delay: calc(var(--service-index, 0) * var(--services-item-step));
}

@media (prefers-reduced-motion: reduce) {
  .page-services.is-services-animating .services-hero__title,
  .page-services.is-services-animating .services-hero__intro-char,
  .page-services.is-services-animating .service-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}