/* Version 1.0.2 */

/**
 * Scroll Animations - CSS Puro
 * Animações que são ativadas quando os elementos entram na viewport
 */

/* ============================================================================
   RESET E CONFIGURAÇÕES INICIAIS - MÁXIMA PRIORIDADE
   ============================================================================ */

/* Garantir que elementos animados comecem invisíveis - REGRAS MAIS ESPECÍFICAS */
section .fade-in,
section .slide-up,
section .slide-down,
section .slide-left,
section .slide-right,
section .scale-in,
section .rotate-in,
section .flip-in,
section .bounce-in,
section .zoom-in,
section .stats-counter,
section .differential-card,
section .testimonial-card,
section .partner-logo,
div.fade-in,
div.slide-up,
div.slide-down,
div.slide-left,
div.slide-right,
div.scale-in,
div.rotate-in,
div.flip-in,
div.bounce-in,
div.zoom-in,
div.stats-counter,
div.differential-card,
div.testimonial-card,
div.partner-logo,
h2.fade-in,
h3.fade-in {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Quando animados, mostrar - REGRAS MAIS ESPECÍFICAS */
section .fade-in.animate-in,
section .slide-up.animate-in,
section .slide-down.animate-in,
section .slide-left.animate-in,
section .slide-right.animate-in,
section .scale-in.animate-in,
section .rotate-in.animate-in,
section .flip-in.animate-in,
section .bounce-in.animate-in,
section .zoom-in.animate-in,
section .stats-counter.animate-in,
section .differential-card.animate-in,
section .testimonial-card.animate-in,
section .partner-logo.animate-in,
div.fade-in.animate-in,
div.slide-up.animate-in,
div.slide-down.animate-in,
div.slide-left.animate-in,
div.slide-right.animate-in,
div.scale-in.animate-in,
div.rotate-in.animate-in,
div.flip-in.animate-in,
div.bounce-in.animate-in,
div.zoom-in.animate-in,
div.stats-counter.animate-in,
div.differential-card.animate-in,
div.testimonial-card.animate-in,
div.partner-logo.animate-in,
h2.fade-in.animate-in,
h3.fade-in.animate-in {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================================
   CONFIGURAÇÕES BASE
   ============================================================================ */

/* Elementos que serão animados começam invisíveis */
.scroll-animate {
  opacity: 0 !important;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Quando o elemento está visível na viewport */
.scroll-animate.animate-in {
  opacity: 1 !important;
}

/* ============================================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================================ */

/* Fade In - Aparece suavemente */
.fade-in {
  opacity: 0 !important;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in.animate-in {
  opacity: 1 !important;
}

/* Slide Up - Desliza de baixo para cima */
.slide-up {
  opacity: 0 !important;
  transform: translateY(60px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-up.animate-in {
  opacity: 1 !important;
  transform: translateY(0);
}

/* Slide Down - Desliza de cima para baixo */
.slide-down {
  opacity: 0 !important;
  transform: translateY(-60px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-down.animate-in {
  opacity: 1 !important;
  transform: translateY(0);
}

/* Slide Left - Desliza da direita para esquerda */
.slide-left {
  opacity: 0 !important;
  transform: translateX(60px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-left.animate-in {
  opacity: 1 !important;
  transform: translateX(0);
}

/* Slide Right - Desliza da esquerda para direita */
.slide-right {
  opacity: 0 !important;
  transform: translateX(-60px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-right.animate-in {
  opacity: 1 !important;
  transform: translateX(0);
}

/* Scale In - Cresce do centro */
.scale-in {
  opacity: 0 !important;
  transform: scale(0.8);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scale-in.animate-in {
  opacity: 1 !important;
  transform: scale(1);
}

/* Rotate In - Rotaciona enquanto aparece */
.rotate-in {
  opacity: 0 !important;
  transform: rotate(-10deg) scale(0.9);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rotate-in.animate-in {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1);
}

/* Flip In - Vira como um cartão */
.flip-in {
  opacity: 0 !important;
  transform: perspective(1000px) rotateY(-90deg);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.flip-in.animate-in {
  opacity: 1 !important;
  transform: perspective(1000px) rotateY(0deg);
}

/* Bounce In - Aparece com efeito de quique */
.bounce-in {
  opacity: 0 !important;
  transform: scale(0.3);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in.animate-in {
  opacity: 1 !important;
  transform: scale(1);
}

/* Zoom In - Zoom suave */
.zoom-in {
  opacity: 0 !important;
  transform: scale(0.5);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zoom-in.animate-in {
  opacity: 1 !important;
  transform: scale(1);
}

/* ============================================================================
   DELAYS PARA ANIMAÇÕES ESCALONADAS
   ============================================================================ */

.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-400 {
  transition-delay: 0.4s;
}

.delay-500 {
  transition-delay: 0.5s;
}

.delay-600 {
  transition-delay: 0.6s;
}

.delay-700 {
  transition-delay: 0.7s;
}

.delay-800 {
  transition-delay: 0.8s;
}

/* ============================================================================
   ANIMAÇÕES ESPECIAIS PARA ELEMENTOS ESPECÍFICOS
   ============================================================================ */

/* Stats Cards - Aparecem com contador */
.stats-counter {
  opacity: 0 !important;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stats-counter.animate-in {
  opacity: 1 !important;
  transform: translateY(0);
}

/* Cards de diferenciais - Aparecem em sequência */
.differential-card {
  opacity: 0 !important;
  transform: translateY(40px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.differential-card.animate-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
}

/* Depoimentos - Aparecem com efeito especial */
.testimonial-card {
  opacity: 0 !important;
  transform: translateY(50px) rotateX(15deg);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonial-card.animate-in {
  opacity: 1 !important;
  transform: translateY(0) rotateX(0deg);
}

/* Parceiros - Aparecem com efeito de onda */
.partner-logo {
  opacity: 0 !important;
  transform: translateY(30px) scale(0.8);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.partner-logo.animate-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
}

/* ============================================================================
   ANIMAÇÕES DE HOVER PARA ELEMENTOS ANIMADOS
   ============================================================================ */

/* Hover suave para cards */
.differential-card:hover,
.testimonial-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Hover para logos de parceiros */
.partner-logo:hover {
  transform: scale(1.1);
}

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

/* Reduzir movimento em telas pequenas para melhor performance */
@media (max-width: 768px) {
  .scroll-animate,
  .fade-in,
  .slide-up,
  .slide-down,
  .slide-left,
  .slide-right,
  .scale-in,
  .rotate-in,
  .flip-in,
  .bounce-in,
  .zoom-in,
  .stats-counter,
  .differential-card,
  .testimonial-card,
  .partner-logo {
    transition-duration: 0.6s;
  }

  /* Reduzir distâncias de movimento em mobile */
  .slide-up {
    transform: translateY(30px);
  }

  .slide-down {
    transform: translateY(-30px);
  }

  .slide-left {
    transform: translateX(30px);
  }

  .slide-right {
    transform: translateX(-30px);
  }
}

/* ============================================================================
   ACESSIBILIDADE
   ============================================================================ */

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .scroll-animate,
  .fade-in,
  .slide-up,
  .slide-down,
  .slide-left,
  .slide-right,
  .scale-in,
  .rotate-in,
  .flip-in,
  .bounce-in,
  .zoom-in,
  .stats-counter,
  .differential-card,
  .testimonial-card,
  .partner-logo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   PERFORMANCE
   ============================================================================ */

/* Otimizar para GPU */
.scroll-animate,
.fade-in,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.scale-in,
.rotate-in,
.flip-in,
.bounce-in,
.zoom-in,
.stats-counter,
.differential-card,
.testimonial-card,
.partner-logo {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Remover will-change após animação para economizar memória */
.scroll-animate.animate-in,
.fade-in.animate-in,
.slide-up.animate-in,
.slide-down.animate-in,
.slide-left.animate-in,
.slide-right.animate-in,
.scale-in.animate-in,
.rotate-in.animate-in,
.flip-in.animate-in,
.bounce-in.animate-in,
.zoom-in.animate-in,
.stats-counter.animate-in,
.differential-card.animate-in,
.testimonial-card.animate-in,
.partner-logo.animate-in {
  will-change: auto;
}