/* ============================================================
   Movimento — Central de Conteúdos v2.1
   Regra de ouro: só transform e opacity (rodam na GPU, 60 fps),
   tudo visível em repouso e desligado em "reduzir movimento".
   ============================================================ */
:root{
  --mola:cubic-bezier(.34,1.56,.64,1);      /* leve "quique" */
  --suave:cubic-bezier(.22,1,.36,1);        /* desacelera bonito */
  --rapido:160ms; --medio:320ms; --lento:560ms;
}

/* ---------- troca de página nativa (View Transitions) ---------- */
@view-transition{navigation:auto}
.lateral{view-transition-name:lateral}
.topo{view-transition-name:topo}
.barra-movel{view-transition-name:barra}
::view-transition-old(root){animation:sai-pagina 140ms var(--suave) both}
::view-transition-new(root){animation:entra-pagina 300ms var(--suave) both}
::view-transition-group(lateral),::view-transition-group(topo),::view-transition-group(barra){animation:none}
@keyframes sai-pagina{to{opacity:0;transform:translateY(-6px)}}
@keyframes entra-pagina{from{opacity:0;transform:translateY(10px)}}

/* ---------- barra de carregamento no topo (sensação de instantâneo) ---------- */
.carregando{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;pointer-events:none;
  background:linear-gradient(90deg,var(--lima),var(--azul));transform-origin:0 50%;transform:scaleX(0);opacity:0}
.carregando.ativo{opacity:1;animation:carrega 1.6s var(--suave) forwards}
@keyframes carrega{0%{transform:scaleX(0)}40%{transform:scaleX(.55)}100%{transform:scaleX(.92)}}

/* ---------- entrada em cascata dos blocos ---------- */
.anima-entrada>*{animation:sobe-entra var(--lento) var(--suave) backwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes sobe-entra{from{opacity:0;transform:translateY(14px) scale(.985)}}

/* ---------- cartões e itens ---------- */
a.card,a.kpi,a.item,.tarefa,.midia{transition:transform var(--medio) var(--suave),box-shadow var(--medio) var(--suave),background var(--rapido)}
a.card:hover,a.kpi:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,17,139,.05),0 18px 40px -18px rgba(16,17,139,.35)}
a.item:hover{transform:translateX(3px)}
.tarefa:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(16,17,139,.35)}
.kpi.destaque::after{transition:transform var(--lento) var(--mola)}
.kpi.destaque:hover::after{transform:scale(1.15) rotate(-6deg)}

/* ---------- botões ---------- */
.btn{transition:transform var(--rapido) var(--suave),background var(--rapido),box-shadow var(--medio) var(--suave),color var(--rapido)}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn:active:not([disabled]){transform:scale(.96);transition-duration:60ms}
.btn-verde:hover,.btn-primario:hover,.btn-lima:hover{box-shadow:0 10px 22px -10px color-mix(in srgb,var(--azul) 55%,transparent)}
.btn svg{transition:transform var(--medio) var(--mola)}
.btn:hover svg{transform:scale(1.12)}

/* ---------- menu lateral ---------- */
.nav a{position:relative;transition:background var(--medio) var(--suave),color var(--rapido),transform var(--medio) var(--suave)}
.nav a:hover:not(.ativo){transform:translateX(4px)}
.nav a.ativo{animation:pilula var(--lento) var(--mola) both}
@keyframes pilula{from{transform:scaleX(.9);opacity:.6}}
.lateral{transition:transform .32s var(--suave)}

/* ---------- números que contam ---------- */
.kpi .valor{font-variant-numeric:tabular-nums}

/* ---------- barras de progresso crescem ---------- */
.barra i{transform-origin:0 50%;animation:cresce 1s var(--suave) backwards;animation-delay:calc(var(--i,0) * 55ms + 200ms)}
@keyframes cresce{from{transform:scaleX(0)}}

/* ---------- linha do tempo do conteúdo ---------- */
.etapa.feita::before,.etapa.atual::before{animation:ponto-entra 420ms var(--mola) backwards;animation-delay:calc(var(--e,0) * 90ms)}
.etapa.feita::after,.etapa.atual::after{transform-origin:0 50%;animation:cresce 420ms var(--suave) backwards;animation-delay:calc(var(--e,0) * 90ms - 60ms)}
.etapa.atual::before{animation:ponto-entra 420ms var(--mola) backwards,pulsa 2.2s ease-in-out 1s infinite;animation-delay:calc(var(--e,0) * 90ms),calc(var(--e,0) * 90ms + 600ms)}
@keyframes ponto-entra{from{transform:scale(0)}}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 5px var(--lima-50)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--lima) 25%,transparent)}}

