.principle-icon {
  position: relative;
  width: 60px;
  height: 60px;
  background-size: 60px auto;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.principle-icon:not([data-icon="plus"]):after {
  content: "";
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #555;
}

/* Arrow icon animation */
.principle-icon[data-icon="arrow"] {
  background-position: 0 0;
  transform: rotate(90deg);
}
.principle-card:hover .principle-icon[data-icon="arrow"] {
  animation: arrowAnimation 0.6s steps(15) 2;
}

@keyframes arrowAnimation {
  from { background-position: 0 0; }
  to { background-position: 0 -900px; } /* 60px * 30 frames */
}

/* Plus icon animation */
.principle-icon[data-icon="plus"] {
  background-position: 0 -480px;
}
.principle-card:hover .principle-icon[data-icon="plus"] {
  animation: plusAnimation 0.72s steps(8) forwards;
}

@keyframes plusAnimation {
  from { background-position: 0 -480px; }
  50% { background-position: 0 0; } /* 60px * 75 frames */
  100% { background-position: 0 -480px; }
}

/* Click icon animation */
.principle-icon[data-icon="click"] {
  background-position: 0 0;
}
.principle-card:hover .principle-icon[data-icon="click"] {
  animation: clickAnimation 0.5s steps(19) forwards;
}

@keyframes clickAnimation {
  from { background-position: 0 0; }
  to { background-position: 0 -1140px; } /* 60px * 57 frames */
}

/* Blink icon animation */
.principle-icon[data-icon="blink"] {
  background-position: 0 0;
}
.principle-card:hover .principle-icon[data-icon="blink"] {
  animation: blinkAnimation 0.3s steps(6) forwards;
}

@keyframes blinkAnimation {
  to { background-position: 0 -360px; } /* 60px * 60 frames divide by 2 */
}

/* Tick icon animation */
.principle-icon[data-icon="tick"] {
  background-position: 0 -540px;
}
.principle-card:hover .principle-icon[data-icon="tick"] {
  animation: tickAnimation 0.2s steps(9) forwards;
}

@keyframes tickAnimation {
  from { background-position: 0 0; }
  to { background-position: 0 -540px; }
}