/* css/components/_animations.css */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1.875rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
    
/* DESKTOP ANIMATION: Mouse scroll wheel effect (bouncing indicator) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-0.625rem); 
    }
    60% {
        transform: translateX(-50%) translateY(-0.3125rem);
    }
}

/* DESKTOP ANIMATION: Scrolling dot inside the indicator */
@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(1.25rem);
    }
}

/* MOBILE ANIMATION: Touch drag finger/thumb (larger indicator) */
@keyframes drag {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05); /* Slight pulse to indicate interaction */
    }
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

/* MOBILE ANIMATION: Dot inside the indicator (moving up and down to suggest drag) */
@keyframes drag-thumb {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0.625rem);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-0.625rem);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0.625rem);
    }
}