/* ==========================================================================
   HERO: Scroll Indicator Animation
   ========================================================================== */

/* Gentle bob for the text wrapper */
.hero__scroll-text-wrapper {
    animation: textBob 3s ease-in-out infinite;
}

@keyframes textBob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

/* Alternating fade between the two slogans */
.hero__scroll-text--1 {
    animation: textFade1 8s ease-in-out infinite;
}

.hero__scroll-text--2 {
    animation: textFade2 8s ease-in-out infinite;
}

@keyframes textFade1 {
    0%, 35% {
        opacity: 0.77;
    }
    50% {
        opacity: 0;
    }
    85% {
        opacity: 0;
    }
    100% {
        opacity: 0.77;
    }
}

@keyframes textFade2 {
    0% {
        opacity: 0;
    }
    35% {
        opacity: 0;
    }
    50%, 85% {
        opacity: 0.77;
    }
    100% {
        opacity: 0;
    }
}

/* Slow bobbing motion for the outer mouse shape */
.hero__scroll-mouse {
    animation: mouseBob 3s ease-in-out infinite;
}

@keyframes mouseBob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

/* Animate the wheel bouncing down (slower) */
.hero__scroll-wheel {
    animation: scrollBounce 3.5s ease-in-out infinite;
}

@keyframes scrollBounce {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* Fade out the entire indicator when user has scrolled */
.hero__scroll-indicator {
    transition: opacity 0.4s ease;
}

.hero__scroll-indicator--hidden {
    opacity: 0;
    pointer-events: none;
}