/* =====================================================================
   Camada de movimento — Hub V4 Mendes
   Estende a política já escrita em style.css (linha ~739): só transform/opacity,
   nada de animar layout, tudo desligado em prefers-reduced-motion.
   Durações aqui vão até 560ms (entrada de conteúdo); interação segue ≤ 240ms,
   porque atraso em hover/clique é sentido como lentidão em ferramenta de uso diário.
   Identidade V4: vermelho só no acento e no dado; o resto é preto, branco e cinza.
   ===================================================================== */

:root {
  --mv-enter: 460ms;
  --mv-stagger: 48ms;          /* passo da cascata */
  --mv-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --mv-swift: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------------------------------------------------------------
   1. Revelação por scroll
   js/movimento.js marca [data-rv] e adiciona .rv-on quando entra na tela.
   O estado inicial só vale quando o JS assumiu (html.mv-on), para que
   sem JS o conteúdo apareça normalmente.
   --------------------------------------------------------------- */
.mv-on [data-rv] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}
.mv-on [data-rv="lado"]   { transform: translate3d(-22px, 0, 0); }
.mv-on [data-rv="escala"] { transform: scale(.965); }

.mv-on [data-rv].rv-on {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--mv-enter) var(--mv-spring),
    transform var(--mv-enter) var(--mv-spring);
  transition-delay: var(--rv-d, 0ms);
  will-change: auto;
}

/* revelação de emergência (aba oculta, impressão, observer que não disparou):
   aparece na hora, sem transição — conteúdo escondido é falha, animação é enfeite */
