/* Movimento compartilhado: curto, contínuo e sem deslocamentos bruscos. */
:root{
  --motion-ease:cubic-bezier(.22,.8,.28,1);
  --motion-ease-soft:cubic-bezier(.2,.7,.2,1);
  --motion-fast:100ms;
  --motion-standard:140ms;
  --motion-slow:220ms;
}

.site-nav-link,.nav-group-title,.sidebar-action,.tab,.mes-btn,.mes-arrow,.tipo-btn,.pag-btn,
.btn-secondary,.btn-danger,.btn-cancel,.icon-btn,.ui-select-option,.land-button,.land-login,.land-secondary{
  transition:background-color var(--motion-standard) var(--motion-ease),
    border-color var(--motion-standard) var(--motion-ease),
    color var(--motion-standard) var(--motion-ease),
    box-shadow var(--motion-standard) var(--motion-ease),
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease);
}

body :is(.card,.contas-panel,.chart-card,.section,.item,.income-item,.summary,.metric,
  .north-account-mini,.north-recent-row,.position,.asset,.subscription,.installment,
  .goal,.invoice,.fixed-income){
  transition:background-color var(--motion-standard) var(--motion-ease),
    border-color var(--motion-standard) var(--motion-ease),
    box-shadow var(--motion-standard) var(--motion-ease),
    opacity var(--motion-fast) ease,
    transform var(--motion-standard) var(--motion-ease);
}

/* Só a borda muda no hover: sombra e deslocamento em blocos grandes obrigam o
   navegador a repintar a cada passagem do cursor. */
@media(hover:hover) and (pointer:fine){
  body :is(.card,.contas-panel,.chart-card,.item,.income-item,.summary,.metric,
    .north-account-mini,.north-recent-row,.position,.asset,.subscription,.installment,
    .goal,.invoice,.fixed-income):hover{
    border-color:color-mix(in srgb,var(--gold,#22c55e) 34%,var(--border,#2c3341));
  }
}

body :is(.land-button,.land-login,.land-secondary):active{transform:translateY(0) scale(.985)}

/* Durante a rolagem o cursor passa por vários cards: sem isso, cada um dispara
   hover e sombra no meio do movimento. */
html.north-scrolling body > :is(.wrap,main){pointer-events:none}

@keyframes modal-rise-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes overlay-fade-in{from{opacity:0}to{opacity:1}}
.overlay{animation:overlay-fade-in var(--motion-standard) ease-out both}
.overlay .modal{animation:modal-rise-in 170ms var(--motion-ease) both;transform-origin:center}
.ui-confirm-dialog[open]{animation:modal-rise-in 160ms var(--motion-ease) both}
.ui-confirm-dialog[open]::backdrop{animation:overlay-fade-in var(--motion-standard) ease-out both}

/* Feedback de navegação: aparece imediatamente em filtros e trocas de rota,
   mas não bloqueia a página nem provoca salto de layout. */
.north-route-progress{
  position:fixed;inset:0 auto auto 0;z-index:3000;width:34%;height:2px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,transparent,#22c55e 30%,#6ee7b7 78%,transparent);
  box-shadow:0 0 16px rgba(34,197,94,.55);
  opacity:0;transform:translate3d(-110%,0,0);pointer-events:none;
}
/* Só aparece se a tela demorar: em trocas rápidas não pisca. */
body.north-navigation-pending .north-route-progress{
  opacity:1;animation:north-route-progress 880ms var(--motion-ease) 180ms infinite;
}
@keyframes north-route-progress{
  0%{transform:translate3d(-115%,0,0)}
  58%{transform:translate3d(155%,0,0)}
  100%{transform:translate3d(310%,0,0)}
}

/* Abrir e fechar não anima a altura, que recalcula a página a cada quadro. */
@keyframes motion-fade-in{from{opacity:0}to{opacity:1}}
details:not(.nav-group)[open]>:not(summary){animation:motion-fade-in 130ms ease-out}

/* Desfoque sobre conteúdo que rola é repintado a cada quadro. */
body:has(> .site-sidebar) *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body:has(> .site-sidebar) :is(.ui-select-menu,.ui-confirm-dialog){background:var(--surface)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .north-route-progress{display:none!important}
}