/* Service choreography: progressive enhancement with a static reduced-motion state. */
.services-motion-ready .service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: opacity .65s, transform .65s, background-color .45s, border-color .45s, box-shadow .45s, color .45s;
}
.services-motion-ready .service-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(280px circle at var(--services-motion-x, 70%) var(--services-motion-y, 0%), #5a92ff30, transparent 75%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.services-motion-ready .service-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #2867e8, #92bdff);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.services-motion-ready .service-card.service-spotlight {
  background: #202b3e;
  color: #f5f8ff;
  border-color: #6898ee;
  box-shadow: 0 13px 32px #1633681a, inset 0 1px 0 #a7c7ff1a;
}
.services-motion-ready .service-spotlight::before { opacity: 1; }
.services-motion-ready .service-spotlight::after {
  animation: services-motion-progress 3.8s linear both;
  animation-play-state: paused;
}
.services-motion-running .service-spotlight::after { animation-play-state: running; }
.services-motion-ready .service-card p,
.services-motion-ready .service-card-top > span,
.services-motion-ready .service-icon,
.services-motion-ready .service-link { transition: color .4s, stroke .4s, border-color .4s; }
.services-motion-ready .service-spotlight p { color: #c1ccdf; }
.services-motion-ready .service-spotlight .service-card-top > span { color: #93baff; }
.services-motion-ready .service-spotlight .service-icon { stroke: #a6c7ff; }
.services-motion-ready .service-spotlight .service-link { border-color: #8ca6ce3b; }
.services-motion-ready .service-spotlight .service-link .icon { color: #a6c7ff; }
.services-motion-ready .service-link .icon { transition: color .4s, transform .3s; }
.services-motion-ready .service-spotlight .service-link .icon { transform: translate(3px, -3px); }
.services-motion-entered .service-card-top,
.services-motion-entered h3,
.services-motion-entered p,
.services-motion-entered .service-link {
  animation: services-motion-enter .75s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--services-motion-delay, 0ms);
}
.services-motion-entered h3 { animation-delay: calc(var(--services-motion-delay, 0ms) + 80ms); }
.services-motion-entered p { animation-delay: calc(var(--services-motion-delay, 0ms) + 130ms); }
.services-motion-entered .service-link { animation-delay: calc(var(--services-motion-delay, 0ms) + 180ms); }
.services-motion-ready .service-spotlight .service-icon { animation: services-motion-icon .75s cubic-bezier(.2, .7, .2, 1); }
.services-motion-controls { display: flex; justify-content: flex-end; margin-top: 14px; }
.services-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  background: #fff;
  color: #596a83;
  font-size: 10px;
  line-height: 1.4;
}
.services-motion-toggle:hover { background: #edf3ff; color: #234d95; }
.services-motion-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.services-motion-ready .service-note { margin-top: 12px; }
@keyframes services-motion-progress { to { transform: scaleX(1); } }
@keyframes services-motion-enter { from { opacity: .1; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes services-motion-icon { 0% { transform: translateY(3px) scale(.88); opacity: .6; } 65% { transform: translateY(-3px) scale(1.07); } 100% { transform: none; opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .services-motion-ready .service-card:not(.reveal-pending):hover { transform: translateY(-6px); }
}
@media (max-width: 650px) {
  .services-motion-controls { justify-content: center; }
  .services-motion-toggle { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-motion-ready .service-card,
  .services-motion-ready .service-card *,
  .services-motion-ready .service-card::before,
  .services-motion-ready .service-card::after { animation: none !important; transition: none !important; }
  .services-motion-ready .service-card:not(.reveal-pending):hover { transform: none; }
  .services-motion-ready .service-spotlight::after { transform: scaleX(1); }
  .services-motion-controls { display: none; }
}
@media print {
  .services-motion-controls { display: none; }
  .services-motion-ready .service-card { box-shadow: none; }
  .services-motion-ready .service-card::after { display: none; }
}