/* ───────────────────────────────────────────────────────────
   Help4 — camada de "vida": entradas suaves, hover, gradientes vivos.
   Respeita prefers-reduced-motion.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

    /* conteúdo principal entra suave a cada navegação */
    .mud-main-content { animation: h4fade .4s ease both; }

    /* containers/painéis sobem entrando (opacity + leve translate) */
    .h4-hero, .cic-hero, .rep-hero, .wz-top, .stage, .cic-sec, .mvv-c,
    .kb-col, .eg-card, .es-card, .re-wrap, .mud-expansion-panels, .mud-table-container {
        animation: h4rise .5s cubic-bezier(.2,.7,.3,1) both;
    }

    /* cards clicáveis: entrada só em opacity (deixa o hover usar transform) */
    .item-card, .kpi, .cic-kpi, .kb-card, .mud-card, .es-item {
        animation: h4fade .45s ease both;
    }

    /* hover dos cards: SEM deslocamento (transform) — só sombra/borda/brilho.
       Mover o card no hover fazia o cursor "sair" pela borda e re-entrar = tremor.
       O !important também neutraliza translateY de hovers definidos nos componentes. */
    .item-card, .kpi, .cic-kpi, .kb-card, .mud-card, .cic-plano, .es-card, .mvv-c, .stage {
        transition: box-shadow .2s ease, border-color .18s ease, filter .18s ease;
    }
    a.item-card:hover, .kpi:hover, .cic-kpi:hover, .kb-card:hover, .mud-card:hover,
    .cic-plano:hover, .es-card:hover, .mvv-c:hover {
        transform: none !important;
        box-shadow: 0 16px 36px -20px rgba(0,0,0,.6);
        border-color: var(--mud-palette-primary);
        filter: brightness(1.02);
    }

    /* botões de AÇÃO: brilho/elevação no hover e "pressão" no clique.
       Escopo restrito de propósito — NÃO mexe em switch/checkbox/radio/icon-button
       (a regra genérica .mud-button-root fazia o MudSwitch "tremer" no hover). */
    .mud-button-filled, .mud-button-outlined, .gen-pill, .add-btn {
        transition: filter .15s ease, box-shadow .18s ease;
    }
    .mud-button-filled:hover, .mud-button-outlined:hover, .gen-pill:hover, .add-btn:hover { filter: brightness(1.07); box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
    .mud-button-filled:active, .mud-button-outlined:active, .gen-pill:active, .add-btn:active { transform: translateY(1px) scale(.99); }

    /* nav: link desliza e o ícone "respira" no hover */
    .h4-nav .mud-nav-link { transition: background .15s ease, transform .15s ease; }
    .h4-nav .mud-nav-link:hover { transform: translateX(3px); }

    /* heros com gradiente vivo (deslocamento lento e contínuo) */
    .h4-hero, .cic-hero, .wz-top, .rep-hero { background-size: 200% 200%; animation: h4rise .5s cubic-bezier(.2,.7,.3,1) both, h4grad 16s ease-in-out infinite; }
    @keyframes h4grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

    /* KPIs: número "salta" ao montar */
    .kpi .valor, .cic-kpi .v, .kpi-num, .ia-pill b { display: inline-block; animation: h4pop .55s cubic-bezier(.2,1.7,.4,1) both; }

    /* chips dão um leve zoom no hover */
    .mud-chip { transition: transform .15s ease; }
    .mud-chip:hover { transform: scale(1.06); }

    /* linhas de tabela acendem no hover */
    .mud-table-row { transition: background-color .14s ease; }

    /* barras de progresso preenchem animadas (quando largura muda) */
    .cic-bar i, .cic-plano-bar i, .mt-bar-track i, .mini-prog i, .mini-prog .seg-det, .wz-prog i { transition: width .6s cubic-bezier(.3,.8,.3,1); }

    @keyframes h4fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes h4rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes h4pop  { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
}