.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 1.8s forwards 1s;
}

.type-animation.animating::after {
    animation: cursor-blink 0.6s steps(1) 8;
}

@keyframes type {
    0% {
        width: 0;
    }

    11% {
        width: 0.49em;
    }

    22% {
        width: 0.98em;
    }

    33% {
        width: 1.47em;
    }

    44% {
        width: 1.96em;
    }

    55% {
        width: 2.45em;
    }

    66% {
        width: 2.94em;
    }

    77% {
        width: 3.43em;
    }

    88% {
        width: 3.92em;
    }

    100% {
        width: 5.5em;
        padding-right: 0;
    }

}

@keyframes cursor-blink {

    0%,
    100% {
        border-color: transparent;
        width: 0;
    }

    50% {
        border-color: rgb(93, 78, 116);
    }

}