/* Reveal Animations */
.reveal-text {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    letter-spacing: -0.1em;
    /* Start tighter */
    animation: textReveal 1.4s var(--ease-out-expo) forwards;
}

/* Staggering the name parts */
.reveal-text:nth-child(1) {
    animation-delay: 0.2s;
}

.reveal-text:nth-child(2) {
    animation-delay: 0.4s;
}

.reveal-text:nth-child(3) {
    animation-delay: 0.6s;
}

.reveal-text-delayed {
    opacity: 0;
    letter-spacing: 0em;
    /* Start tighter */
    animation: fadeIn 1.5s var(--ease-out-expo) forwards;
    animation-delay: 1.2s;
}

@keyframes textReveal {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        letter-spacing: -0.02em;
        /* Expand to normal */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
        letter-spacing: 0em;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        letter-spacing: 0.2em;
        /* Expand to wide */
    }
}

/* Scroll Driven Animations */
.scroll-animate {
    /* 
       Transitions removed so JS can "scrub" these values frame-by-frame.
       We only transition unrelated properties if needed.
    */
    will-change: opacity, transform, filter;
    opacity: 0;
    /* Start hidden */
}

/* State: Hidden below (Before entering viewport) */
.scroll-hidden-bottom {
    opacity: 0;
    transform: translateY(100px) scale(0.95);
    filter: blur(10px);
}

/* State: Visible (In viewport) */
.scroll-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* State: Exiting top (Scrolled past) */
.scroll-out-top {
    opacity: 0;
    transform: translateY(-100px) scale(0.9);
    filter: blur(20px);
}