/* Initial state: hidden and slightly offset */
.animate-text {
    opacity: 0; 
    transform: translateY(20px);
    transition: opacity 1s var(--cubic-bezier), transform 1s var(--cubic-bezier);
    width: auto;
}

mark {
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Optional: change text color for better contrast */
}

.animate-text-hero {
    opacity: 4;
    transform: translateY(20px);
    transition: opacity 1s var(--cubic-bezier), transform 1s var(--cubic-bezier);
}

.animate-text-hero h1 {}

.animate-visual {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1s var(--cubic-bezier), transform 1s var(--cubic-bezier);
}

/* Active state: visible and in final position */
.is-visible .animate-text {
    opacity: 1;
    transform: translateY(0);
    width: auto;
}

.is-visible .animate-visual {
    opacity: 1;
    transform: scale(1);
}