/* 
 * Animated Text Color Change Styles
 */

/* Basic setup for the highlighted text */
.section-tagline .has-inline-color.has-base-color {
    position: relative;
    display: inline-block;
}

/* Container for the animated text */
.animated-text-container {
    position: relative;
    display: inline-block;
}

/* Individual letter styling */
.animated-letter {
    display: inline-block;
    color: inherit; /* Start with inherited color */
    transition: color 0.05s linear; /* Smooth transition for color */
    /* Each letter will have its own transition delay applied inline */
}

/* Space styling */
.animated-space {
    display: inline-block;
    width: 0.4em; /* Proper width for a space */
}

/* Animation state - applied when scrolled into view */
.animated-text-container.animate .animated-letter {
    color: #5b96c3; /* The blue color for the animation */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .animated-letter {
        transition: color 0.04s linear; /* Slightly faster on mobile */
    }
}