/* FADE-IN */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition:
    opacity 820ms var(--ease),
    transform 820ms var(--ease),
    filter 820ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}


/* SERVICES switch fade */

.servicesCard__copy,
.servicesCard__mediaBadge {
  transition:
    opacity 180ms var(--ease),
    transform 180ms var(--ease),
    filter 180ms var(--ease);
  will-change: opacity, transform, filter;
}

.servicesCard.is-switching .servicesCard__copy {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
}

.servicesCard.is-switching .servicesCard__mediaBadge {
  opacity: 0;
  transform: translateY(-4px);
  filter: blur(2px);
}

.servicesCard__progressBar {
  transition: width 260ms var(--ease);
}

.servicesCard__img {
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.servicesCard__img.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .servicesCard__copy,
  .servicesCard__mediaBadge,
  .servicesCard__progressBar,
  .servicesCard__img {
    transition: none;
  }

  .servicesCard.is-switching .servicesCard__copy,
  .servicesCard.is-switching .servicesCard__mediaBadge {
    opacity: 1;
    transform: none;
    filter: none;
  }
}