.ia {
  width: 52px;
  height: 52px;
  overflow: visible;
  color: var(--color-brand-600);
}

.ia * {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ia .ia-thick {
  stroke-width: 9;
}

.ia .ia-spark,
.ia .ia-node {
  fill: currentColor;
  stroke: none;
}

.ia .ia-row {
  fill: currentColor;
  stroke: none;
  opacity: .55;
}

.ia .ia-bar,
.ia .ia-row,
.ia .ia-sweep,
.ia .ia-spin,
.ia .ia-pulse,
.ia .ia-check,
.ia .ia-chain,
.ia .ia-node,
.ia .ia-wheel,
.ia .ia-spark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ia .ia-bar { transform-origin: 50% 100%; }
.ia .ia-row { transform-origin: 0 50%; }
.ia .ia-spark { opacity: .9; }

.benefit-card__icon--animated.is-playing .ia-bar,
.benefit-card__icon--animated.is-playing .ia-row,
.benefit-card__icon--animated.is-playing .ia-sweep,
.benefit-card__icon--animated.is-playing .ia-spin,
.benefit-card__icon--animated.is-playing .ia-pulse,
.benefit-card__icon--animated.is-playing .ia-check,
.benefit-card__icon--animated.is-playing .ia-chain,
.benefit-card__icon--animated.is-playing .ia-node,
.benefit-card__icon--animated.is-playing .ia-wheel,
.benefit-card__icon--animated.is-playing .ia-spark {
  animation-duration: 1.6s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
}

.benefit-card__icon--animated.is-playing .ia-bar { animation-name: ia-grow; }
.benefit-card__icon--animated.is-playing .ia-sweep { animation-name: ia-sweep; }
.benefit-card__icon--animated.is-playing .ia-spin { animation-name: ia-spin; }
.benefit-card__icon--animated.is-playing .ia-pulse { animation-name: ia-trace; stroke-dasharray: 260; }
.benefit-card__icon--animated.is-playing .ia-check { animation-name: ia-trace; stroke-dasharray: 60; }
.benefit-card__icon--animated.is-playing .ia-chain { animation-name: ia-trace; stroke-dasharray: 160; }
.benefit-card__icon--animated.is-playing .ia-row { animation-name: ia-slide; }
.benefit-card__icon--animated.is-playing .ia-node,
.benefit-card__icon--animated.is-playing .ia-wheel { animation-name: ia-pop; }
.benefit-card__icon--animated.is-playing .ia-spark { animation-name: ia-blink; }

.benefit-card__icon--animated.is-playing .ia-d1 { animation-delay: .14s; }
.benefit-card__icon--animated.is-playing .ia-d2 { animation-delay: .28s; }

@keyframes ia-grow {
  0% { transform: scaleY(.25); }
  55%, 100% { transform: scaleY(1); }
}

@keyframes ia-sweep {
  0% { transform: translate(-10px, 6px) rotate(-9deg); }
  55% { transform: translate(4px, -3px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes ia-spin {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}

@keyframes ia-trace {
  0% { stroke-dashoffset: 300; }
  100% { stroke-dashoffset: 0; }
}

@keyframes ia-slide {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: .55; }
}

@keyframes ia-pop {
  0% { transform: scale(.2); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ia-blink {
  0%, 40% { opacity: 0; }
  60%, 80% { opacity: .9; }
  100% { opacity: .9; }
}

.benefit-card {
  position: relative;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.benefit-card--animated::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--color-brand-500);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.benefit-card--animated:hover::after,
.benefit-card--animated:focus-within::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ia * {
    animation: none !important;
  }

  .ia .ia-row { opacity: .55; }
  .ia .ia-spark { opacity: .9; }
}