/* Text reveal animation for typography elements */
.text-reveal {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.text-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    padding-right: 0.1em; /* Add spacing between characters */
    white-space: normal; /* Allow text to wrap */
}

.text-reveal.active span {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delay for each character */
.text-reveal span {
    transition-delay: calc(0.05s * var(--i));
}

/* Fix for the hero section text spacing */
.hero .text-reveal {
    white-space: normal;
    word-spacing: 0.35em; /* Add space between words */
    line-height: 1.6;
    max-width: 600px;
}

/* Add specific spacing for the hero text */
.hero .text-reveal span {
    margin-right: 0.05em;
}

/* Fix the text wrapping issue with text-reveal elements */
.section-header .text-reveal {
    display: inline-block;
    width: auto;
}