/**
 * Sistema Universal de Animações Automáticas - BL2GS
 * Detecta e anima elementos automaticamente sem configuração
 */

/* ========================================
   CONFIGURAÇÕES GLOBAIS
======================================== */
:root {
    --animation-duration: 0.8s;
    --animation-delay: 0.1s;
    --animation-distance: 40px;
    --animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   ANIMAÇÕES PARA TÍTULOS (AUTOMÁTICO)
======================================== */

/* Títulos principais */
h1, h2, h3, h4, h5, h6,
.page-title, .section-title, .hero-title,
.intro h1, .intro h2, .intro h3,
.section-header h1, .section-header h2, .section-header h3 {
    opacity: 0;
    transform: translateY(var(--animation-distance));
    transition: all var(--animation-duration) var(--animation-easing);
}

/* Subtítulos e parágrafos */
.subtitle, .section-subtitle, .hero-subtitle,
.intro p, .section-header p,
.lead, .description {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance) * 0.7));
    transition: all var(--animation-duration) var(--animation-easing);
    transition-delay: 0.2s;
}

/* ========================================
   ANIMAÇÕES PARA CARDS (AUTOMÁTICO)
======================================== */

/* Cards e boxes */
.card, .box, .item, .service-item, .feature-item,
.treinamento-card, .palestra-card, .portfolio-item,
.team-member, .testimonial, .service-box {
    opacity: 0;
    transform: translateY(var(--animation-distance)) scale(0.95);
    transition: all var(--animation-duration) var(--animation-easing);
}

/* Hover para cards */
.card:hover, .box:hover, .item:hover, .service-item:hover,
.treinamento-card:hover, .palestra-card:hover, .portfolio-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ========================================
   ANIMAÇÕES PARA BOTÕES (AUTOMÁTICO)
======================================== */

/* Botões */
.btn, .button, .cta-button, .submit-btn,
button[type="submit"], input[type="submit"],
.wp-block-button__link {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance) * 0.5));
    transition: all var(--animation-duration) var(--animation-easing);
    transition-delay: 0.4s;
}

/* Hover para botões */
.btn:hover, .button:hover, .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(122, 91, 160, 0.3);
}

/* ========================================
   ANIMAÇÕES PARA FORMULÁRIOS (AUTOMÁTICO)
======================================== */

/* Campos de formulário */
.form-group, .field-group, .input-group,
input, textarea, select {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance) * 0.6));
    transition: all var(--animation-duration) var(--animation-easing);
}

/* ========================================
   ANIMAÇÕES PARA IMAGENS (AUTOMÁTICO)
======================================== */

/* Imagens */
.image, .photo, .picture, .thumbnail,
.hero-image, .feature-image, .portfolio-image,
img.animate {
    opacity: 0;
    transform: scale(0.9);
    transition: all var(--animation-duration) var(--animation-easing);
}

/* ========================================
   ANIMAÇÕES PARA SEÇÕES (AUTOMÁTICO)
======================================== */

/* Seções completas */
.section, .container, .wrapper,
.hero-section, .about-section, .services-section,
.portfolio-section, .contact-section {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance) * 0.3));
    transition: all var(--animation-duration) var(--animation-easing);
}

/* ========================================
   ANIMAÇÕES PARA NÚMEROS/CONTADORES
======================================== */

/* Números e estatísticas */
.number, .stat, .counter, .metric,
[data-count], .statistic-number {
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--animation-duration) var(--animation-easing);
}

/* ========================================
   ESTADOS VISÍVEIS (APLICADOS VIA JS)
======================================== */

/* Quando elemento está visível */
.animate-in {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Delays sequenciais para múltiplos elementos */
.animate-in:nth-child(1) { transition-delay: 0s; }
.animate-in:nth-child(2) { transition-delay: 0.1s; }
.animate-in:nth-child(3) { transition-delay: 0.2s; }
.animate-in:nth-child(4) { transition-delay: 0.3s; }
.animate-in:nth-child(5) { transition-delay: 0.4s; }
.animate-in:nth-child(6) { transition-delay: 0.5s; }

/* ========================================
   ANIMAÇÕES ESPECIAIS
======================================== */

/* Entrada pela esquerda */
.from-left {
    transform: translateX(-100px) !important;
}

/* Entrada pela direita */
.from-right {
    transform: translateX(100px) !important;
}

/* Rotação */
.rotate-in {
    transform: rotate(-10deg) scale(0.8) !important;
}

/* ========================================
   RESPONSIVIDADE
======================================== */

/* Mobile - animações mais sutis */
@media (max-width: 768px) {
    :root {
        --animation-distance: 25px;
        --animation-duration: 0.6s;
    }
    
    /* Reduzir hover em mobile */
    .card:hover, .box:hover, .item:hover {
        transform: translateY(-4px) scale(1.01);
    }
}

/* Reduzir animações para usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   ANIMAÇÕES ESPECÍFICAS DAS PALESTRAS
======================================== */

/* Manter animações específicas das palestras */
.palestras-page .treinamento-card,
.palestras-page .palestra-card {
    transition: all 0.3s ease;
}

.palestras-page .treinamento-card:hover,
.palestras-page .palestra-card:hover {
    transform: perspective(1000px) rotateX(0) rotateY(0) translateY(-12px);
}

/* ========================================
   INDICADOR DE PROGRESSO
======================================== */

/* Barra de progresso de leitura */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #7A5BA0, #9b7bb8);
    z-index: 9999;
    transition: width 0.1s ease;
}

/* ========================================
   SMOOTH SCROLL
======================================== */

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* ========================================
   LOADING STATES
======================================== */

/* Estado de carregamento */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Fade in inicial da página */
body {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.loaded {
    opacity: 1;
}