/* ====================================
   ANIMAÇÕES CSS NATIVAS
   ==================================== */

/* Keyframes básicas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-5deg) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes progressBar {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* Elementos inicialmente invisíveis */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
}

/* Elementos visíveis após carregar */
.animations-loaded .animate-on-scroll {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Aplicar animações específicas */
.animations-loaded .stat-card {
    animation: scaleIn 0.8s ease-out forwards;
}

.animations-loaded .stat-card:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .stat-card:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .stat-card:nth-child(3) { animation-delay: 0.3s; }
.animations-loaded .stat-card:nth-child(4) { animation-delay: 0.4s; }
.animations-loaded .stat-card:nth-child(5) { animation-delay: 0.5s; }
.animations-loaded .stat-card:nth-child(6) { animation-delay: 0.6s; }

.animations-loaded .tool-card {
    animation: scaleIn 0.6s ease-out forwards;
}

.animations-loaded .benefit {
    animation: fadeInLeft 0.5s ease-out forwards;
}

.animations-loaded .benefit:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .benefit:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .benefit:nth-child(3) { animation-delay: 0.3s; }

.animations-loaded .section {
    animation: fadeIn 0.6s ease-out forwards;
}

.animations-loaded .step {
    animation: fadeInLeft 0.5s ease-out forwards;
}

.animations-loaded .step:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .step:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .step:nth-child(3) { animation-delay: 0.3s; }
.animations-loaded .step:nth-child(4) { animation-delay: 0.4s; }
.animations-loaded .step:nth-child(5) { animation-delay: 0.5s; }
.animations-loaded .step:nth-child(6) { animation-delay: 0.6s; }

.animations-loaded .country-stat {
    animation: scaleIn 0.7s ease-out forwards;
}

.animations-loaded .country-stat:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .country-stat:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .country-stat:nth-child(3) { animation-delay: 0.3s; }
.animations-loaded .country-stat:nth-child(4) { animation-delay: 0.4s; }

.animations-loaded .roi-metric {
    animation: rotateIn 0.6s ease-out forwards;
}

.animations-loaded .roi-metric:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .roi-metric:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .roi-metric:nth-child(3) { animation-delay: 0.3s; }
.animations-loaded .roi-metric:nth-child(4) { animation-delay: 0.4s; }
.animations-loaded .roi-metric:nth-child(5) { animation-delay: 0.5s; }
.animations-loaded .roi-metric:nth-child(6) { animation-delay: 0.6s; }

.animations-loaded .trend-item {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animations-loaded .trend-item:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .trend-item:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .trend-item:nth-child(3) { animation-delay: 0.3s; }
.animations-loaded .trend-item:nth-child(4) { animation-delay: 0.4s; }
.animations-loaded .trend-item:nth-child(5) { animation-delay: 0.5s; }

.animations-loaded .business-types li {
    animation: slideInFromLeft 0.5s ease-out forwards;
}

.animations-loaded .business-types li:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .business-types li:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .business-types li:nth-child(3) { animation-delay: 0.3s; }
.animations-loaded .business-types li:nth-child(4) { animation-delay: 0.4s; }
.animations-loaded .business-types li:nth-child(5) { animation-delay: 0.5s; }

.animations-loaded .pros li,
.animations-loaded .cons li {
    animation: fadeInLeft 0.4s ease-out forwards;
}

.animations-loaded .pros li:nth-child(1),
.animations-loaded .cons li:nth-child(1) { animation-delay: 0.1s; }
.animations-loaded .pros li:nth-child(2),
.animations-loaded .cons li:nth-child(2) { animation-delay: 0.2s; }
.animations-loaded .pros li:nth-child(3),
.animations-loaded .cons li:nth-child(3) { animation-delay: 0.3s; }

/* Animações do header */
.animations-loaded .blog-nav {
    animation: fadeIn 0.4s ease-out 0s forwards;
}

.animations-loaded header h1 {
    animation: fadeInUp 1s ease-out 0.2s forwards;
}

.animations-loaded header .subtitle {
    animation: fadeInUp 0.8s ease-out 0.5s forwards;
}

.animations-loaded .stat {
    animation: scaleIn 0.6s ease-out forwards;
}

.animations-loaded .stat:nth-child(1) { animation-delay: 0.7s; }
.animations-loaded .stat:nth-child(2) { animation-delay: 0.9s; }
.animations-loaded .stat:nth-child(3) { animation-delay: 1.1s; }

/* Animações de hover */
.tool-card:hover .tool-icon {
    animation: spin 0.6s ease-out;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.benefit:hover i {
    animation: bounce 0.4s ease-out;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.stat-card:hover .stat-icon {
    animation: scaleHover 0.3s ease-out;
}

@keyframes scaleHover {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Botão WhatsApp animado */
.whatsapp-float {
    animation: pulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
    animation: wiggle 0.5s ease-out;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(15deg) scale(1.1); }
    75% { transform: rotate(-15deg) scale(1.1); }
}

/* Barra de progresso */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--primary-green);
    z-index: 9999;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s ease-out;
}

/* Ocultar elementos inicialmente */
.stat-card,
.tool-card,
.benefit,
.section,
.step,
.country-stat,
.roi-metric,
.trend-item,
.business-types li,
.pros li,
.cons li,
header h1,
header .subtitle,
.stat,
.blog-nav {
    opacity: 0;
}

/* Mostrar quando carregado */
.animations-loaded .stat-card,
.animations-loaded .tool-card,
.animations-loaded .benefit,
.animations-loaded .section,
.animations-loaded .step,
.animations-loaded .country-stat,
.animations-loaded .roi-metric,
.animations-loaded .trend-item,
.animations-loaded .business-types li,
.animations-loaded .pros li,
.animations-loaded .cons li,
.animations-loaded header h1,
.animations-loaded header .subtitle,
.animations-loaded .stat,
.animations-loaded .blog-nav {
    opacity: 1;
}