/* ============================================================================
   NITRO PAY — CAMADA DE MOVIMENTO
   ----------------------------------------------------------------------------
   Só animação e microinteração. Não altera cor, layout, texto, ação de botão,
   regra de negócio, dado exibido nem rota.

   Carregado depois de styles.css, cyberpunk.css e theme.css.
   Regra central: a animação nunca pode atrasar a leitura da informação.
   Tudo começa em `opacity:1`; a entrada é feita com animation-fill-mode:both e
   durações curtas (180ms–620ms). Se o JS falhar ou o usuário pedir menos
   movimento, a página aparece normalmente e estática.
   ========================================================================== */

:root{
  --np-m-dur:180ms;
  --np-m-dur-2:280ms;
  --np-m-dur-3:420ms;
  --np-m-dur-4:620ms;
  --np-m-ease:cubic-bezier(.22,.61,.36,1);
  --np-m-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------------------
   1. GRÁFICOS
   A linha nasce do primeiro ponto e percorre até o último; os marcadores
   aparecem em sequência; a área sob a curva entra por último.
   O comprimento real é medido em assets/motion.js (a partir do próprio dado),
   por isso o gráfico aparece completo e correto mesmo sem JavaScript.
   ------------------------------------------------------------------------ */
.np-chart{overflow:visible}
.np-chart-line{
  stroke-dasharray:var(--np-line-len,2000);
  stroke-dashoffset:var(--np-line-len,2000);
  animation:np-draw var(--np-m-dur-4) var(--np-m-ease-out) forwards;
}
.np-chart-area{
  opacity:0;
  animation:np-fade-in var(--np-m-dur-3) var(--np-m-ease) .34s forwards;
}
.np-chart-base{animation:np-fade-in var(--np-m-dur-3) var(--np-m-ease) .1s backwards}
.np-chart-dot{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:np-dot-in 340ms var(--np-m-ease-out) forwards;
  animation-delay:calc(420ms + var(--np-i,0) * 55ms);
}
.np-chart-label{animation:np-fade-in var(--np-m-dur-3) var(--np-m-ease) .45s backwards}

@keyframes np-draw{to{stroke-dashoffset:0}}
@keyframes np-fade-in{to{opacity:1}}
@keyframes np-dot-in{
  from{opacity:0;transform:scale(.25)}
  to  {opacity:1;transform:scale(1)}
}
/* Segunda reprodução (dados novos): a curva desliza a partir do desenho
   anterior em vez de piscar, para a atualização ser lida como mudança.
   A reprodução é feita pela Web Animations API em assets/motion.js. */




/* ---------------------------------------------------------------------------
   2. ENTRADA DE CARTÕES, INDICADORES E IMAGENS
   Curta e escalonada. Não usa opacity inicial no CSS: se a animação for
   desativada, o conteúdo aparece imediatamente.
   ------------------------------------------------------------------------ */
.np-kpi,.np-feature-card,.np-panel,.np-mini-metric,.np-notice,.np-fee-bar,
.card,.stat,.profile-card,.mini-box,.alert,.np-page-hero,.auth-hero-card{
  animation:np-enter var(--np-m-dur-3) var(--np-m-ease-out) backwards;
}
.np-kpi:nth-child(1),.np-kpi-grid > :nth-child(1){animation-delay:40ms}
.np-kpi-grid > :nth-child(2){animation-delay:80ms}
.np-kpi-grid > :nth-child(3){animation-delay:120ms}
.np-kpi-grid > :nth-child(4){animation-delay:160ms}
.np-kpi-grid > :nth-child(n+5){animation-delay:200ms}

.np-feature-grid > :nth-child(1),.np-panel-grid > :nth-child(1),
.grid-2 > :nth-child(1),.grid-3 > :nth-child(1),.grid-4 > :nth-child(1){animation-delay:200ms}
.np-feature-grid > :nth-child(2),.np-panel-grid > :nth-child(2),
.grid-2 > :nth-child(2),.grid-3 > :nth-child(2),.grid-4 > :nth-child(2){animation-delay:250ms}
.np-feature-grid > :nth-child(3),.np-panel-grid > :nth-child(3),
.grid-2 > :nth-child(3),.grid-3 > :nth-child(3),.grid-4 > :nth-child(3){animation-delay:300ms}
.np-feature-grid > :nth-child(n+4),.np-panel-grid > :nth-child(n+4),
.grid-2 > :nth-child(n+4),.grid-3 > :nth-child(n+4),.grid-4 > :nth-child(n+4){animation-delay:340ms}

.np-activity-card{animation-delay:180ms}
.np-table-card{animation-delay:220ms}
.np-metric-row > :nth-child(1){animation-delay:80ms}
.np-metric-row > :nth-child(2){animation-delay:120ms}
.np-metric-row > :nth-child(3){animation-delay:160ms}

@keyframes np-enter{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to  {opacity:1;transform:none}
}

/* Indicadores: o número ganha um realce curto ao entrar, sem piscar. */
.np-kpi-icon,.np-activity-icon{animation:np-pop var(--np-m-dur-3) var(--np-m-ease-out) backwards}
.np-kpi-grid > :nth-child(1) .np-kpi-icon{animation-delay:70ms}
.np-kpi-grid > :nth-child(2) .np-kpi-icon{animation-delay:110ms}
.np-kpi-grid > :nth-child(3) .np-kpi-icon{animation-delay:150ms}
.np-kpi-grid > :nth-child(4) .np-kpi-icon{animation-delay:190ms}
@keyframes np-pop{
  from{opacity:0;transform:scale(.82)}
  to  {opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   3. IMAGENS EXISTENTES — brilho e profundidade
   A arte não é tocada: só luz e sombra em volta dela.
   ------------------------------------------------------------------------ */
.np-feature-card img,
.np-page-hero img,
.np-panel img,
.auth-hero-card img,
.deposit-art img{
  animation:np-img-in var(--np-m-dur-4) var(--np-m-ease-out) backwards;
  transition:filter var(--np-m-dur-2) var(--np-m-ease),
             transform var(--np-m-dur-2) var(--np-m-ease);
}
@keyframes np-img-in{
  from{opacity:0;transform:scale(.97)}
  to  {opacity:1;transform:none}
}
.np-feature-card:hover img,.np-page-hero:hover img{
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.42)) brightness(1.06);
  transform:translateY(-2px);
}
/* Passagem de luz devagar sobre a ilustração */
.np-feature-card::after,.np-page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(190,225,255,.07) 48%,transparent 58%);
  transform:translateX(-100%);
  animation:np-sheen 9s var(--np-m-ease) infinite;
  animation-delay:2.2s;
}
@keyframes np-sheen{
  0%,72%  {transform:translateX(-100%)}
  88%,100%{transform:translateX(100%)}
}

