/* COMPONENTE — o desvio (assinatura gráfica do funil) */

/* ============================================================================
   Traçado, rótulos e movimento do diagrama gerado por
   js/ui/components/desvio.js. Usado na HOME (destinos genéricos) e na tela 1
   do CINEMA (com os números reais da pessoa). Espessura/opacidade dos ramos
   vêm por atributo do componente (no cinema são proporcionais ao valor);
   aqui ficam cor, tipografia e as animações.

   O LAYOUT (largura máxima, margens, tamanho de fonte por breakpoint) é de
   quem usa: css/views/home.css e css/views/cinema.css.
   ========================================================================== */

.desvio-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.desvio-svg .flux { fill: none; stroke-linecap: round; }
/* o tronco é seu: Mel, cheio */
.desvio-svg .tronco { stroke: var(--accent); stroke-width: 3; }
/* os desvios são dos outros: Âmbar — espessura/opacidade por atributo */
.desvio-svg .ramo { stroke: var(--accent-deep); }
/* o que chega até você: um fio pontilhado de 1px — o contraste com o
   tronco de 3px É a mensagem */
.desvio-svg .resto {
  fill: none;
  stroke: var(--text-subtle);
  stroke-width: 1;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
  opacity: 0.7;
}

.desvio-svg .lbl {
  font-family: var(--font-mono);
  font-size: 11px;               /* unidades do viewBox: escala com o svg */
  letter-spacing: 0.06em;
}
.desvio-svg .lbl.voce  { fill: var(--accent); font-weight: var(--weight-bold); }
.desvio-svg .lbl.outro { fill: var(--text-subtle); }
.desvio-svg .lbl.sobra { fill: var(--text-faint); }
/* a linha de valor (cinema): o número da pessoa, em destaque */
.desvio-svg .lbl .v { fill: var(--text-strong); font-weight: var(--weight-bold); }

/* Movimento de entrada: a linha se DESENHA da mão para fora, os ramos
   partem depois, rótulos aparecem por último. `backwards` mantém o estado
   inicial durante o delay. Cauda total: 180 + 440 = 620ms, dentro do teto
   de 700ms do kernel. pathLength="1" no markup normaliza o comprimento,
   daí o dasharray único funcionar para todos os traçados. */
@media (prefers-reduced-motion: no-preference) {
  .desvio-svg .flux {
    stroke-dasharray: 1;
    animation: desvio-draw var(--dur-slow) var(--ease-enter) backwards;
  }
  /* depois de desenhados, os ramos ficam RESPIRANDO: stroke-opacity oscila
     (multiplica a opacidade própria de cada ramo), defasada entre eles —
     o dinheiro continua escapando enquanto a pessoa decide. O vale é fundo
     (0.15: o ramo quase some) porque a 0.5 ninguém percebia; o ciclo de
     2,6s mantém a calma — é respiração funda, não pisca-pisca; bounce e
     glow pulsante o brand book proíbe. */
  .desvio-svg .ramo {
    animation:
      desvio-draw var(--dur-slow) var(--ease-enter) backwards,
      desvio-pulso 2.6s var(--ease-inout) infinite;
    animation-delay: 180ms, var(--pulso, 1s);
  }
  .desvio-svg .r2 { --pulso: 1.5s; }
  .desvio-svg .r3 { --pulso: 2s; }
  .desvio-svg .lbl,
  .desvio-svg .resto {
    animation: desvio-in var(--dur-normal) var(--ease-enter) 280ms backwards;
  }
}
/* só `from`: cada elemento anima até o SEU valor final (inclusive a
   opacidade por atributo dos ramos) */
@keyframes desvio-draw { from { stroke-dashoffset: 1; } }
@keyframes desvio-in   { from { opacity: 0; } }
@keyframes desvio-pulso {
  0%, 100% { stroke-opacity: 1; }
  50%      { stroke-opacity: 0.15; }
}