.type-animation {
  display: inline-flex;
  width: 0;
  overflow: hidden;
  padding-right: 0.08em;
  position: relative;
}
.type-animation:after {
  content: "";
  background: #f7f3ff;
  position: absolute;
  right: 0;
  top: -0.05em;
  bottom: -0.05em;
  width: 0.08em;
  border-right: 2px solid transparent;
}
.type-animation.animating {
  animation: type 720ms;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}
.type-animation.animating:after {
  animation: cursor 320ms 5.8125 ease-in-out;
}

@keyframes cursor {
  0%, 100% {
    border-color: #f7f3ff;
  }
  50% {
    border-color: #241b5b;
  }
  100% {
    width: 0;
  }
}
@keyframes type {
  25% {
    width: 0.81em;
  }
  50% {
    width: 1.62em;
  }
  75% {
    width: 2.43em;
  }
  100% {
    width: 2.43em;
    padding-right: 0;
  }
}