/* =====================================================================
 * CREPHIMat — camada de movimento e interação
 *
 * Tudo aqui é MELHORIA PROGRESSIVA:
 *  - o conteúdo nunca depende de animação para aparecer;
 *  - tudo que se move está dentro de `prefers-reduced-motion: no-preference`;
 *  - só se anima `opacity`, `transform`/`translate`/`scale` (compositor);
 *  - recursos recentes (view transitions, scroll-driven, sibling-index)
 *    ficam atrás de @supports, com fallback em assets/js/ui-movimento.js.
 *
 * Componentes:
 *   .ui-revelar     → surge ao entrar na tela (rolagem)
 *   .ui-escalonar   → filhos entram em sequência (carregamento)
 *   .ui-elevavel    → cartão que sobe e ganha sombra no hover/foco
 *   [data-ui-contar]→ número que conta até o valor (ui-movimento.js)
 * ===================================================================== */

:root {
    --mv-ease: cubic-bezier(.16, 1, .3, 1);     /* desacelera no fim: sensação de "pousar" */
    --mv-passo: 70ms;                           /* atraso entre irmãos no escalonamento */
}

/* ---------------------------------------------------------------- 1. Interações (hover/foco/clique) */
/* Funcionam com ou sem movimento reduzido: são respostas diretas ao usuário,
   e só mudam cor/sombra quando o usuário prefere menos movimento. */
.ui-elevavel {
    transition: box-shadow 220ms var(--ui-easing), border-color 220ms var(--ui-easing);
}
.ui-elevavel:hover,
.ui-elevavel:focus-within {
    box-shadow: var(--ui-sombra-hover);
    border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--ui-borda));
}

@media (prefers-reduced-motion: no-preference) {
    .ui-elevavel { transition-property: box-shadow, border-color, translate; }
    .ui-elevavel:hover,
    .ui-elevavel:focus-within { translate: 0 -4px; }

    /* Botões "afundam" ao clicar */
    .btn:not(:disabled):active { scale: .97; }
    .btn { transition-property: background-color, border-color, color, box-shadow, scale; }

    /* Menu principal: sublinhado que cresce do centro (usa ::before: ::after é a seta do dropdown) */
    .ui-navbar .nav-link { position: relative; }
    .ui-navbar .nav-link::before {
        content: ""; position: absolute; inset: auto .8rem .25rem; height: 2px; border-radius: 2px;
        background: currentColor; scale: 0 1; transition: scale 260ms var(--mv-ease);
    }
    .ui-navbar .nav-link:hover::before,
    .ui-navbar .nav-link:focus-visible::before,
    .ui-navbar .nav-link.active::before { scale: 1 1; }
    .ui-navbar .nav-link.active { box-shadow: none; }

    /* Dropdowns abrem com um leve deslize */
    .dropdown-menu.show { animation: mv-menu 180ms var(--mv-ease) both; transform-origin: top; }

    /* Sidebar do admin: ícone avança no hover e o item ativo "acende" */
    .admin-sidebar .nav-link { transition: background-color 160ms var(--ui-easing), color 160ms var(--ui-easing); }
    .admin-sidebar .nav-link i { transition: translate 220ms var(--mv-ease), scale 220ms var(--mv-ease); }
    .admin-sidebar .nav-link:hover i { translate: 3px 0; scale: 1.1; }

    /* Linhas das tabelas aparecem suavemente a cada redesenho (ordenar/paginar) */
    table.dataTable tbody tr { animation: mv-fade 260ms ease-out both; }
}

@keyframes mv-menu { from { opacity: 0; translate: 0 -6px; scale: 1 .96; } }
@keyframes mv-fade { from { opacity: 0; } }

/* ---------------------------------------------------------------- 2. Entrada em sequência (carregamento) */
@media (prefers-reduced-motion: no-preference) {
    .ui-escalonar > * {
        animation: mv-sobe 640ms var(--mv-ease) backwards;
        /* Navegadores sem sibling-index(): o JS define --sibling-index; sem JS, ordem 1 (tudo junto). */
        animation-delay: calc(var(--sibling-index, 1) * var(--mv-passo));
        animation-delay: calc(sibling-index() * var(--mv-passo));
    }
    .ui-vazio__icone { animation: mv-pop 600ms var(--mv-ease) backwards; }
}
@keyframes mv-sobe { from { opacity: 0; translate: 0 1.25rem; } }
@keyframes mv-pop  { from { opacity: 0; scale: .6; } }

