/* Micro-Animations & Keyframes */

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

/* 2. Floating WhatsApp Pulse & Hover */
@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

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

/* 3. Hero Glow Blobs Floating */
@keyframes float-blob {
    0%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translateY(15px) scale(0.9) rotate(240deg);
    }
}

/* 4. Entry Fade-in & Slide-up Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scroll Reveal Classes (Toggled by JavaScript) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Apply entry animations directly to Hero elements on page load */
.animate-fade-in {
    animation: fadeIn 1.2s ease forwards;
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-delay-1 { animation-delay: 0.2s; }
.animate-delay-2 { animation-delay: 0.4s; }
.animate-delay-3 { animation-delay: 0.6s; }

/* Pulsing background effect */
.pulse-slow {
    animation: float-blob 8s infinite alternate ease-in-out;
}

.pulse-slow-reverse {
    animation: float-blob 12s infinite alternate-reverse ease-in-out;
}