/* ---------- caixa de decisão: abre suave ---------- */
.area-ajustes{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--medio) var(--suave),opacity var(--medio)}
.area-ajustes>*{min-height:0}
.ajuste-linha{animation:sobe-entra 300ms var(--suave) backwards}
.decisao{transition:border-color var(--medio),box-shadow var(--medio)}
.decisao:focus-within{border-color:var(--azul);box-shadow:0 0 0 5px var(--azul-50)}

/* ---------- status (pílulas) ---------- */
.pill{transition:transform var(--rapido)}
.pill.st-amarelo::before,.pill.st-roxo::before{animation:respira 1.8s ease-in-out infinite}
@keyframes respira{50%{opacity:.25}}

/* ---------- aviso (toast) ---------- */
.flash{animation:toast-entra .5s var(--mola) both;overflow:hidden}
.flash::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.25;transform-origin:0 50%;animation:esgota 4.5s linear forwards}
.flash.saindo{animation:toast-sai .35s var(--suave) forwards}
@keyframes toast-entra{from{opacity:0;transform:translate(-50%,24px) scale(.94)}}
@keyframes toast-sai{to{opacity:0;transform:translate(-50%,16px) scale(.96)}}
@keyframes esgota{to{transform:scaleX(0)}}

/* ---------- sino ---------- */
.sino .ponto{animation:pop .5s var(--mola) .4s backwards}
.sino.tem svg{animation:balanca 1.2s ease-in-out .8s 2;transform-origin:50% 10%}
@keyframes balanca{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}
@keyframes pop{from{transform:scale(0)}}

/* ---------- mídia: brilho de carregamento ---------- */
.tela-midia{background:linear-gradient(110deg,var(--azul-900) 30%,color-mix(in srgb,var(--azul) 60%,#000) 50%,var(--azul-900) 70%);background-size:220% 100%;animation:brilho 1.4s linear infinite}
.tela-midia.pronta{animation:none;background:#000}
.tela-midia img,.tela-midia video{transition:opacity .4s var(--suave)}
.js .tela-midia:not(.pronta) img,.js .tela-midia:not(.pronta) video{opacity:0}
@keyframes brilho{to{background-position:-120% 0}}
.processando .giro{animation:gira 1s linear infinite}

/* ---------- upload ---------- */
.soltar{transition:transform var(--medio) var(--mola),border-color var(--rapido),background var(--rapido)}
.soltar:hover{transform:scale(1.01)}
.soltar.sobre{transform:scale(1.025)}
.soltar svg{transition:transform var(--medio) var(--mola)}
.soltar:hover svg,.soltar.sobre svg{transform:translateY(-4px)}
.envio{animation:sobe-entra .35s var(--suave) backwards}
.envio .barra i{animation:none;transition:width .3s var(--suave);background:linear-gradient(90deg,var(--azul),#4A4CF0,var(--azul));background-size:200% 100%;animation:listras 1.2s linear infinite}
.envio.ok .barra i{background:var(--verde);animation:none}
@keyframes listras{to{background-position:-200% 0}}

/* ---------- celebração (aprovado) ---------- */
.festa{position:fixed;inset:0;pointer-events:none;z-index:250}
.check-grande{position:fixed;left:50%;top:42%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--verde);display:grid;place-items:center;z-index:251;pointer-events:none;animation:check-pop 1.1s var(--mola) forwards}
.check-grande svg{width:52px;height:52px;color:#fff;stroke-width:3;stroke-dasharray:30;stroke-dashoffset:30;animation:risca .45s .25s var(--suave) forwards}
@keyframes check-pop{0%{transform:scale(0)}25%{transform:scale(1)}80%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:0}}
@keyframes risca{to{stroke-dashoffset:0}}

/* ---------- login ---------- */
.login-arte .simbolo{animation:flutua 7s ease-in-out infinite}
.login-arte h2,.login-arte .selo-seguro{animation:sobe-entra .7s var(--suave) .15s backwards}
.login-form .caixa{animation:sobe-entra .6s var(--suave) backwards}
@keyframes flutua{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-10px,-14px) rotate(-3deg)}}
.passos span.ativo{animation:pop .45s var(--mola) .2s backwards}
.codigo-input.errou{animation:treme .4s}
@keyframes treme{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ---------- barra inferior ---------- */
.barra-movel a svg{transition:transform var(--medio) var(--mola)}
.barra-movel a.ativo svg{transform:translateY(-2px) scale(1.12)}
.barra-movel a:active svg{transform:scale(.85)}

/* ---------- desempenho: listas longas só renderizam quando aparecem ---------- */
.historico li,.tabela tbody tr{content-visibility:auto;contain-intrinsic-size:auto 52px}

/* ---------- acessibilidade: reduzir movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
}