/* ---------------------------------------------------------------- 3. Revelar ao rolar */
@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        .ui-revelar {
            animation: mv-revelar linear both;
            animation-timeline: view();              /* depois do shorthand, senão ele é zerado */
            animation-range: entry 5% entry 40%;
        }
        /* Barra de progresso de leitura no topo (decorativa) */
        body::before {
            content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1090;
            background: linear-gradient(90deg, var(--bs-primary), var(--crephimat-accent));
            transform-origin: 0 50%; scale: 0 1; pointer-events: none;
            animation: mv-progresso linear both; animation-timeline: scroll(root);
        }
    }
    /* Fallback (Firefox): ui-movimento.js marca <html class="mv-js"> e usa IntersectionObserver */
    .mv-js .ui-revelar { translate: 0 1.5rem; filter: blur(6px); transition: translate 640ms var(--mv-ease), filter 640ms var(--mv-ease); }
    .mv-js .ui-revelar.mv-visivel { translate: 0 0; filter: none; }
}
/* Sobe e "entra em foco". Sem opacidade de propósito: texto semitransparente reprova em
   auditorias de contraste (axe/Lighthouse) enquanto espera abaixo da dobra. */
@keyframes mv-revelar { from { translate: 0 1.5rem; filter: blur(6px); } }
@keyframes mv-progresso { to { scale: 1 1; } }

/* ---------------------------------------------------------------- 4. Hero da home e diagrama */
.hero-crephimat .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
    /* As lavagens (manchas desfocadas) derivam em sentidos opostos com o mouse (valores de ui-movimento.js) */
    .hero-crephimat.ui-lavagem::before { translate: calc(var(--mv-px, 0) * -36px) calc(var(--mv-py, 0) * -24px); transition: translate 600ms ease-out; }
    .hero-crephimat.ui-lavagem::after  { translate: calc(var(--mv-px, 0) * 30px)  calc(var(--mv-py, 0) * 20px);  transition: translate 600ms ease-out; }

    /* Diagrama: os fios se desenham conforme a figura entra na tela */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        .ui-fluxo .fio { stroke-dasharray: 1; animation: mv-tracar linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
        .ui-fluxo .no, .ui-fluxo text, .ui-fluxo .hub, .ui-fluxo .ponto { animation: mv-fade linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    }
}
@keyframes mv-tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- 5. Transições entre páginas (MPA) */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    /* Elementos que persistem entre páginas ficam parados em vez de piscar */
    .barra-acessibilidade { view-transition-name: mv-a11y; }
    .ui-navbar            { view-transition-name: mv-navbar; }
    .admin-sidebar        { view-transition-name: mv-sidebar; }

    ::view-transition-old(root) { animation: 140ms ease-in both mv-sai; }
    ::view-transition-new(root) { animation: 320ms var(--mv-ease) both mv-entra; }

    /* Troca de tema: círculo que nasce no botão (classe posta por ui-movimento.js) */
    html.mv-tema::view-transition-old(root),
    html.mv-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
    html.mv-tema::view-transition-new(root) { animation: 520ms var(--mv-ease) both mv-circulo; z-index: 2; }
    html.mv-tema::view-transition-old(root) { z-index: 1; }
}
@keyframes mv-sai    { to { opacity: 0; } }
@keyframes mv-entra  { from { opacity: 0; translate: 0 .5rem; } }
@keyframes mv-circulo {
    from { clip-path: circle(0 at var(--mv-cx, 50%) var(--mv-cy, 0)); }
    to   { clip-path: circle(150vmax at var(--mv-cx, 50%) var(--mv-cy, 0)); }
}

/* ---------------------------------------------------------------- 6. Movimento reduzido: estados de carregamento ficam estáticos */
@media (prefers-reduced-motion: reduce) {
    .ui-esqueleto__celula { animation: none; opacity: .75; }
    html { scroll-behavior: auto; }
}

/* Impressão: nada de conteúdo escondido esperando animação */
@media print {
    .ui-revelar, .ui-escalonar > *, .ui-fluxo .fio, .ui-fluxo .no, .ui-fluxo text { animation: none !important; opacity: 1 !important; translate: none !important; filter: none !important; stroke-dashoffset: 0 !important; }
    body::before { display: none !important; }
}

/* Números alinhados enquanto contam (evita tremor) */
[data-ui-contar] { font-variant-numeric: tabular-nums; }