/* =============================================================================
 *  Typewriter Animation Styles - Enhanced
 *  ============================================================================= */

/* Base character wrapper */
.tw-char {
    display: inline;
    opacity: 1;
}

/* Fade effect - characters fade in smoothly */
@keyframes tw-fade {
    0% { opacity: 0; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}

.tw-char.tw-fade {
    opacity: 0;
    animation: tw-fade var(--tw-duration, 300ms) ease-out forwards;
}

/* Fade effect for typewriter */
.typewriter-fade {
    display: inline;
    -webkit-mask-image: linear-gradient(to right, black 40%, transparent 100%);
    mask-image: linear-gradient(to right, black 40%, transparent 100%);
}

/* Ensure animations play only once and stay at final state */
.tw-char {
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

/* Blinking cursor for typewriter effect */
@keyframes tw-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent);
    margin-left: 2px;
    animation: tw-cursor-blink 0.8s ease-in-out infinite;
    vertical-align: text-bottom;
}