/* ==========================================================================
   Ícones SVG animados
   .ai          = ícone animado (traço herdado da cor do texto)
   .draw        = traço desenhado quando o ícone entra na tela (.is-in)
   Demais classes = movimentos contínuos e sutis de cada ícone
   ========================================================================== */

.ai {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ai * { transform-box: fill-box; }

/* Desenho do traço na entrada */
.ai .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease) .2s;
}
.ai.is-in .draw,
html:not(.js) .ai .draw { stroke-dashoffset: 0; }

/* Check que se desenha em ciclo */
.ai .tick {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ai.is-in .tick { animation: tick-loop 3.2s var(--ease) .4s infinite; }
html:not(.js) .ai .tick { stroke-dashoffset: 0; }
@keyframes tick-loop {
  0% { stroke-dashoffset: 1; }
  30%, 80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}
.ai-check .tick { stroke-width: 2.6; }
.ai-check.is-in .tick { animation: tick-once .8s var(--ease) .6s forwards; }
@keyframes tick-once { to { stroke-dashoffset: 0; } }

/* Play com anel girando */
.ai-play .ring { stroke-dasharray: 4 3.1; animation: spin-ring 8s linear infinite; transform-origin: center; }
.btn:hover .ai-play .ring { animation-duration: 2s; }
@keyframes spin-ring { to { transform: rotate(360deg); } }

/* Pino que quica */
.ai-pin .pin { animation: pin-bounce 2.4s var(--ease) infinite; }
.ai-pin .shadow { fill: currentColor; stroke: none; opacity: .25; transform-origin: center; animation: pin-shadow 2.4s var(--ease) infinite; }
@keyframes pin-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
}
@keyframes pin-shadow {
  0%, 60%, 100% { transform: scaleX(1); opacity: .25; }
  30% { transform: scaleX(.6); opacity: .12; }
}

/* Balão digitando */
.ai-chat .dot { fill: currentColor; stroke: none; animation: typing 1.4s ease-in-out infinite; }
.ai-chat .dot:nth-of-type(2) { animation-delay: .18s; }
.ai-chat .dot:nth-of-type(3) { animation-delay: .36s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-1.8px); opacity: 1; }
}

/* Relógio com ponteiros */
.ai-clock .hand-m { transform-origin: 0% 50%; animation: spin-ring 4s linear infinite; }
.ai-clock .hand-h { transform-origin: 50% 100%; animation: spin-ring 48s linear infinite; }

/* Prédio com janelas acendendo */
.ai-building .win { fill: currentColor; stroke: none; opacity: .25; animation: window 4s ease-in-out infinite; }
.ai-building .win:nth-of-type(2) { animation-delay: .6s; }
.ai-building .win:nth-of-type(3) { animation-delay: 1.2s; }
.ai-building .win:nth-of-type(4) { animation-delay: 1.8s; }
.ai-building .win:nth-of-type(5) { animation-delay: 2.4s; }
@keyframes window {
  0%, 100% { opacity: .25; }
  15%, 45% { opacity: 1; }
}

/* Foguete flutuando com chama */
.ai-rocket .body { animation: hover-y 3s ease-in-out infinite; }
.ai-rocket .flame { transform-origin: 100% 0%; animation: flame .35s ease-in-out infinite alternate, hover-y 3s ease-in-out infinite; }
.path:hover .ai-rocket .body,
.path:hover .ai-rocket .flame { animation-duration: .35s, 1s; }
@keyframes hover-y {
  0%, 100% { translate: 0 0; }
  50% { translate: 1px -1.5px; }
}
@keyframes flame {
  from { transform: scale(.75); opacity: .7; }
  to { transform: scale(1.1); opacity: 1; }
}

/* Gráfico com barras crescendo */
.ai-chart .bar { transform-origin: 50% 100%; animation: bar-grow 3.6s var(--ease) infinite; }
.ai-chart .bar:nth-of-type(2) { animation-delay: .2s; }
.ai-chart .bar:nth-of-type(3) { animation-delay: .4s; }
@keyframes bar-grow {
  0%, 100% { transform: scaleY(.35); }
  40%, 70% { transform: scaleY(1); }
}

/* Documento com assinatura */
.ai-doc .sign { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ai-doc.is-in .sign { animation: tick-loop 3.6s var(--ease) .6s infinite; }

/* Caminhão com rodas girando */
.ai-truck .cab { animation: truck-bump .5s ease-in-out infinite alternate; }
.ai-truck .wheel { transform-origin: center; animation: spin-ring .9s linear infinite; }
.ai-truck .speed { opacity: .5; animation: speed 1s linear infinite; }
@keyframes truck-bump { to { translate: 0 -.6px; } }
@keyframes speed {
  from { translate: 2px 0; opacity: 0; }
  50% { opacity: .6; }
  to { translate: -2px 0; opacity: 0; }
}

/* Etiqueta de preço balançando */
.ai-tag .tag { transform-box: view-box; transform-origin: 7.5px 7.5px; animation: swing 3s ease-in-out infinite; }
@keyframes swing {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -9deg; }
  60% { rotate: 6deg; }
}

/* Megafone com ondas */
.ai-mega .wave { opacity: 0; animation: wave 1.8s ease-out infinite; }
.ai-mega .wave--2 { animation-delay: .3s; }
.ai-mega .horn { transform-origin: 0% 50%; animation: shout 1.8s ease-in-out infinite; }
@keyframes wave {
  0% { opacity: 0; translate: -1.5px 0; }
  40% { opacity: 1; }
  100% { opacity: 0; translate: 1.5px 0; }
}
@keyframes shout {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -5deg; }
}

/* Monitor carregando */
.ai-monitor .load { stroke-dasharray: 1; stroke-dashoffset: 1; animation: load 2.8s var(--ease) infinite; }
@keyframes load {
  0% { stroke-dashoffset: 1; }
  70%, 100% { stroke-dashoffset: 0; }
}

/* Grupo com pessoas acenando */
.ai-group .p1 { animation: nod 2.6s ease-in-out infinite; }
.ai-group .p2 { animation: nod 2.6s ease-in-out 1.3s infinite; }
@keyframes nod {
  0%, 100% { translate: 0 0; }
  20% { translate: 0 -1.2px; }
}

/* Câmera gravando */
.ai-rec .rec { fill: #EF4444; stroke: none; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }

/* Ícone do WhatsApp balançando de leve */
.ai-wiggle { animation: wiggle 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes wiggle {
  0%, 80%, 100% { rotate: 0deg; }
  84% { rotate: -12deg; }
  88% { rotate: 10deg; }
  92% { rotate: -6deg; }
  96% { rotate: 3deg; }
}

/* Mapa de rota da abertura */
.route-map__line { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.route-map__pulse { transform-origin: center; animation: map-pulse 2s ease-out infinite; }
.route-map__pulse--b { animation-delay: 1s; }
@keyframes map-pulse {
  0% { transform: scale(.6); opacity: .5; }
  100% { transform: scale(1.6); opacity: 0; }
}