/**
 * ============================================
 * WHATSAPP ANIMATIONS - SVGs e fade no site inteiro
 * ============================================
 */

/* ============================================
   FADE NO SITE INTEIRO (scroll-reveal)
   Use a classe .scroll-reveal em qualquer seção ou bloco.
   O JS adiciona .visible quando o elemento entra na viewport.
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Diferenciais: animação em escada ao entrar na tela */
.whatsapp-diffs-bento .scroll-reveal {
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}

/* Ajuste fino: nos cards do bento, usa leve scale para ficar mais "Material" */
.whatsapp-diffs-bento .whatsapp-diff-card.scroll-reveal {
  transform: translateY(26px) scale(0.985);
}

.whatsapp-diffs-bento .whatsapp-diff-card.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {

  .scroll-reveal,
  .whatsapp-diffs-bento .scroll-reveal {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   SVG PRINCIPAL ANIMADO (sem flutuação)
   ============================================ */
.whatsapp-svg-animated {
  /* Sem animação de flutuação; efeito de desenho ao entrar na tela é controlado por .svg-draw */
}

/* Círculo principal com pulse */
.whatsapp-circle {
  animation: whatsapp-pulse 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes whatsapp-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.95;
  }
}

/* Ícone do WhatsApp com bounce */
.whatsapp-icon {
  animation: whatsapp-icon-bounce 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes whatsapp-icon-bounce {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  25% {
    transform: translateY(-5px) scale(1.05);
  }

  75% {
    transform: translateY(-3px) scale(1.02);
  }
}

/* Ondas animadas */
.whatsapp-wave {
  transform-origin: center;
  animation: whatsapp-wave-expand 3s ease-in-out infinite;
}

.wave-1 {
  animation-delay: 0s;
}

.wave-2 {
  animation-delay: 1s;
}

.wave-3 {
  animation-delay: 2s;
}

@keyframes whatsapp-wave-expand {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* ============================================
   ANIMAÇÕES DE ENTRADA
   ============================================ */
.whatsapp-hero>* {
  animation: fadeInUp 0.8s ease-out;
}

.whatsapp-hero-tag {
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

.whatsapp-hero-title {
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

.whatsapp-hero-description {
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

.whatsapp-hero-cta {
  animation-delay: 0.4s;
  animation-fill-mode: both;
}

.whatsapp-hero-animation {
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   HOVER EFFECTS
   ============================================ */
.whatsapp-feature-icon {
  transition: all 0.3s ease;
}

.whatsapp-feature-card:hover .whatsapp-feature-icon {
  transform: translateY(-2px);
}

/* ============================================
   LOADING STATES
   ============================================ */
.whatsapp-svg-animated.loading {
  opacity: 0;
  animation: none;
}

.whatsapp-svg-animated.loaded {
  opacity: 1;
}

@keyframes whatsapp-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}