/* ===================================
   Animations CSS
   =================================== */

/* Fade In Animation */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 1s ease-out forwards;
}

/* Scroll Dot Animation (Hero Mouse Icon) */
@keyframes scroll-dot {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(8px);
        opacity: 0.3;
    }
}

.animate-scroll-dot {
    animation: scroll-dot 2s ease-in-out infinite;
}

/* Arrow Bounce Animation */
@keyframes arrow-bounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

.animate-arrow-bounce {
    animation: arrow-bounce 2s ease-in-out infinite;
}

/* Slow Bounce Animation (Scroll Indicator) */
@keyframes bounce-slow {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-8px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

/* Marquee Animation (Logo Slider) */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}