/* nm-fx.css — NoMoney · fundo interativo e movimento
 *
 * Transplante do sistema de movimento do ponto_ctrl (ponto.css), adaptado
 * às superfícies daqui: .kpi, .mng, .card, .sts, .cartao. Os tokens são os
 * mesmos (--ac #07C42C sobre --bg #0a0a08), então nada precisou ser
 * recalibrado — só remapeado para os elementos que o NoMoney usa.
 *
 * A iluminação que segue o cursor vive só no fundo (.bg-grid + .cursor-glow).
 * Os cards não têm brilho interno — veja o porquê na seção RELEVO NO HOVER.
 *
 * Carregue DEPOIS de financas.css e nm.css.
 *
 * Nota de acessibilidade: o bloco global de `prefers-reduced-motion` do
 * nm.css já zera animação e transição do app inteiro. Aqui só ficam as
 * regras que ele não alcança — as que dependem de opacidade inicial, que
 * deixariam conteúdo invisível para sempre em vez de apenas parado.
 */

/* ══════════════════════════════════════════════════════════════════════
   FUNDO
   ══════════════════════════════════════════════════════════════════════ */

/* grade fixa com máscara radial: densa no topo, some antes do rodapé */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(var(--ink),.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--ink),.025) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 40%,transparent 100%)}

/* Halo que segue o cursor.
 *
 * Duas diferenças em relação ao ponto_ctrl, ambas por custo de pintura: lá
 * a página é leve, aqui o painel tem ~56 SVGs e mais de mil elementos.
 *   · sem `mix-blend-mode:screen` — medido, custava ~50% a mais por frame,
 *     e sobre um fundo #0a0a08 um verde a 7% de alfa dá o mesmo resultado;
 *   · posicionado por `transform`, não por left/top — assim o movimento
 *     roda no compositor e não força layout a cada mousemove.
 * A margem negativa centraliza o halo, deixando o transform livre para o JS. */
.cursor-glow{pointer-events:none;position:fixed;left:0;top:0;
  width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;
  background:radial-gradient(circle,rgba(7,196,44,.07) 0%,transparent 70%);
  z-index:0;will-change:transform;transition:opacity .3s}
@media(max-width:900px){.cursor-glow{display:none}}

/* o conteúdo sobe uma camada; sem isto a grade cobriria o app */
.app-wrap,.land,main{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════════════
   RELEVO NO HOVER

   Sem spotlight dentro do card, de propósito. O halo do cursor já ilumina
   a página; repetir o brilho dentro de cada superfície empilhava gradiente
   sobre gradiente e sujava os cards mais densos — o do cartão de crédito,
   que já tem faixa de compromissos e gráfico dentro, virava uma mancha
   verde por cima do conteúdo. Aqui o hover responde só com borda, relevo
   e sombra, que é leitura de profundidade e não de luz.
   ══════════════════════════════════════════════════════════════════════ */

.kpi{transition:border-color .25s,transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.kpi:hover{border-color:var(--bd2);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,calc(.45*var(--sa)))}

/* .mng já subia 1px; passa a usar a mesma curva e ganha sombra */
.mng{transition:border-color .25s,transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.mng:hover{border-color:var(--bd2);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,calc(.45*var(--sa)))}

.cartao{transition:border-color .25s,transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.cartao:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,calc(.45*var(--sa)))}

/* container grande não levanta — só ganha borda e sombra */
.card{transition:border-color .25s,box-shadow .25s}
.card:hover{border-color:var(--bd2);box-shadow:0 14px 34px rgba(0,0,0,calc(.35*var(--sa)))}
.sts{transition:border-color .3s,box-shadow .3s}
.sts:hover{box-shadow:0 16px 44px rgba(0,0,0,calc(.4*var(--sa)))}

/* linha de conta/fatura: realce discreto, sem deslocar a grade */
.bill{transition:background .18s,border-color .18s;border-radius:var(--r)}
.bill:hover{background:rgba(var(--ink),.02)}

