/**
 * Animations CSS - Non-critical, async loaded
 * Optimized for Web Vitals: No impact on FCP, LCP, CLS
 *
 * Button hover effects: color + box-shadow (no translate)
 * Scroll animations: handled via JS IntersectionObserver
 */

/* Animation Variables */
:root {
    --animation-duration-fast: 0.2s;
    --animation-duration-normal: 0.3s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button Hover Effects */
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-gradient:hover,
.btn.btn-gradient:hover {
    box-shadow: 0 8px 24px rgba(41, 156, 231, 0.25);
    filter: brightness(1.05);
    transform: translateY(-2px);
}

/* Secondary/Outline button hover - fill + shadow + lift */
.btn-secondary:hover,
.btn.btn-outline:hover,
.btn-outline:hover {
    box-shadow: 0 6px 20px rgba(41, 156, 231, 0.2);
    transform: translateY(-2px);
}

/* Form buttons hover */
.btn-form:hover {
    box-shadow: 0 6px 20px rgba(171, 139, 226, 0.2);
    filter: brightness(1.08);
}

/* Orange button hover */
.btn.btn-orange:hover {
    box-shadow: 0 8px 24px rgba(240, 127, 114, 0.3);
}

/* White button hover */
.btn-white:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Hero block buttons */
.wp-block-hero-block .btn-gradient:hover {
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.3);
}

.wp-block-hero-block .btn-outline:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

/* Pricing button hover */
.wp-block-pricing .pricing-button:hover {
    box-shadow: 0 6px 20px rgba(41, 156, 231, 0.2);
}

/* Element Transitions */
.btn,
.btn-primary,
.btn-secondary,
.btn-gradient,
.btn-outline,
.btn-form,
.btn-white,
.btn-orange {
    transition:
        background-color var(--animation-duration-fast) var(--animation-easing),
        border-color var(--animation-duration-fast) var(--animation-easing),
        color var(--animation-duration-fast) var(--animation-easing),
        box-shadow var(--animation-duration-normal) var(--animation-easing),
        filter var(--animation-duration-fast) var(--animation-easing),
        transform var(--animation-duration-fast) var(--animation-easing);
}

/* Card hover effects */
.related-post-item,
.blog-article-card {
    transition: box-shadow var(--animation-duration-normal) var(--animation-easing);
}

/* Scroll Animations */
.animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--animation-easing), transform 0.6s var(--animation-easing);
}

.animate-fade-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s var(--animation-easing), transform 0.6s var(--animation-easing);
}

/* Visible state */
.animate-fade-up.is-visible,
.animate-fade-scale.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger delays for children */
.animate-stagger > *:nth-child(1) { transition-delay: 0s; }
.animate-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.animate-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.animate-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.animate-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.animate-stagger > *:nth-child(6) { transition-delay: 0.5s; }

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

    .animate-fade-up,
    .animate-fade-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}