/* =============================================================
   Wireframes animados dos serviços
   Diagramas de blueprint desenhados à mão em SVG — mostram o
   mecanismo real de cada serviço em vez de foto de banco de imagem.
   Técnica de fluxo: um traço curto percorrendo o path via
   stroke-dashoffset. Puro CSS, sem biblioteca, e desliga sozinho
   em prefers-reduced-motion.
   ============================================================= */

.wf {
  width: 100%; height: 100%;
  --w-linha:  #b9c3d6;  /* estrutura */
  --w-forte:  #7d8bA6;  /* contorno de nó */
  --w-texto:  #5c6b87;
  --w-papel:  #ffffff;
  --w-fluxo:  #f86823;  /* o acento só aparece no que está em movimento */
}

/* Estrutura estática do diagrama. */
.wf__linha  { fill: none; stroke: var(--w-linha); stroke-width: 1.25; }
.wf__no     { fill: var(--w-papel); stroke: var(--w-forte); stroke-width: 1.25; }
.wf__leve   { fill: var(--w-linha); opacity: .34; }
.wf__marca  { fill: none; stroke: var(--w-forte); stroke-width: 1.25; stroke-linecap: round; }
.wf__texto  {
  fill: var(--w-texto); font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.wf__texto--peq { font-size: 7.5px; font-weight: 500; letter-spacing: .06em; opacity: .8; }
.wf__grade { stroke: var(--w-linha); stroke-width: .5; opacity: .3; }

/* Traço laranja curto que percorre o caminho: é o "pacote". */
.wf__fluxo {
  fill: none; stroke: var(--w-fluxo); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 14 220;
  animation: wf-correr 2.6s linear infinite;
}
@keyframes wf-correr { from { stroke-dashoffset: 234; } to { stroke-dashoffset: 0; } }

/* Traço que se desenha do início ao fim e some (túnel, provisionamento). */
.wf__tracar {
  fill: none; stroke: var(--w-fluxo); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 240; animation: wf-tracar 3.2s ease-in-out infinite;
}
@keyframes wf-tracar {
  0%   { stroke-dashoffset: 240; }
  45%  { stroke-dashoffset: 0; }
  75%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Nó que acende quando o fluxo chega nele. */
.wf__aceso {
  fill: var(--w-fluxo); opacity: 0;
  animation: wf-piscar 2.6s ease-in-out infinite;
}
@keyframes wf-piscar {
  0%, 55% { opacity: 0; transform: scale(.7); }
  70%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.5); }
}

/* Bloco que entra em cena (VM provisionada, camada implantada). */
.wf__surgir { animation: wf-surgir 3.6s ease-in-out infinite; transform-origin: center; }
@keyframes wf-surgir {
  0%, 8%   { opacity: 0; transform: translateY(6px); }
  22%, 78% { opacity: 1; transform: translateY(0); }
  92%,100% { opacity: 0; transform: translateY(-4px); }
}

/* Contorno que pulsa (monitor saudável, escudo ativo). */
.wf__pulso { animation: wf-pulso 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes wf-pulso {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* Atrasos escalonados: dá a leitura de sequência, não de piscar junto. */
.wf [data-atraso='1'] { animation-delay: .3s; }
.wf [data-atraso='2'] { animation-delay: .6s; }
.wf [data-atraso='3'] { animation-delay: .9s; }
.wf [data-atraso='4'] { animation-delay: 1.2s; }
.wf [data-atraso='5'] { animation-delay: 1.5s; }
.wf [data-atraso='6'] { animation-delay: 1.8s; }

/* Pacote barrado pelo firewall: chega, bate e volta. */
.wf__barrado {
  fill: none; stroke: #c2410c; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 10 200; animation: wf-barrar 2.6s ease-in infinite;
}
@keyframes wf-barrar {
  0%   { stroke-dashoffset: 120; opacity: 1; }
  55%  { stroke-dashoffset: 46;  opacity: 1; }
  70%  { stroke-dashoffset: 52;  opacity: 1; }
  100% { stroke-dashoffset: 52;  opacity: 0; }
}
.wf__x { stroke: #c2410c; stroke-width: 1.6; stroke-linecap: round; fill: none; opacity: 0; animation: wf-x 2.6s ease-in-out infinite; }
@keyframes wf-x { 0%,50% { opacity: 0; } 62%,80% { opacity: 1; } 100% { opacity: 0; } }

/* Linha do gráfico de monitoramento se desenhando. */
.wf__grafico {
  fill: none; stroke: var(--w-fluxo); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 200; animation: wf-grafico 4s ease-in-out infinite;
}
@keyframes wf-grafico {
  0%       { stroke-dashoffset: 200; }
  50%,85%  { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; opacity: .25; }
}

/* Barras de carga do balanceador subindo e descendo. */
.wf__barra { fill: var(--w-fluxo); opacity: .85; animation: wf-carga 2.8s ease-in-out infinite; transform-origin: bottom; }
@keyframes wf-carga {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* No hover do card, o diagrama acelera — dá a sensação de vivo. */
.card-servico:hover .wf__fluxo,
.card-servico:hover .wf__aceso { animation-duration: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .wf__fluxo  { stroke-dasharray: none; opacity: .9; }
  .wf__tracar { stroke-dasharray: none; }
  .wf__grafico{ stroke-dasharray: none; }
  .wf__aceso  { opacity: .9; }
  .wf__barrado, .wf__x { opacity: .9; stroke-dasharray: none; }
  .wf__barra  { transform: scaleY(.7); }
}

/* Em telas estreitas o diagrama encolhe junto e os rótulos ficam
   pequenos demais — aumenta o tipo dentro do SVG para compensar. */
@media (max-width: 560px) {
  .wf__texto     { font-size: 11px; }
  .wf__texto--peq{ font-size: 9.5px; }
}