@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary) }
}

.typing-title,
.typing-subtitle,
.typing-text {
    display: inline-block; /* Changed from default */
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--primary);
    animation:
        typing 3.5s steps(40, end) forwards, /* Added forwards to keep final state */
        blink-caret .75s step-end infinite;
    max-width: fit-content; /* Ensures animation only covers text width */
}

[data-scroll] {
    opacity: 0;
    transition: all 1s ease;
}

[data-scroll].scrolled {
    opacity: 1;
    transform: translateY(0) !important;
}

.slide-up {
    transform: translateY(50px);
}

.slide-left {
    transform: translateX(-50px);
}

.slide-right {
    transform: translateX(50px);
}

.zoom-in {
    transform: scale(0.9);
}