/* QR Code e artes de saque: profundidade sem tremir */
.qr,.copy-box img{transition:transform var(--np-m-dur-2) var(--np-m-ease),box-shadow var(--np-m-dur-2) var(--np-m-ease)}
.qr:hover{transform:translateY(-2px) scale(1.012);box-shadow:0 16px 34px rgba(0,0,0,.4)}

/* ---------------------------------------------------------------------------
   4. BOTÕES — resposta discreta a mouse, toque e clique
   Nenhum texto, href, name ou ação é tocado.
   ------------------------------------------------------------------------ */
.btn,.btn-primary,button,.nitro-login-submit{
  position:relative;
  transition:transform var(--np-m-dur) var(--np-m-ease),
             filter var(--np-m-dur) var(--np-m-ease),
             box-shadow var(--np-m-dur) var(--np-m-ease),
             opacity var(--np-m-dur) var(--np-m-ease);
}
@media (hover:hover){
  .btn:hover,.btn-primary:hover,button:hover:not(:disabled){
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:0 14px 28px rgba(123,92,255,.26),0 0 20px rgba(255,78,205,.14);
  }
}
/* Toque e clique: afunda de leve, sem salto */
.btn:active,.btn-primary:active,button:active:not(:disabled){
  transform:translateY(0) scale(.978);
  filter:brightness(.95);
  transition-duration:80ms;
}
/* Navegação por teclado */
.btn:focus-visible,.btn-primary:focus-visible,button:focus-visible{
  outline:2px solid var(--np-cyan);
  outline-offset:3px;
}
/* links do menu: deslocamento leve em vez de pular */
.sidebar nav a{
  transition:transform var(--np-m-dur) var(--np-m-ease),
             background var(--np-m-dur) var(--np-m-ease),
             border-color var(--np-m-dur) var(--np-m-ease);
}
@media (hover:hover){
  .sidebar nav a:hover{transform:translateX(3px)}
  .sidebar nav a.active:hover{transform:translateX(3px)}
}
/* Botões dentro de tabela: área de toque maior sem mudar o desenho */
table td .btn.small,table td button.small{min-height:34px}

/* ---------------------------------------------------------------------------
   5. ESTADOS — carregando, sucesso, erro e desabilitado
   Só aparência; o comportamento de cada ação permanece o do sistema.
   ------------------------------------------------------------------------ */
