/* V28 / Natural colour, a slower entrance, and the light of a portrait studio. */
#team #consultants-grid .consultant-image { position: relative; }
#team #consultants-grid .consultant-image > img { filter: none; }
#team #consultants-grid .consultant-card {
  opacity: 1;
  transform: none;
  transform-origin: center;
  transition: none;
}
.motion-ready #team #consultants-grid .consultant-card:not(.is-visible) {
  opacity: .64;
  transform: translateY(18px) scale(.94);
}
#team #consultants-grid .consultant-card.is-visible {
  animation: consultant-colour-pop 1.6s cubic-bezier(.22, .68, .3, 1) both;
  animation-delay: calc(var(--consultant-order, 0) * .30s);
}
#team #consultants-grid .consultant-image::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(90deg, #FFFFFF00, #FFFFFFA6 50%, #FFFFFF00);
  opacity: 0;
  transform: translateX(-160%) skewX(-12deg);
  animation: consultant-portrait-light 7.8s ease-in-out infinite;
  animation-delay: calc(var(--consultant-order, 0) * -1.2s);
}
@keyframes consultant-colour-pop {
  0% { opacity: .64; transform: translateY(18px) scale(.94); }
  52% { opacity: 1; transform: translateY(-2px) scale(1.02); }
  80% { opacity: 1; transform: translateY(0) scale(.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes consultant-portrait-light {
  0%, 8% { opacity: 0; transform: translateX(-160%) skewX(-12deg); }
  12% { opacity: .26; }
  24% { opacity: 0; transform: translateX(280%) skewX(-12deg); }
  25%, 100% { opacity: 0; transform: translateX(-160%) skewX(-12deg); }
}

/* Follow both shorthands: the shared observer owns play state, including pseudo-elements. */
#team #consultants-grid .consultant-card.is-visible,
#team #consultants-grid .consultant-image::after { animation-play-state: var(--motion-play-state, paused); }
html.motion-paused #team #consultants-grid .consultant-card {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #team #consultants-grid .consultant-card,
  #team #consultants-grid .consultant-card.is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  #team #consultants-grid .consultant-image::after {
    animation: none !important;
    opacity: 0;
    transform: translateX(-160%) skewX(-12deg);
  }
}