/* ===========================================================================
 * Liryon: o movimento das telas da equipe (A2, 15/10/2026)
 *
 * Pedido do dono em 14/10: "animações até nos mínimos detalhes", SEMPRE
 * ligadas, mesmo com o sistema pedindo menos movimento. Por isso nada aqui
 * consulta prefers-reduced-motion, e as regras que desligavam o movimento nas
 * telas da equipe saíram (relógio, Comboard, /price, /create, Tráfego). As
 * páginas do CLIENTE (relatório do Tráfego) continuam respeitando o sistema.
 *
 * Entra no <head> de toda tela da equipe por liryon_movimento() (core/tema.php):
 * o hub pelo liryon_app_head(), e Entrega, Registro de Marcas e Tráfego pelo
 * cabeçalho de cada um. O par JS é core/movimento.js (window.LiryonMov).
 *
 * Regras da casa para movimento:
 *  - Uma régua só de tempo e curva (as variáveis abaixo). Rápido para o que
 *    responde ao dedo, médio para o que abre, lento para o que chega.
 *  - Só translate/scale/rotate (propriedades individuais) e opacity. Elas se
 *    somam ao `transform` que o elemento já tem (popover centralizado,
 *    relógio arrastado), em vez de trocá-lo no meio da animação.
 *  - Regra genérica entra com :where(), especificidade zero: qualquer regra
 *    de módulo que já define transição ou animação continua valendo.
 *  - Movimento nunca esconde conteúdo: se a animação não rodar, tudo já está
 *    no lugar (fill "both" só nas entradas curtas).
 * ========================================================================= */

:root{
  --mv-rapido:140ms;
  --mv-medio:220ms;
  --mv-lento:360ms;
  --mv-sai:cubic-bezier(.2,.8,.2,1);      /* desacelera: o que chega */
  --mv-entra:cubic-bezier(.4,0,1,1);      /* acelera: o que vai embora */
  --mv-suave:cubic-bezier(.4,0,.2,1);     /* troca de estado */
  --mv-mola:cubic-bezier(.34,1.56,.64,1); /* passa um pouco e volta */
}

/* ---- 1. trocar de tela -----------------------------------------------------
   Transição entre páginas da mesma origem (Chrome e Edge 126+, Safari 18.2+).
   A página velha sobe e some, a nova chega de baixo. As barras do app e o
   rail ficam paradas (nome próprio, sem animação). */
@view-transition{navigation:auto;types:navegar}
html:active-view-transition-type(navegar)::view-transition-old(root){animation:mv-vt-sai var(--mv-medio) var(--mv-entra) both}
html:active-view-transition-type(navegar)::view-transition-new(root){animation:mv-vt-entra var(--mv-lento) var(--mv-sai) both}
@keyframes mv-vt-sai{to{opacity:0;translate:0 -6px}}
@keyframes mv-vt-entra{from{opacity:0;translate:0 10px}}
.bnav,.lbar{view-transition-name:mv-barra}
.rail{view-transition-name:mv-rail}
::view-transition-old(mv-barra),::view-transition-new(mv-barra),
::view-transition-old(mv-rail),::view-transition-new(mv-rail){animation:none}
html.mv-tema .bnav,html.mv-tema .lbar,html.mv-tema .rail{view-transition-name:none}

/* trocar o tema: o novo se abre num círculo a partir do botão (movimento.js) */
html:active-view-transition-type(tema)::view-transition-old(root){animation:none}
html:active-view-transition-type(tema)::view-transition-new(root){animation:mv-revela 560ms var(--mv-suave) both}
@keyframes mv-revela{from{clip-path:circle(0 at var(--mv-x,50%) var(--mv-y,0))}to{clip-path:circle(150vmax at var(--mv-x,50%) var(--mv-y,0))}}
html.mv-sem-transicao *,html.mv-sem-transicao *::before,html.mv-sem-transicao *::after{transition:none!important}

/* ---- 2. o vocabulário ---------------------------------------------------- */
@keyframes mv-surge{from{opacity:0;translate:0 8px}}
@keyframes mv-desce{from{opacity:0;translate:0 -6px}}
@keyframes mv-cresce{from{opacity:0;scale:.96}}
@keyframes mv-aparece{from{opacity:0}}
@keyframes mv-sobe-folha{from{translate:0 100%}}
@keyframes mv-pop{0%{scale:.6}60%{scale:1.16}100%{scale:1}}
@keyframes mv-pulinho{0%,100%{scale:1}40%{scale:1.22}}
@keyframes mv-balanca{0%,100%{rotate:0deg}15%{rotate:14deg}30%{rotate:-12deg}45%{rotate:8deg}60%{rotate:-5deg}75%{rotate:2deg}}
@keyframes mv-foco{from{outline-offset:6px;outline-color:transparent}}

/* ---- 3. o que responde ao dedo e ao mouse ----------------------------------
   Cor, fundo e borda mudam com suavidade; botão afunda um pouco no toque. */
:where(a,button,summary,[role=button],label,input,select,textarea,.chip){
  transition:color var(--mv-medio) var(--mv-suave),background-color var(--mv-medio) var(--mv-suave),
             border-color var(--mv-medio) var(--mv-suave),box-shadow var(--mv-medio) var(--mv-suave),
             opacity var(--mv-medio) var(--mv-suave),scale var(--mv-rapido) var(--mv-sai),
             translate var(--mv-medio) var(--mv-sai),rotate var(--mv-lento) var(--mv-mola);
}
:where(button,summary,[role=button],.btn):active:not(:disabled){scale:.96}
:where(a.btn,a[class*=botao],a[class*=-bt]):active{scale:.97}
:where(:focus-visible){animation:mv-foco var(--mv-medio) var(--mv-sai)}

/* o que abre: details, diálogo e popover entram, em vez de piscar */
:where(details[open]>:not(summary)){animation:mv-desce var(--mv-medio) var(--mv-sai)}
:where(dialog[open]){animation:mv-cresce var(--mv-lento) var(--mv-mola)}
:where(dialog[open])::backdrop{animation:mv-aparece var(--mv-medio) var(--mv-suave)}
:where([popover]:popover-open){animation:mv-cresce var(--mv-medio) var(--mv-sai)}

/* a barra de app do celular: o ícone da tela atual chega com um pulinho */
:where(.bnav a.on svg,.lbar a.on svg){animation:mv-pulinho 520ms var(--mv-mola) 120ms both}
:where(.bnav .bnav-mais span,.lbar .lbar-mais span){transition:scale var(--mv-rapido) var(--mv-mola),box-shadow var(--mv-medio)}
:where(.bnav .bnav-mais:active span,.lbar .lbar-mais:active span){scale:.9}

/* o botão de tema gira um pouco ao trocar */
:where(.tema-toggle,.theme-toggle):active svg{rotate:-40deg}