/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

/* ---- Scroll Reveal Base ---- */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-right"] {
    transform: translateX(-30px);
}

[data-animate="fade-left"] {
    transform: translateX(30px);
}

[data-animate="fade-in"] {
    transform: none;
}

[data-animate].visible {
    opacity: 1;
    transform: translateY(0) translateX(0);
}


/* ---- Float animation for hero cards ---- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-float-1 {
    animation: float 4s ease-in-out infinite;
}

.hero-float-2 {
    animation: float 4s ease-in-out infinite 1s;
}


/* ---- Pulse for phone icon ---- */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(161,167,103,0.4); }
    70% { box-shadow: 0 0 0 12px rgba(161,167,103,0); }
    100% { box-shadow: 0 0 0 0 rgba(161,167,103,0); }
}

.cta-btn-phone {
    animation: pulse 2.5s infinite;
}


/* ---- Subtle background shape drift ---- */
@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20px, -15px) scale(1.02); }
    50% { transform: translate(-10px, 10px) scale(0.98); }
    75% { transform: translate(15px, 5px) scale(1.01); }
}

.hero-shape-1 {
    animation: drift 20s ease-in-out infinite;
}

.hero-shape-2 {
    animation: drift 25s ease-in-out infinite 5s;
}

.hero-shape-3 {
    animation: drift 18s ease-in-out infinite 10s;
}


/* ---- Gradient shimmer for hero highlight ---- */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.hero-highlight::after {
    background-size: 200% 100%;
    animation: shimmer 6s ease-in-out infinite;
}


/* ---- Counter increment animation class ---- */
@keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ---- Flow connector pulse ---- */
@keyframes connectorPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.flow-dot {
    animation: connectorPulse 2s ease-in-out infinite;
}


/* ---- Mobile CTA bounce ---- */
@keyframes bounceIn {
    0% { transform: translateY(100%); }
    60% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}


/* ---- Stagger delays ---- */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="450"] { transition-delay: 0.45s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }
}