/* ============================================
   CEMPORCENTOFIXO - ANIMATIONS CSS
   ============================================ */

/* ============================================
   PARTÍCULAS / DECORAÇÕES DO HERO
   ============================================ */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat linear infinite;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100vh) translateX(60px) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================
   HERO ANIMAÇÕES
   ============================================ */
.hero-text-col .hero-badge {
  animation: fadeInDown 0.8s ease both;
  animation-delay: 0.2s;
}

.hero-text-col .hero-title {
  animation: fadeInUp 0.9s ease both;
  animation-delay: 0.4s;
}

.hero-text-col .hero-subtitle {
  animation: fadeInUp 0.9s ease both;
  animation-delay: 0.6s;
}

.hero-text-col .hero-actions {
  animation: fadeInUp 0.9s ease both;
  animation-delay: 0.8s;
}

.hero-text-col .hero-badges {
  animation: fadeInUp 0.9s ease both;
  animation-delay: 1s;
}

.hero-image-col .hero-img-frame {
  animation: fadeInRight 1s ease both;
  animation-delay: 0.6s;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

/* ============================================
   NÚMERO TYPING EFEITO
   ============================================ */
.stat-number {
  animation: countUp 0.1s ease;
}

/* ============================================
   BOTÃO WHATSAPP PULSAÇÃO
   ============================================ */
@keyframes waBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.float-whatsapp:not(:hover) {
  animation: waBounce 3s ease-in-out infinite;
  animation-delay: 2s;
}

/* ============================================
   HOVER CARD 3D TILT
   ============================================ */
.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

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

/* ============================================
   TEXT GRADIENT ANIMATION
   ============================================ */
.text-gradient-anim {
  background: linear-gradient(90deg, #00a85a, #007344, #00c96b, #007344);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   CARD SHINE EFFECT
   ============================================ */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%
  );
  transform: rotate(25deg) translateX(-200%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.card-shine:hover::after {
  transform: rotate(25deg) translateX(400%);
}

/* ============================================
   BORDER BEAM ANIMATION
   ============================================ */
@keyframes borderBeam {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.border-beam {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.border-beam::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, #007344, #00c96b, #007344);
  background-size: 200% auto;
  z-index: -1;
  animation: borderBeam 3s linear infinite;
}

/* ============================================
   ACCORDION ANIMATE
   ============================================ */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content.open {
  max-height: 500px;
}

/* ============================================
   IMAGE REVEAL ON LOAD
   ============================================ */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--verde-principal);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.img-reveal.animating::after {
  transform: translateX(0);
}

.img-reveal.revealed::after {
  transform: translateX(100%);
}

/* ============================================
   COUNTER ANIMATION
   ============================================ */
@keyframes countPop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.counter-pop {
  animation: countPop 0.5s ease forwards;
}

/* ============================================
   STAGGER DELAYS (PARA JS)
   ============================================ */
.stagger-1 { transition-delay: 0.1s !important; }
.stagger-2 { transition-delay: 0.2s !important; }
.stagger-3 { transition-delay: 0.3s !important; }
.stagger-4 { transition-delay: 0.4s !important; }
.stagger-5 { transition-delay: 0.5s !important; }
.stagger-6 { transition-delay: 0.6s !important; }

/* ============================================
   PROGRESS BAR FILL
   ============================================ */
.progress-bar {
  height: 4px;
  background: var(--cinza-borda);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--grad-verde);
  border-radius: 4px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   FLOATING ICONS DECORATION
   ============================================ */
@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-12px) rotate(5deg);
  }
  66% {
    transform: translateY(6px) rotate(-5deg);
  }
}

.float-icon {
  animation: floatIcon 5s ease-in-out infinite;
}

.float-icon:nth-child(2) { animation-delay: 1s; }
.float-icon:nth-child(3) { animation-delay: 2s; }

/* ============================================
   GLITCH EFFECT (TITULO HERO)
   ============================================ */
@keyframes glitch {
  0% { clip-path: inset(0 0 98% 0); transform: translate(-2px, 2px); }
  20% { clip-path: inset(30% 0 60% 0); transform: translate(2px, -2px); }
  40% { clip-path: inset(70% 0 20% 0); transform: translate(-2px, 0); }
  60% { clip-path: inset(10% 0 80% 0); transform: translate(2px, 2px); }
  80% { clip-path: inset(50% 0 30% 0); transform: translate(0, -2px); }
  100% { clip-path: inset(90% 0 5% 0); transform: translate(-2px, 2px); }
}

/* ============================================
   NEON GLOW
   ============================================ */
.neon-verde {
  text-shadow:
    0 0 7px rgba(0,201,107,0.8),
    0 0 21px rgba(0,201,107,0.5),
    0 0 42px rgba(0,201,107,0.3);
}

/* ============================================
   TYPING CURSOR
   ============================================ */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--verde-claro);
}

@keyframes blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================
   SMOOTH UNDERLINE HOVER
   ============================================ */
.underline-hover {
  position: relative;
  display: inline-block;
}

.underline-hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s ease;
}

.underline-hover:hover::after {
  width: 100%;
}

/* ============================================
   SPLIT REVEAL (PARA TÍTULOS)
   ============================================ */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.split-char.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   BOUNCING DOTS (LOADING)
   ============================================ */
.loading-dots {
  display: inline-flex;
  gap: 6px;
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-claro);
  animation: bounceDot 1.2s ease infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounceDot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============================================
   HERO BACKGROUND GRID (EFEITO PREMIUM)
   ============================================ */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(0,115,68,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,115,68,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  animation: gridPan 20s linear infinite;
}

@keyframes gridPan {
  from { background-position: 0 0; }
  to { background-position: 60px 60px; }
}

/* ============================================
   ROTAÇÃO LENTA — DECORAÇÃO
   ============================================ */
@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.slow-rotate {
  animation: slowRotate 30s linear infinite;
}

/* ============================================
   MOBILE MENU ENTRADA
   ============================================ */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-nav.open .nav-link {
  animation: slideDown 0.3s ease both;
}

.header-nav.open .nav-link:nth-child(1) { animation-delay: 0.05s; }
.header-nav.open .nav-link:nth-child(2) { animation-delay: 0.1s; }
.header-nav.open .nav-link:nth-child(3) { animation-delay: 0.15s; }
.header-nav.open .nav-link:nth-child(4) { animation-delay: 0.2s; }
.header-nav.open .nav-link:nth-child(5) { animation-delay: 0.25s; }
.header-nav.open .nav-link:nth-child(6) { animation-delay: 0.3s; }