/* 
* SINFA Card TEA - Animações
* Arquivo: animations.css
*/

/* Animação de Fade In para elementos ao carregar a página */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

/* Animações com delay para elementos em sequência */
.fade-in-1 { animation-delay: 0.1s; }
.fade-in-2 { animation-delay: 0.3s; }
.fade-in-3 { animation-delay: 0.5s; }
.fade-in-4 { animation-delay: 0.7s; }

/* Animação de flutuação para imagens e cards */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* Animação de pulso para botões e elementos de destaque */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Animação de destaque para preços */
@keyframes highlight {
  0% {
    color: var(--success-color);
  }
  50% {
    color: #008800;
  }
  100% {
    color: var(--success-color);
  }
}

.highlight-animation {
  animation: highlight 2s infinite;
}

/* Animação de entrada para o menu mobile */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slideIn 0.3s forwards;
}

/* Animação de rotação para ícones */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 2s linear infinite;
}

/* Animação de brilho para elementos de destaque */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(144, 238, 144, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(144, 238, 144, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(144, 238, 144, 0.5);
  }
}

.glow {
  animation: glow 2s infinite;
}

/* Aplicação das animações aos elementos */
.hero-section .main-title,
.hero-section .main-description,
.hero-section .cta-wrapper,
.hero-section .additional-info {
  opacity: 0;
}

.hero-section .main-title {
  animation: fadeIn 0.8s ease 0.2s forwards;
}

.hero-section .main-description {
  animation: fadeIn 0.8s ease 0.4s forwards;
}

.hero-section .cta-wrapper {
  animation: fadeIn 0.8s ease 0.6s forwards;
}

.hero-section .additional-info {
  animation: fadeIn 0.8s ease 0.8s forwards;
}

.section-title {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

.feature-card:hover,
.testimonial-card:hover,
.contact-card:hover {
  animation: float 3s ease-in-out infinite;
}

.btn-primary {
  transition: all 0.3s ease;
}

.btn-primary:hover {
  animation: pulse 2s infinite;
}

.current-price {
  animation: highlight 2s infinite;
}

.guarantee-seal {
  animation: float 3s ease-in-out infinite;
}

/* Animação para o scroll suave */
html {
  scroll-behavior: smooth;
}