/* Unified Service section motion engine — progressively enhanced by JS. */
.msvc {
  --msvc-motion-duration: 700ms;
  --msvc-motion-distance: 24px;
  --msvc-motion-stagger-interval: 70ms;
  --msvc-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Nothing is hidden until JavaScript explicitly adds .msvc-motion-pending. */
.msvc .msvc-motion-target,
.msvc .msvc-motion-item {
  transition-property: opacity, transform, filter;
  transition-duration: var(--msvc-motion-duration);
  transition-timing-function: var(--msvc-motion-ease);
  transition-delay: var(--msvc-motion-delay, 0ms);
  will-change: opacity, transform;
}

.msvc .msvc-motion-pending {
  opacity: 0;
}

.msvc .msvc-motion-pending[data-msvc-motion-effect="fade-up"] {
  transform: translate3d(0, var(--msvc-motion-distance), 0);
}

.msvc .msvc-motion-pending[data-msvc-motion-effect="slide-left"] {
  transform: translate3d(calc(var(--msvc-motion-distance) * -1), 0, 0);
}

.msvc .msvc-motion-pending[data-msvc-motion-effect="slide-right"] {
  transform: translate3d(var(--msvc-motion-distance), 0, 0);
}

.msvc .msvc-motion-pending[data-msvc-motion-effect="scale"] {
  transform: scale(.975);
  filter: blur(1px);
}

.msvc .msvc-motion-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Old templates may still carry these classes. Keep them visible and let the
   unified engine own motion only through its explicit runtime classes. */
.msvc .reveal,
.msvc .msvc-stagger > * {
  opacity: 1;
  transform: none;
}

@media (max-width: 767px) {
  .msvc[data-msvc-motion-mobile="reduced"] {
    --msvc-motion-duration: 420ms;
    --msvc-motion-distance: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msvc .msvc-motion-target,
  .msvc .msvc-motion-item,
  .msvc .msvc-motion-pending,
  .msvc .msvc-motion-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}