.typing-hidden {
    opacity: 0;
    visibility: hidden;
}

.typing-effect {
    display: inline-block;
    overflow: hidden;
    border-right: 2px solid #333;
    white-space: normal; /* <-- FIX: allow wrapping */
    width: 0; /* starting point for animation */
}

/* typing animation based on width */
@keyframes typingEffect {
    from { width: 0; }
    to { width: 100%; }
}

/* blinking cursor */
@keyframes cursorBlink {
    0%, 49% { border-color: transparent; }
    50%, 100% { border-color: #333; }
}

/* .typing-text::after {
    content: '|';
    animation: blinkCursor .6s infinite;
} */

@keyframes blinkCursor {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
}