/* Shared V3.a.5 / V3.b.5 service-journey motion system. */
.services-showcase.services-motion-ready .services-showcase__heading,
.services-showcase.services-motion-ready .services-showcase__card,
.services-showcase.services-motion-ready .services-showcase__cta {
  opacity: 0;
}

.services-showcase.services-motion-ready .services-showcase__heading {
  transform: translate3d(0, 18px, 0);
}

.services-showcase.services-motion-ready .services-showcase__card {
  isolation: isolate;
  transform: translate3d(0, 24px, 0) scale(.965);
  transform-origin: 50% 76%;
}

.services-showcase.services-motion-ready .services-showcase__cta {
  transform: translate3d(0, 14px, 0);
}

.services-showcase.services-motion-ready.is-services-in-view .services-showcase__heading {
  animation: services-heading-in 680ms cubic-bezier(.22, 1, .36, 1) 40ms forwards;
}

.services-showcase.services-motion-ready.is-services-in-view .services-showcase__card {
  animation: services-card-in 720ms cubic-bezier(.22, 1, .36, 1) var(--service-enter-delay, 280ms) forwards;
}

.services-showcase.services-motion-ready.is-services-in-view .services-showcase__cta {
  animation: services-cta-in 600ms cubic-bezier(.22, 1, .36, 1) 1120ms forwards;
}

.services-showcase.services-motion-ready .services-showcase__route-halo,
.services-showcase.services-motion-ready .services-showcase__route-line {
  stroke-dasharray: var(--service-route-length, 3400);
  stroke-dashoffset: var(--service-route-length, 3400);
}

.services-showcase.services-motion-ready .services-showcase__route-halo { opacity: 0; }

.services-showcase.services-motion-ready.is-services-in-view .services-showcase__route-halo {
  animation: services-route-halo-in 1450ms ease-out 170ms forwards;
}

.services-showcase.services-motion-ready.is-services-in-view .services-showcase__route-line {
  animation: services-route-draw 1650ms cubic-bezier(.55, .08, .32, 1) 190ms forwards;
}

.services-showcase.services-motion-ready .services-showcase__route-arrow,
.services-showcase.services-motion-ready .services-showcase__route-terminals circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.services-showcase.services-motion-ready.is-services-in-view .services-showcase__route-arrow {
  animation:
    services-arrow-in 360ms ease-out var(--service-arrow-delay, 760ms) forwards,
    services-arrow-nudge 1800ms ease-in-out calc(var(--service-arrow-delay, 760ms) + 420ms) infinite;
}

.services-showcase.services-motion-ready.is-services-in-view .services-showcase__route-terminals circle {
  animation: services-node-pop 420ms cubic-bezier(.2, 1.35, .45, 1) var(--service-node-delay, 240ms) forwards;
}

.services-showcase__card::after {
  background: radial-gradient(ellipse at 50% 54%, rgba(185, 229, 217, .3), transparent 68%);
  border: 1px solid transparent;
  border-radius: 30px;
  content: "";
  inset: 8px 2% -8px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(.94);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), border-color 260ms ease;
  z-index: -1;
}

.services-showcase__card,
.services-showcase__scene,
.services-showcase__number,
.services-showcase__copy {
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(.22, 1, .36, 1),
    filter 280ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    box-shadow 280ms ease;
}

.services-showcase.has-active-service .services-showcase__card:not(.is-service-active) {
  opacity: .55;
}

.services-showcase .services-showcase__card.is-service-active {
  transform: translate3d(0, -7px, 0) scale(1.018);
  z-index: 3;
}

.services-showcase .services-showcase__card.is-service-active::after {
  border-color: rgba(155, 203, 138, .25);
  opacity: 1;
  transform: scale(1);
}

.services-showcase .services-showcase__card.is-service-active .services-showcase__number {
  background: var(--cis-yellow, #ffd53d);
  border-color: var(--cis-navy, #273447);
  box-shadow:
    0 0 0 7px rgba(255, 213, 61, .17),
    0 9px 18px rgba(39, 52, 71, .14),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  transform: translateX(-50%) scale(1.08);
}

.services-showcase .services-showcase__card.is-service-active .services-showcase__scene {
  filter: saturate(1.06) contrast(1.025);
  transform: scale(1.035);
}

.services-showcase .services-showcase__card.is-service-active .services-showcase__copy {
  border-top-color: var(--cis-yellow, #ffd53d);
}

.services-showcase .services-showcase__card:focus-visible {
  border-radius: 24px;
  outline: 3px solid var(--cis-yellow, #ffd53d);
  outline-offset: 7px;
}

@keyframes services-heading-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes services-card-in {
  58% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes services-cta-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes services-route-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes services-route-halo-in {
  0% { opacity: 0; stroke-dashoffset: var(--service-route-length, 3400); }
  22% { opacity: .7; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes services-arrow-in {
  from { opacity: 0; transform: translateX(-7px) scale(.82); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes services-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes services-node-pop {
  from { opacity: 0; transform: scale(.35); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1000px) {
  .services-showcase.services-motion-ready.is-services-in-view .services-showcase__card {
    animation-duration: 620ms;
  }

  .services-showcase.has-active-service .services-showcase__card:not(.is-service-active) { opacity: .68; }
}

@media (prefers-reduced-motion: reduce) {
  .services-showcase.services-motion-ready .services-showcase__heading,
  .services-showcase.services-motion-ready .services-showcase__card,
  .services-showcase.services-motion-ready .services-showcase__cta,
  .services-showcase.services-motion-ready .services-showcase__route-halo,
  .services-showcase.services-motion-ready .services-showcase__route-line,
  .services-showcase.services-motion-ready .services-showcase__route-arrow,
  .services-showcase.services-motion-ready .services-showcase__route-terminals circle {
    animation: none !important;
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transform: none;
    transition: none;
  }

  .services-showcase.has-active-service .services-showcase__card:not(.is-service-active) { opacity: 1; }
  .services-showcase .services-showcase__card.is-service-active,
  .services-showcase .services-showcase__card.is-service-active .services-showcase__scene { transform: none; }
  .services-showcase .services-showcase__card.is-service-active .services-showcase__number { transform: translateX(-50%); }
}