/* ══════════════════════════════════════════════════════════════════════
   ENTRADA
   ══════════════════════════════════════════════════════════════════════ */

/* revelação no scroll */
.fade-up{opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.fade-up.visible{opacity:1;transform:none}

/* entrada escalonada de grades (kpis, cards de gestão) — o atraso vem do
   inline style que o nm-fx.js escreve, para não fixar um número de itens */
@keyframes nm-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.nm-in{animation:nm-in .45s cubic-bezier(.4,0,.2,1) both}

/* linhas da tabela e cards do extrato */
@keyframes nm-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nm-row-in{animation:nm-row-in .3s cubic-bezier(.4,0,.2,1) both}

/* legenda e alertas do hero entram em cascata curta */
@keyframes nm-chip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sts-legend>*,.sts-alerts>*{animation:nm-chip-in .3s cubic-bezier(.4,0,.2,1) both}
.sts-legend>*:nth-child(2),.sts-alerts>*:nth-child(2){animation-delay:.04s}
.sts-legend>*:nth-child(3),.sts-alerts>*:nth-child(3){animation-delay:.08s}
.sts-legend>*:nth-child(4),.sts-alerts>*:nth-child(4){animation-delay:.12s}
.sts-legend>*:nth-child(5),.sts-alerts>*:nth-child(5){animation-delay:.16s}
.sts-legend>*:nth-child(6),.sts-alerts>*:nth-child(6){animation-delay:.2s}

/* ══════════════════════════════════════════════════════════════════════
   FEEDBACK TÁTIL E SINAIS VIVOS
   ══════════════════════════════════════════════════════════════════════ */

.btn,.icon-btn,.sec-act,.tab,.mode-btn{
  transition:all .18s cubic-bezier(.4,0,.2,1)}
.btn:active,.icon-btn:active,.sec-act:active,.mode-btn:active{transform:scale(.96)}
.icon-btn:hover{transform:translateY(-1px)}

/* o número do "quanto posso gastar" pisca quando muda: é o valor que o
   usuário veio conferir, e o lançamento que acabou de entrar mudou ele */
@keyframes nm-flash{0%{transform:scale(1)}30%{transform:scale(1.04)}100%{transform:scale(1)}}
.sts-hero.nm-flash{animation:nm-flash .5s cubic-bezier(.4,0,.2,1);
  text-shadow:0 0 26px rgba(7,196,44,calc(.45*var(--ga)))}
.sts.tight .sts-hero.nm-flash{text-shadow:0 0 26px rgba(250,178,25,calc(.45*var(--ga)))}
.sts.over .sts-hero.nm-flash{text-shadow:0 0 26px rgba(208,59,59,calc(.45*var(--ga)))}

/* ponto vivo no rótulo do mês corrente */
.nm-live{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ac);
  margin-right:7px;vertical-align:1px;animation:nm-pulse 1.9s infinite}
@keyframes nm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(7,196,44,calc(.45*var(--ga)));opacity:1}
                    60%{box-shadow:0 0 0 6px rgba(7,196,44,calc(0*var(--ga)));opacity:.75}}

/* ══════════════════════════════════════════════════════════════════════
   LIMITES
   ══════════════════════════════════════════════════════════════════════ */

/* Toque: sem cursor o :hover fica grudado no último card tocado */
@media(hover:none){
  .kpi:hover,.mng:hover,.cartao:hover{transform:none;box-shadow:none}
}

/* O bloco global do nm.css já congela animação e transição. O que ele não
   resolve é opacidade inicial: sem isto, .fade-up e .nm-in ficariam
   invisíveis para sempre para quem pediu menos movimento. */
@media(prefers-reduced-motion:reduce){
  .cursor-glow{display:none}
  .fade-up{opacity:1;transform:none}
  .nm-in,.nm-row-in,.sts-legend>*,.sts-alerts>*{animation:none;opacity:1;transform:none}
}

@media print{.bg-grid,.cursor-glow{display:none!important}
  .fade-up{opacity:1!important;transform:none!important}}