.btn.is-loading,.btn-primary.is-loading,button.is-loading,
.btn.is-busy,.btn-primary.is-busy,button.is-busy{
  pointer-events:none;
}
.btn.is-loading::after,.btn-primary.is-loading::after,button.is-loading::after,
.btn.is-busy::after,.btn-primary.is-busy::after,button.is-busy::after{
  animation-duration:.72s;
}
@keyframes np-spin{to{transform:rotate(360deg)}}

/* Sucesso: um pulso curto e único, sem piscar */
.alert.success{animation:np-enter var(--np-m-dur-2) var(--np-m-ease-out) backwards,np-ok-flash 1.1s var(--np-m-ease) .1s 1}
@keyframes np-ok-flash{
  0%  {box-shadow:0 0 0 0 rgba(18,216,165,.42)}
  70% {box-shadow:0 0 0 12px rgba(18,216,165,0)}
  100%{box-shadow:0 0 0 0 rgba(18,216,165,0)}
}
/* Erro: balanço curto no eixo horizontal, uma única vez */
.alert.error,.alert.danger{animation:np-enter var(--np-m-dur-2) var(--np-m-ease-out) backwards,np-shake 420ms var(--np-m-ease) .08s 1}
@keyframes np-shake{
  0%,100%{transform:translateX(0)}
  22%    {transform:translateX(-4px)}
  46%    {transform:translateX(4px)}
  72%    {transform:translateX(-2px)}
}
/* Estados de tabela e selos entram sem piscar */
.badge,.status-pill{animation:np-fade-in var(--np-m-dur-2) var(--np-m-ease) backwards}
tbody tr{animation:np-row-in var(--np-m-dur-2) var(--np-m-ease-out) backwards}
@keyframes np-row-in{
  from{opacity:0;transform:translate3d(0,4px,0)}
  to  {opacity:1;transform:none}
}
/* Estados vazios */
.empty,.no-data,.muted{animation:np-fade-in var(--np-m-dur-3) var(--np-m-ease) 120ms backwards}

/* Botão desabilitado: opacidade estável, sem reagir ao mouse */
button:disabled,.btn[aria-disabled="true"],button[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  filter:none;
  box-shadow:none;
  transition:opacity var(--np-m-dur) var(--np-m-ease);
}

/* ---------------------------------------------------------------------------
   6. MOVIMENTO DE APOIO
   Fita do gráfico e avisos ganham um brilho de passagem, bem discreto.
   ------------------------------------------------------------------------ */
.np-chart-wrap{position:relative;overflow:hidden;border-radius:12px}
.np-notice::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(120,200,255,.06) 50%,transparent 58%);
  transform:translateX(-100%);
  animation:np-sheen 12s var(--np-m-ease) infinite;
  animation-delay:4s;
}
.np-kpi::after{transition:opacity var(--np-m-dur-3) var(--np-m-ease);opacity:.22}
@media (hover:hover){.np-kpi:hover::after{opacity:.34}}

/* Aba de retorno do topo, se existir */
.whatsapp-float{transition:transform var(--np-m-dur-2) var(--np-m-ease),box-shadow var(--np-m-dur-2) var(--np-m-ease)}
@media (hover:hover){.whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(16,224,122,.36)}}

/* ---------------------------------------------------------------------------
   7. TELAS MENORES
   Nada de entrada demorada onde a leitura é prioritária.
   ------------------------------------------------------------------------ */
@media (max-width:760px){
  :root{--np-m-dur-3:320ms;--np-m-dur-4:460ms}
  .np-kpi,.np-feature-card,.np-panel,.np-mini-metric,.card,.stat{
    animation-duration:320ms;
  }
  .np-chart-dot{animation-delay:calc(300ms + var(--np-i,0) * 40ms)}
  .np-feature-card::after,.np-page-hero::after,.np-notice::after{animation:none}
  .btn:active,.btn-primary:active,button:active{transform:scale(.985)}
}

/* ---------------------------------------------------------------------------
   8. PREFERÊNCIA DO SISTEMA POR MENOS MOVIMENTO
   Tudo fica estático. Nenhuma informação some.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .np-chart-line{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .np-chart-area{opacity:1!important}
  .np-chart-dot{opacity:1!important;transform:none!important}
  .np-chart-base,.np-chart-label{opacity:1!important}
  .np-feature-card::after,.np-page-hero::after,.np-notice::after{display:none!important}
  .btn:hover,.btn-primary:hover,button:hover,
  .btn:active,.btn-primary:active,button:active,
  .sidebar nav a:hover,.np-feature-card:hover img{transform:none!important}
}