/* ==========================================================================
   ÍCONES ANIMADOS — Diferenciais
   Adaptação mínima de bibliotecas de ícones animados (Lucide e Iconoir)
   pros ícones dos cards de Diferenciais. Cada SVG-fonte original fica
   salvo em assets/images/icons/diferencias/ com o <style> inteiro da
   respectiva lib (dezenas de classes de animação — gear, spin,
   bell-ring, heart-beat etc. — a maioria não usada por nenhum ícone
   específico). Ao inserir o ícone INLINE no HTML, usamos só os <path>
   reais (com as classes al-*/ai-*), sem aquele <style> inteiro; aqui vai
   somente o CSS das classes que os ícones REALMENTE usam, extraído do
   arquivo fonte, pra não repetir a lib inteira em cada SVG.

   Duas famílias coexistindo neste mesmo arquivo, cada uma na sua seção:
   - Lucide (code-2, pipette): prefixo al-*, classe raiz .animated-lucide-icon
   - Iconoir (whatsapp): prefixo ai-*, classe raiz .animated-iconoir
   Os nomes de classe não colidem entre si (al- vs ai-), então as duas
   convivem sem conflito — nenhuma precisou ser renomeada.

   Como plugar um ícone novo (02–06):
   1. Copiar os <path> (com as classes al-*) do SVG original pro HTML,
      dentro de um <svg class="animated-lucide-icon ..."> inline (ver
      card 01 em index.html como referência).
   2. Se o ícone usar alguma classe al-anim-* que ainda não existe aqui
      embaixo, copiar só aquele bloco (regra + @keyframes) do <style> do
      SVG-fonte original pra este arquivo — ver o catálogo comentado no
      final.
   3. Cor e gatilho de hover (card inteiro) já funcionam automaticamente
      pra qualquer ícone com a classe .animated-lucide-icon — não precisa
      repetir nada disso.

   Gatilho: a lib original ativa tudo com ".animated-lucide-icon:hover"
   (mouse em cima do próprio desenho) — mantido como alternativa. O
   gatilho principal pedido é o hover do CARD inteiro
   (.differentials__card:hover .animated-lucide-icon ...).
   prefers-reduced-motion já é coberto pelo reset global do site
   (reset.css zera a duration de toda animação/transition da página) —
   não precisa de tratamento extra aqui, e o ícone nunca fica escondido
   (o desenho é feito via stroke, que não depende da animação). */

/* ---- Cores: mapeia as variáveis da lib pro azul/roxo da marca ----
   .al-primary/.al-secondary (extraídas abaixo, idênticas ao SVG
   original) já leem --animated-lucide-primary/--animated-lucide-secondary
   via var() com fallback — só definimos essas duas variáveis uma vez
   aqui; qualquer ícone da família herda automaticamente, sem precisar
   de CSS extra por ícone. */
.animated-lucide-icon {
  --animated-lucide-primary: var(--color-accent);
  --animated-lucide-secondary: var(--color-accent-2);
}

.al-primary { stroke: var(--animated-lucide-primary, var(--al-primary, currentColor)); }
.al-secondary { stroke: var(--animated-lucide-secondary, var(--al-secondary, currentColor)); }

/* ---- Atraso escalonado entre partes do ícone (stagger) ---- */
.al-delay-0 { --al-delay: 0ms; }
.al-delay-1 { --al-delay: 80ms; }
.al-delay-2 { --al-delay: 160ms; }
.al-delay-3 { --al-delay: 240ms; }
.al-delay-4 { --al-delay: 320ms; }
.al-delay-5 { --al-delay: 400ms; }
.al-delay-6 { --al-delay: 480ms; }
.al-delay-7 { --al-delay: 560ms; }

/* ---- al-anim-fill: preenche com fill-opacity leve (usada pelo code-2) ---- */
.al-anim-fill {
  fill: currentColor;
  fill-opacity: 0;
  transition: fill-opacity 500ms ease var(--al-delay, 0ms);
}

.animated-lucide-icon:hover .al-anim-fill,
.differentials__card:hover .animated-lucide-icon .al-anim-fill {
  fill-opacity: 0.18;
}

/* ---- al-anim-fade: fade-in com leve "pop" de escala (usada pelo code-2) ---- */
.animated-lucide-icon:hover .al-anim-fade,
.differentials__card:hover .animated-lucide-icon .al-anim-fade {
  animation: al-fade-pop 500ms ease var(--al-delay, 0ms) both;
}

