.services-section[data-service-motion="enabled"] .service-card .service-icon {
  position: relative;
  transform-origin: center;
}

.services-section[data-service-motion="enabled"] .service-card .service-icon::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(255, 229, 0, .42);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(.84);
}

.services-section[data-service-motion="enabled"] .service-card.service-motion-visible .service-icon {
  animation: jjs-service-badge-arrive 640ms cubic-bezier(.2, .78, .25, 1) both;
}

.services-section[data-service-motion="enabled"] .service-card.service-motion-visible .service-icon::after {
  animation: jjs-service-badge-ring 760ms ease-out both;
}

.services-section[data-service-motion="enabled"] .service-card-wide .service-icon-campaign {
  position: absolute;
  top: clamp(22px, 3vw, 32px);
  right: clamp(22px, 3vw, 32px);
  z-index: 2;
}

@keyframes jjs-service-badge-arrive {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 229, 0, 0);
    transform: translateY(3px) scale(.92);
  }
  58% {
    box-shadow: 0 0 0 3px rgba(255, 229, 0, .12);
    transform: translateY(-1px) scale(1.04);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 229, 0, 0);
    transform: translateY(0) scale(1);
  }
}

@keyframes jjs-service-badge-ring {
  0% {
    opacity: .34;
    transform: scale(.84);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-section[data-service-motion="enabled"] .service-card .service-icon,
  .services-section[data-service-motion="enabled"] .service-card .service-icon::after {
    animation: none !important;
  }

  .services-section[data-service-motion="enabled"] .service-card .service-icon::after {
    display: none;
  }
}