<h1 id="headline">
<span class="typing" style="--delay:0.5s; color:#f0ff31;">Fast.</span><br>
<span class="typing" style="--delay:1.5s; color:#f0ff31;">Smart.</span><br>
<span class="typing" style="--delay:2.5s; color:#f0ff31;">Global.</span>
</h1>
<style>
.typing {
font-family: inherit;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
letter-spacing: 2px;
display: inline-block;
width: 0;
animation: typing 1.2s steps(8, end) var(--delay) forwards;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
/* Hide everything initially */
#headline {
opacity: 0;
}
/* Fade in after 4 seconds to start typing */
#headline.active {
opacity: 1;
transition: opacity 0.3s ease-in;
}
</style>
<script>
// Wait 3 seconds before triggering the typing animations
setTimeout(() => {
document.getElementById('headline').classList.add('active');
document.querySelectorAll('.typing').forEach(el => el.style.animationPlayState = 'running');
}, 4000);
// Pause animations initially
document.querySelectorAll('.typing').forEach(el => {
el.style.animationPlayState = 'paused';
});
</script>