.typing-animation {
    position: relative;
    display: grid;
    will-change: contents;

    .typed-text,
    .untyped-text {
        will-change: contents;
        grid-area: 1 / 1;
    }
    .untyped-text {
        color: transparent;
    }

    .typed-text::after {
        content: '▌';
        display: inline;
        position: absolute;
    }

    &.typing-done .typed-text::after {
        animation: blink-cursor 1.0s step-end infinite;
    }
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}