/*
 * Mendes Hub: camada de animações (motion.css + motion.js). Arquivo próprio: não muda cor,
 * tamanho, espaçamento nem layout de nenhuma tela, só o movimento. Vale para todas as páginas
 * que usam ui/base.html. Origem: homepage-v3-interativa.html (thread da homepage, 2026-11-05).
 * Tudo dentro de prefers-reduced-motion: no-preference; com "reduzir movimento" ligado no
 * sistema, nada aqui roda (e base.css já desliga o resto).
 * O motion.js só põe classes (mo-*) e variáveis CSS pelo CSSOM (permitido pela CSP).
 */
@media (prefers-reduced-motion: no-preference){

/* ---------- curvas e tempos */
:root{
  --mo-ease:cubic-bezier(.2,.8,.2,1);
  --mo-spring:cubic-bezier(.2,.9,.3,1.25);
  --mo-spring-soft:cubic-bezier(.2,.9,.3,1.12);
  --mo-step:55ms;
}

@keyframes moUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes moFade{from{opacity:0}to{opacity:1}}
@keyframes moPop{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:none}}
@keyframes moSpringIn{0%{opacity:0;transform:translateY(-8px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes moGrow{0%{opacity:0;transform:scale(.88)}100%{opacity:1;transform:none}}
@keyframes moBarUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes moBarRight{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes moDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes moRowIn{from{opacity:0;transform:translateY(-6px);background:var(--color-accent-tint)}60%{background:var(--color-accent-tint)}to{opacity:1;transform:none;background:transparent}}
@keyframes moLeave{to{opacity:0;transform:translateX(24px)}}
@keyframes moTick{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ---------- 1. entrada em cascata (a página inteira já entra por base.css .page > *;
   aqui entram em sequência os itens de dentro: linhas, números, cartões) */
.mo-stagger{animation:moUp .5s var(--mo-ease) backwards;animation-delay:calc(var(--mo-i,0) * var(--mo-step) + var(--mo-base,.12s))}

/* ---------- 2. números: só a fonte tabular durante a contagem, para não "pular" de largura */
.mo-counting{font-variant-numeric:tabular-nums}

/* ---------- 3. gráficos que se desenham */
.mo-chart .chart__bar{transform-box:fill-box;transform-origin:50% 100%;animation:moBarUp .8s cubic-bezier(.2,.85,.25,1.05) backwards;animation-delay:calc(var(--mo-i,0) * 60ms + .1s)}
.mo-chart .chart__bar.mo-neg{transform-origin:50% 0}
.mo-chart .chart__line{stroke-dasharray:1;animation:moDraw 1.2s .45s ease backwards}
.mo-chart .chart__point{transform-box:fill-box;transform-origin:center;animation:moPop .4s var(--mo-spring) backwards;animation-delay:calc(var(--mo-i,0) * 50ms + .9s)}
.mo-chart .chart__goal{animation:moFade .6s .7s backwards}
.mo-chart .share-bars__fill{transform-box:fill-box;transform-origin:0 50%;animation:moBarRight .9s var(--mo-ease) backwards;animation-delay:calc(var(--mo-i,0) * 70ms + .15s)}
.ring__arc{transition:stroke-dasharray 1s var(--mo-ease)}

/* ---------- 4. cartões sobem no hover, botões afundam no clique */
.card--interactive{transition:border-color .2s,transform .25s var(--mo-spring),box-shadow .25s}
.btn,.chip,.cal__nav-btn,.task-check,.theme-toggle,.lang-switch button,.user-menu__trigger{transition:transform .12s ease,background .2s,border-color .2s,color .2s,box-shadow .2s}
.btn:active:not(:disabled),.chip:active,.cal__nav-btn:active,.task-check:active,.theme-toggle:active,.lang-switch button:active{transform:scale(.95)}
.table__row{transition:background .15s}
.kpi__icon{transition:transform .3s var(--mo-spring)}
.card--interactive:hover .kpi__icon{transform:scale(1.1) rotate(-6deg)}

/* ---------- 5. popup no centro que cresce do cartão clicado (motion.js: data-mo-open="#id"
   num <dialog class="mo-dialog">). O fundo fica desfocado. */
dialog.mo-dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px);animation:moFade .25s ease backwards}
dialog.mo-dialog.mo-closing::backdrop{animation:moFade .2s ease reverse backwards}

/* ---------- 6. menus e avisos com mola */
.user-menu__panel{transform-origin:top right;animation:moSpringIn .32s var(--mo-spring) backwards}
/* menu da conta no menu lateral: abre para cima, nasce no canto do cartão e cresce (opção C, Matheus, 2026-11-07) */
.side .user-menu__panel{transform-origin:bottom left;animation:moGrow .34s var(--mo-spring) backwards}
details[open] > :not(summary){animation:moSpringIn .3s var(--mo-spring-soft) backwards}
.alert{animation:moPop .5s var(--mo-spring-soft) backwards;animation-delay:var(--mo-base,.15s)}
.mo-toast{transition:opacity .2s ease,transform .45s var(--mo-spring)}

/* ---------- 7. listas: o que entra pisca verde, o que sai desliza para fora */
.mo-new{animation:moRowIn .7s ease backwards}
.mo-leaving{animation:moLeave .3s ease forwards;pointer-events:none}
.mo-tick .task-check{animation:moTick .3s ease}

/* ---------- 8. troca de página suave (Chrome/Edge 126+, Safari 18.2+; os outros ignoram) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.18s ease both moFade reverse}
::view-transition-new(root){animation:.28s var(--mo-ease) both moFade}
}

/* toast (aparência; o movimento está acima). Componente novo, nos tokens do Design System. */
.mo-toast{position:fixed;left:50%;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 16px;border-radius:12px;background:var(--color-surface-3);border:1px solid var(--color-border-strong);box-shadow:0 20px 50px rgba(0,0,0,.45);color:var(--color-text);font:600 13.5px var(--font-sans);transform:translate(-50%,20px);opacity:0;pointer-events:none}
.mo-toast.mo-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.mo-toast i{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex:none}
/* popup (aparência mínima, segue o .card) */
dialog.mo-dialog{padding:0;font-family:var(--font-sans);border:1px solid var(--color-border-strong);border-radius:18px;background:var(--color-surface);color:var(--color-text);box-shadow:0 30px 80px rgba(0,0,0,.5);width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 40px)}