@keyframes al-fade-pop {
  0% { opacity: 0.3; transform: scale(0.92); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- al-anim-scale-pop: "pop" de escala no próprio elemento (usada pelo
   pipette) ---- */
.al-anim-scale-pop {
  transform-origin: center;
}

.animated-lucide-icon:hover .al-anim-scale-pop,
.differentials__card:hover .animated-lucide-icon .al-anim-scale-pop {
  animation: al-scale-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--al-delay, 0ms) both;
}

@keyframes al-scale-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---- Catálogo de classes da lib Lucide AINDA NÃO extraídas (nenhum
   ícone atual usa) — ao adicionar os próximos ícones (03, 05, 06), se
   algum for da família Lucide e usar uma destas, copiar a regra +
   @keyframes correspondente do <style> do SVG-fonte original pra este
   arquivo:
   al-anim-draw, al-anim-draw-line, al-anim-dot-appear, al-anim-bar,
   al-anim-pulse-element, al-anim-gear, al-anim-nudge, al-anim-bell-ring,
   al-anim-heart-beat, al-anim-rocket-lift, al-anim-handle-lift,
   al-anim-page-turn, al-anim-menu-line, al-anim-mail-flap, al-anim-shake,
   al-anim-spin ---- */

/* ==========================================================================
   Iconoir (prefixo ai-*) — mesma estrutura da lib Lucide acima (mesmos
   nomes de classe de animação, mesma lógica de delay/gatilho), só que
   com outro prefixo e outra classe raiz (.animated-iconoir em vez de
   .animated-lucide-icon). Usado pelo whatsapp.svg (card 04). */

/* ---- Cores: mesmo princípio da seção Lucide, mapeando pro azul/roxo
   da marca — .ai-primary/.ai-secondary (extraídas abaixo, idênticas ao
   SVG original) já leem --animated-iconoir-primary/--animated-iconoir-secondary
   via var() com fallback. */
.animated-iconoir {
  --animated-iconoir-primary: var(--color-accent);
  --animated-iconoir-secondary: var(--color-accent-2);
}

.ai-primary { stroke: var(--animated-iconoir-primary, var(--ai-primary, currentColor)); }
.ai-secondary { stroke: var(--animated-iconoir-secondary, var(--ai-secondary, currentColor)); }

/* ---- Atraso escalonado entre partes do ícone (stagger) ---- */
.ai-delay-0 { --ai-delay: 0ms; }
.ai-delay-1 { --ai-delay: 80ms; }
.ai-delay-2 { --ai-delay: 160ms; }
.ai-delay-3 { --ai-delay: 240ms; }
.ai-delay-4 { --ai-delay: 320ms; }
.ai-delay-5 { --ai-delay: 400ms; }
.ai-delay-6 { --ai-delay: 480ms; }
.ai-delay-7 { --ai-delay: 560ms; }

/* ---- ai-anim-scale-pop: "pop" de escala no próprio elemento (usada
   pelo whatsapp). O keyframe @ai-scale-pop da lib Iconoir é idêntico,
   valor a valor, ao @al-scale-pop já extraído acima pro pipette — em vez
   de duplicar o mesmo keyframe com outro nome, a animação abaixo
   reaproveita @al-scale-pop diretamente. Isso não altera a animação
   original do WhatsApp: é o mesmíssimo movimento, só evita repetir um
   bloco idêntico. */
.ai-anim-scale-pop {
  transform-origin: center;
}

.animated-iconoir:hover .ai-anim-scale-pop,
.differentials__card:hover .animated-iconoir .ai-anim-scale-pop {
  animation: al-scale-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--ai-delay, 0ms) both;
}

/* ---- Catálogo de classes da lib Iconoir AINDA NÃO extraídas (nenhum
   ícone atual usa) — mesmos nomes/keyframes da família Lucide, só com
   prefixo ai-: ai-anim-fill, ai-anim-draw, ai-anim-draw-line,
   ai-anim-fade, ai-anim-dot-appear, ai-anim-bar, ai-anim-pulse-element,
   ai-anim-gear, ai-anim-nudge, ai-anim-bell-ring, ai-anim-heart-beat,
   ai-anim-rocket-lift, ai-anim-handle-lift, ai-anim-page-turn,
   ai-anim-menu-line, ai-anim-mail-flap, ai-anim-shake, ai-anim-spin ---- */