.mv-on [data-rv].rv-ja { transition: none !important; opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------
   2. Entrada de página e cascata dos blocos
   --------------------------------------------------------------- */
#app > .page { animation: mv-page 420ms var(--mv-spring) both; }
@keyframes mv-page {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* KPIs em cascata em toda troca de rota, não só na primeira */
#app > .page .kpis > .kpi {
  animation: mv-kpi 440ms var(--mv-spring) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes mv-kpi {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* linhas de tabela entram escalonadas (só as primeiras ~14, o resto aparece direto) */
.mv-on tbody tr[data-ln] {
  animation: mv-linha 380ms var(--mv-spring) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes mv-linha {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   3. Hover com profundidade — curto, 180ms
   --------------------------------------------------------------- */
.panel.hoverable {
  transition:
    transform 180ms var(--mv-swift),
    border-color 180ms var(--mv-swift),
    box-shadow 180ms var(--mv-swift);
}
.panel.hoverable:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--v6-shadow-h, var(--shadow));
  border-color: var(--v6-border-h, var(--border));
}

/* o KPI ganha um fio vermelho que cresce da esquerda */
.kpi { position: relative; overflow: hidden; }
.kpi::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--acc-hi, #ff3b44));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 260ms var(--mv-swift);
}
.kpi:hover::after { transform: scaleX(1); }

/* botões: resposta imediata ao toque */
.btn, .btn-mini {
  transition:
    transform 140ms var(--mv-swift),
    background-color 140ms var(--mv-swift),
    border-color 140ms var(--mv-swift),
    box-shadow 140ms var(--mv-swift);
}
.btn:hover, .btn-mini:hover { transform: translate3d(0, -1px, 0); }
.btn:active, .btn-mini:active { transform: translate3d(0, 0, 0) scale(.985); transition-duration: 60ms; }

/* link com sublinhado que corre */
.link {
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 220ms var(--mv-swift);
}
.link:hover { background-size: 100% 1.5px; }

/* linhas da tabela: deslize sutil no hover */
tbody tr { transition: background-color 140ms var(--mv-swift), transform 140ms var(--mv-swift); }
tbody tr:hover { transform: translate3d(2px, 0, 0); }

/* ---------------------------------------------------------------
   4. Navegação lateral: indicador que desliza
   --------------------------------------------------------------- */
.nav a {
  position: relative;
  transition: background-color 160ms var(--mv-swift), color 160ms var(--mv-swift), transform 160ms var(--mv-swift);
}
.nav a:hover { transform: translate3d(3px, 0, 0); }
.nav a::before {
  content: "";
  position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  background: var(--red); border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height 240ms var(--mv-spring);
}
.nav a.active::before { height: 62%; }
.nav a svg { transition: transform 240ms var(--mv-spring), stroke 160ms var(--mv-swift); }
.nav a:hover svg { transform: scale(1.12); }
.nav a.active svg { transform: scale(1.06); }

/* ---------------------------------------------------------------
   5. Medidores e barras — curva mais viva, duração maior
   --------------------------------------------------------------- */
.meter-fill { transition: transform 900ms var(--mv-spring); }
.bar-item .track > span { transition: transform 780ms var(--mv-spring); }

/* brilho que percorre a barra quando ela chega ao fim */
.meter-fill { position: relative; overflow: hidden; }
.meter-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: mv-brilho 2.4s 900ms var(--mv-swift) infinite;
}
@keyframes mv-brilho {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}

/* ---------------------------------------------------------------
   6. Tags e selos: entrada com pop
   --------------------------------------------------------------- */
.mv-on [data-rv] .tag,
.mv-on [data-rv] .badge { animation: mv-pop 340ms var(--mv-spring) both; animation-delay: 160ms; }
@keyframes mv-pop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   7. Abas: pastilha que desliza
   --------------------------------------------------------------- */
.abas [role=tab] { transition: color 180ms var(--mv-swift), background-color 180ms var(--mv-swift); }
.abas [role=tab][aria-selected="true"] { animation: mv-aba 300ms var(--mv-spring) both; }
@keyframes mv-aba {
  from { transform: scale(.96); }
  to   { transform: none; }
}

/* ---------------------------------------------------------------
   8. Toast: entra com mola
   --------------------------------------------------------------- */
.toast { transition: opacity 220ms var(--mv-spring), transform 320ms var(--mv-spring); }

/* ---------------------------------------------------------------
   9. Foco visível também animado (acessibilidade não perde o movimento)
   --------------------------------------------------------------- */
:focus-visible { transition: outline-offset 140ms var(--mv-swift); }

/* =====================================================================
   VITRINE DO LOGIN — telas do hub vivas
   Os mockups deixam de ser desenho parado: números sobem, barras crescem,
   o arco preenche, linhas entram em cascata, o cursor fantasma clica num
   filtro e a lista reage. Tudo decorativo (aria-hidden), em loop longo.
   ===================================================================== */

/* o palco responde ao mouse: js/movimento.js escreve --mx/--my */
.vitrine-palco {
  transition: transform 620ms var(--mv-swift);
  transform:
    rotateX(calc(16deg + var(--my, 0) * -5deg))
    rotateY(calc(-22deg + var(--mx, 0) * 7deg))
    rotateZ(4deg) scale(.86);
}

/* cada janela entra uma a uma na carga da tela */
.mk {
  animation:
    mk-entra 760ms var(--mv-spring) both,
    mk-flutua 9s ease-in-out infinite alternate;
  animation-delay: var(--d, 0ms), var(--fd, 0s);
}
@keyframes mk-entra {
  from { opacity: 0; transform: translateZ(var(--z)) translateY(34px) scale(.94); }
  to   { opacity: 1; transform: translateZ(var(--z)) translateY(0) scale(1); }
}
.mk-mrr       { --d: 80ms; }
.mk-clientes  { --d: 220ms; }
.mk-contratos { --d: 360ms; }
.mk-metas     { --d: 500ms; }

/* brilho que atravessa a janela de tempos em tempos (varredura de vidro) */
.mk::after {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.14) 52%, transparent 62%);
  transform: translateX(-120%);
  animation: mk-varre 7s 1.6s var(--mv-swift) infinite;
}
.mk-clientes::after  { animation-delay: 3.1s; }
.mk-contratos::after { animation-delay: 5.4s; }
.mk-metas::after     { animation-delay: 4.2s; }
@keyframes mk-varre {
  0%   { transform: translateX(-120%); }
  26%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* --- barras do MRR: crescem em cascata e a última pulsa --- */
.mk-barras i {
  transform-origin: bottom center;
  animation: mk-barra 820ms var(--mv-spring) both;
  animation-delay: calc(620ms + var(--bi, 0) * 70ms);
}
@keyframes mk-barra {
  from { transform: scaleY(0); opacity: .3; }
  to   { transform: scaleY(1); opacity: 1; }
}
.mk-barras i.on {
  animation:
    mk-barra 820ms var(--mv-spring) both,
    mk-pulsa 3.2s 1.6s ease-in-out infinite;
  animation-delay: calc(620ms + var(--bi, 0) * 70ms), 1.6s;
}
@keyframes mk-pulsa {
  0%, 100% { box-shadow: 0 0 18px -2px rgba(229,9,20,.7); }
  50%      { box-shadow: 0 0 26px 1px rgba(229,9,20,.95); }
}

/* --- arco da meta: desenha o traço --- */
.mk-arco .f {
  stroke-dasharray: 72 100;
  stroke-dashoffset: 72;
  animation: mk-arco 1500ms 700ms var(--mv-spring) both;
}
@keyframes mk-arco {
  from { stroke-dashoffset: 72; }
  to   { stroke-dashoffset: 0; }
}

/* --- funil: cada faixa cresce da esquerda --- */
.mk-funil div {
  transform-origin: left center;
  animation: mk-faixa 640ms var(--mv-spring) both;
  animation-delay: calc(900ms + var(--fi, 0) * 140ms);
}
@keyframes mk-faixa {
  from { transform: scaleX(.2); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* --- linhas das listas entram em cascata --- */
.mk-linhas li {
  animation: mk-linha 520ms var(--mv-spring) both;
  animation-delay: calc(var(--md, 400ms) + var(--li, 0) * 90ms);
}
@keyframes mk-linha {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.mk-clientes  .mk-linhas li { --md: 560ms; }
.mk-contratos .mk-linhas li { --md: 700ms; }

/* --- filtros dos contratos: a pastilha ativa troca sozinha --- */
.mk-filtros span { transition: background-color 320ms var(--mv-swift), border-color 320ms var(--mv-swift), color 320ms var(--mv-swift); }

/* --- cursor fantasma: anda até o filtro e "clica" --- */
.mk-cursor {
  position: absolute; z-index: 5; width: 14px; height: 20px; pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation: mk-cursor-vai 9s 2.2s var(--mv-swift) infinite;
}
.mk-cursor svg { width: 100%; height: 100%; display: block; }
@keyframes mk-cursor-vai {
  0%          { opacity: 0; transform: translate(10px, 44px) scale(1); }
  6%          { opacity: 1; }
  18%         { transform: translate(44px, 16px) scale(1); }
  22%         { transform: translate(44px, 16px) scale(.82); }
  26%         { transform: translate(44px, 16px) scale(1); }
  42%         { transform: translate(104px, 16px) scale(1); }
  46%         { transform: translate(104px, 16px) scale(.82); }
  50%         { transform: translate(104px, 16px) scale(1); }
  66%         { transform: translate(60px, 60px) scale(1); }
  76%         { opacity: 1; }
  88%, 100%   { opacity: 0; transform: translate(10px, 44px) scale(1); }
}

/* --- anel de clique que o cursor deixa --- */
.mk-cursor::before {
  content: "";
  position: absolute; left: -9px; top: -6px; width: 30px; height: 30px;
  border: 2px solid var(--acc-hi, #ff3b44); border-radius: 50%;
  opacity: 0; transform: scale(.3);
  animation: mk-anel 9s 2.2s var(--mv-swift) infinite;
}
@keyframes mk-anel {
  0%, 19%    { opacity: 0; transform: scale(.3); }
  23%        { opacity: .85; transform: scale(.55); }
  30%        { opacity: 0; transform: scale(1.1); }
  43%        { opacity: 0; transform: scale(.3); }
  47%        { opacity: .85; transform: scale(.55); }
  54%        { opacity: 0; transform: scale(1.1); }
  100%       { opacity: 0; transform: scale(1.1); }
}

/* --- KPIs da vitrine: número com leve pop na entrada --- */
.mk-kpis div, .mk-valor {
  animation: mk-pop 560ms var(--mv-spring) both;
  animation-delay: calc(480ms + var(--ki, 0) * 90ms);
}
@keyframes mk-pop {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* --- seta de alta: sobe e volta --- */
.mk-up { animation: mk-sobe 2.6s 1.8s ease-in-out infinite; display: inline-block; }
@keyframes mk-sobe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* =====================================================================
   DESLIGA TUDO em prefers-reduced-motion — regra da casa, sem exceção.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mv-on [data-rv],
  .mv-on [data-rv].rv-on { opacity: 1 !important; transform: none !important; transition: none !important; }

  #app > .page,
  #app > .page .kpis > .kpi,
  .mv-on tbody tr[data-ln],
  .mk, .mk::after,
  .mk-barras i, .mk-barras i.on,
  .mk-arco .f, .mk-funil div, .mk-linhas li,
  .mk-kpis div, .mk-valor, .mk-up,
  .mk-cursor, .mk-cursor::before,
  .meter-fill::after,
  .mv-on [data-rv] .tag, .mv-on [data-rv] .badge,
  .abas [role=tab][aria-selected="true"] { animation: none !important; }

  .mk-cursor { display: none; }
  .mk-arco .f { stroke-dashoffset: 0; }

  .panel.hoverable:hover,
  .btn:hover, .btn-mini:hover,
  .nav a:hover, .nav a:hover svg,
  tbody tr:hover { transform: none; }

  .vitrine-palco { transition: none; transform: rotateX(16deg) rotateY(-22deg) rotateZ(4deg) scale(.86); }
  .kpi::after, .link { transition: none; }
  .meter-fill, .bar-item .track > span { transition: none; }
}