/* Versão A · Dinheiro: o caixa mês a mês. Meses em que o dono cobre a conta (barras vazadas abaixo do zero),
   o aperto do dia 20 de dezembro e a reação que passa da meta de 2027.
   O estado final é o padrão; as animações só existem com html.anima (ver v3.css).
   Desenho: fonte/cenas/dinheiro.mjs. Texto do desenho: 14 unidades do viewBox = 10 px ou mais em 390 px de tela.
   Linha do tempo da entrada (s): barras 0,1 a 1,9 | linha 1,4 a 2,55 | aperto de 20 dez 2,25 a 3,0
   | reação e barra de 2027 2,7 a 3,5 | clímax: ponto na meta 3,4 | onda e brilho 3,5 a 4,3 */

/* ---------- estado final (padrão) ---------- */
/* sem tabular-nums: na Mona Sans ele troca os números por uma versão larga, de zero cortado, que parece código */
.cena-dinheiro .rot { font-size: 14px; font-weight: 700; }
@media (max-width: 420px) { .cena-dinheiro .rot { font-size: 15px; } } /* celular de 360 px: o desenho encolhe a 0,69; 15 unidades = 10 px */
.cena-dinheiro .rot-alvo { fill: var(--ember-hi); font-weight: 850; }
.cena-dinheiro .rot-meta { fill: var(--ember-hi); font-weight: 750; }
.cena-dinheiro .rot-cobre { fill: var(--azul-claro); font-weight: 600; }
.cena-dinheiro .rot-pin { fill: var(--ember-hi); font-weight: 850; }

.cena-dinheiro .b { fill: var(--azul); transform-origin: 50% 100%; }
.cena-dinheiro .b-alvo { fill: var(--ember); }
/* mês em que o dono cobre a conta: barra vazada, pendurada abaixo do zero */
.cena-dinheiro .b-fantasma {
  fill: rgba(169, 189, 217, 0.16); stroke: var(--azul-claro); stroke-width: 1.5; stroke-dasharray: 3.5 3;
  transform-origin: 50% 0;
}
/* o calor sobe: do azul da base ao laranja do topo (o fill vem inline, no SVG) */
.cena-dinheiro .g-a { stop-color: var(--azul); }
.cena-dinheiro .g-b { stop-color: var(--ember-hi); }
.cena-dinheiro .h-a { stop-color: var(--ember); stop-opacity: 0.42; }
.cena-dinheiro .h-b { stop-color: var(--ember); stop-opacity: 0; }

.cena-dinheiro .base { stroke: rgba(172, 190, 220, 0.55); }
.cena-dinheiro .meta { stroke: rgba(255, 176, 112, 0.6); stroke-width: 1.5; stroke-dasharray: 4 6; transform-origin: 0 50%; }
.cena-dinheiro .trilha { stroke: #fff; stroke-opacity: 0.94; stroke-width: 2.2; }
.cena-dinheiro .trilha-virada { stroke: var(--ember-hi); stroke-opacity: 1; stroke-width: 3; }

.cena-dinheiro .pin-linha { stroke: var(--ember-hi); stroke-width: 1.5; stroke-dasharray: 2 3; transform-box: fill-box; transform-origin: 50% 0; }
.cena-dinheiro .pin-anel { fill: #101c31; stroke: var(--ember-hi); stroke-width: 2.5; transform-box: fill-box; transform-origin: 50% 50%; }
.cena-dinheiro .halo { transform-box: fill-box; transform-origin: 50% 70%; }

/* ---------- antes de começar (só com movimento ligado) ---------- */
html.anima .cena-dinheiro:not(.vivo) .b,
html.anima .cena-dinheiro:not(.vivo) .meta,
html.anima .cena-dinheiro:not(.vivo) .halo,
html.anima .cena-dinheiro:not(.vivo) .rot,
html.anima .cena-dinheiro:not(.vivo) .pin-linha,
html.anima .cena-dinheiro:not(.vivo) .pin-anel,
html.anima .cena-dinheiro:not(.vivo) .ponta,
html.anima .cena-dinheiro:not(.vivo) .cg-legenda { opacity: 0; }
html.anima .cena-dinheiro:not(.vivo) .trilha { stroke-dashoffset: 1; }

/* ---------- movimento ---------- */
/* 1. os meses sobem barra por barra; os vazados descem do zero; as de out, nov e dez sobem mais devagar (o calor sobe) */
html.anima .cena-dinheiro.vivo .b { animation: subir 0.8s var(--ease) both; animation-delay: calc(0.1s + var(--k) * 60ms); }
html.anima .cena-dinheiro.vivo .b-quente { animation-duration: 1.1s; }
html.anima .cena-dinheiro.vivo .rot-mes { animation: aparece-so 0.5s var(--ease) both; animation-delay: calc(0.3s + var(--k) * 60ms); }
html.anima .cena-dinheiro.vivo .rot-cobre { animation: aparece-so 0.6s var(--ease) 1s both; }

/* 2. a meta abre da esquerda; a linha do caixa nasce no último mês no vermelho e sobe por cima das barras até dezembro */
html.anima .cena-dinheiro.vivo .meta { animation: abrir 0.8s var(--ease) 1.2s both, din-meta-acende 0.5s ease 3.4s both; }
html.anima .cena-dinheiro.vivo .rot-meta { animation: aparece-so 0.6s var(--ease) 1.2s both, din-meta-texto 0.5s ease 3.4s both; }
html.anima .cena-dinheiro.vivo .trilha { animation: desenhar 1.15s var(--ease-io) 1.4s both; }

/* 3. dia 20 de dezembro: o caixa aperta (marcador cai do rótulo até a linha) */
html.anima .cena-dinheiro.vivo .rot-pin { animation: din-pin 0.6s var(--ease) 2.25s both; }
html.anima .cena-dinheiro.vivo .pin-linha { animation: subir 0.5s var(--ease) 2.3s both; }
html.anima .cena-dinheiro.vivo .pin-anel { animation: surgir 0.45s var(--ease) 2.55s both; }
html.anima .cena-dinheiro.vivo .cg-legenda { animation: aparece-so 0.6s var(--ease) 2.3s both; }

/* 4. a reação: a linha vira laranja e a barra de 2027 sobe junto, até passar da meta */
html.anima .cena-dinheiro.vivo .trilha-virada { animation: desenhar 0.8s var(--ease-io) 2.7s both; }
html.anima .cena-dinheiro.vivo .b-alvo { animation: subir 0.85s cubic-bezier(0.22, 1, 0.36, 1) 2.7s both; }
html.anima .cena-dinheiro.vivo .rot-alvo { animation: aparece-so 0.5s var(--ease) 3s both; }

/* 5. clímax: o ponto chega na meta, a meta acende, o calor se espalha */
html.anima .cena-dinheiro.vivo .ponta { animation: surgir 0.45s var(--ease) 3.4s both; }
html.anima .cena-dinheiro.vivo .ponta-onda { animation: onda-svg 1.5s ease-out 3.5s 2; }
html.anima .cena-dinheiro.vivo .halo { animation: din-halo 0.9s var(--ease) 3.4s both; }

@keyframes din-pin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes din-meta-acende { from { stroke: rgba(255, 176, 112, 0.6); } to { stroke: var(--ember-hi); } }
@keyframes din-meta-texto { from { fill: var(--text-3); } to { fill: var(--ember-hi); } }
@keyframes din-halo { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }