.initials-reveal-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ir-item {
    display: flex;
    align-items: baseline;
    cursor: default;
    overflow: hidden;
}

.ir-initial {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: #333;
}

.ir-rest-wrapper {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    
    /* Total loop time: 15s. Each item takes a chunk based on its index. */
    animation: sequence-reveal 15s infinite;
    /* Offset the animation start for each item so they fire consecutively */
    animation-delay: calc(var(--item-index) * (15s / var(--total-items)));
}

.ir-rest {
    font-size: 2rem;
    font-weight: 600;
    color: #666;
    padding-right: 15px;
}

/* Keyframes logic for 4 items in a 15s loop:
   Each item is visible for roughly 20% of the total loop, leaving 20% for "GLAM" idle state at the end.
   0-4%: Expand in
   4-16%: Stay visible
   16-20%: Collapse out
   20-100%: Stay hidden
*/
@keyframes sequence-reveal {
    0% {
        max-width: 0;
        opacity: 0;
    }
    4% {
        max-width: 300px;
        opacity: 1;
    }
    16% {
        max-width: 300px;
        opacity: 1;
    }
    20% {
        max-width: 0;
        opacity: 0;
    }
    100% {
        max-width: 0;
        opacity: 0;
    }
}