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

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

.page-advocates.is-advocates-animating .advocates-hero__title,
.page-advocates.is-advocates-animating .advocates-hero__intro,
.page-advocates.is-advocates-animating .advocate-card {
  will-change: transform, opacity;
}

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

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

.page-advocates.is-advocates-animating.is-advocates-entered--intro .advocates-hero__intro {
  opacity: 1;
  transform: translateY(0);
}

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

@media (prefers-reduced-motion: reduce) {
  .page-advocates.is-advocates-animating .advocates-hero__title,
  .page-advocates.is-advocates-animating .advocates-hero__intro,
  .page-advocates.is-advocates-animating .advocate-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}