/* ==========================================================================
   SGSAP — camada de movimento
   --------------------------------------------------------------------------
   Uma folha só para animação, pelo mesmo motivo que existe uma folha só para
   cor: quando o movimento fica espalhado, ninguém consegue desligá-lo de uma
   vez nem responder "quanto tempo demora esta interface?".

   Regras da casa:

   * Nenhuma cor literal. O que se anima aqui é posição, escala, opacidade e
     sombra; a cor continua vindo dos tokens.
   * Nenhum movimento essencial. Duas regras concretas saem daqui: nenhuma
     animação de entrada usa `animation-fill-mode`, e nenhum quadro de entrada
     parte de `opacity: 0`. As duas juntas garantem que animação parada nunca
     esconde nada — ver o comentário de `sgsap-surgir`.
   * Duração vem de token. Trocar o ritmo da interface é editar quatro linhas
     em sgsap-tokens.css, não caçar `0.3s` por sete arquivos.
   * `prefers-reduced-motion` desliga tudo no fim do arquivo. Quem pediu menos
     movimento ao sistema operacional recebe menos movimento, sem exceção.
   ========================================================================== */

/* --- vocabulário ---------------------------------------------------------- */

/* Entradas animam SÓ transform. Nenhum quadro daqui parte de `opacity: 0`.

   A diferença não é estética, é de segurança: um quadro que começa invisível
   deixa o elemento invisível se a animação não avançar, e animação parada
   acontece — o Chrome não dá tempo de início a uma animação criada no mesmo
   quadro em que o elemento sai de `content-visibility: hidden`, que é
   exatamente o caso do <details> da barra de edição do painel. O resultado era
   `playState: running`, `currentTime: 0` para sempre, e a barra nunca
   aparecia: do lado de fora, "o botão Editar painel não funciona".

   Com transform, o pior caso é um elemento deslocado meio centímetro. Com
   opacidade, o pior caso é conteúdo que some. */
@keyframes sgsap-surgir {
    from { transform: translateY(var(--sgsap-deslocamento, .5rem)); }
    to { transform: none; }
}

@keyframes sgsap-abrir-painel {
    from { transform: scale(.97) translateY(-.35rem); }
    to { transform: none; }
}

@keyframes sgsap-pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* Faixa de brilho que atravessa o bloco enquanto o dado não chegou. */
@keyframes sgsap-carregando {
    from { background-position: -150% 0; }
    to { background-position: 250% 0; }
}

/* --- entrada da página ---------------------------------------------------- */

/* O conteúdo entra em cascata curta. O atraso é pequeno de propósito: passar
   de ~200 ms a interface começa a parecer lenta em vez de fluida. */
.sgsap-content > * {
    animation: sgsap-surgir var(--sgsap-duracao) var(--sgsap-saida);
}

.sgsap-content > *:nth-child(2) { animation-delay: 40ms; }
.sgsap-content > *:nth-child(3) { animation-delay: 80ms; }
.sgsap-content > *:nth-child(n + 4) { animation-delay: 120ms; }

/* --- cartões -------------------------------------------------------------- */

.sgsap-shell .card {
    transition:
        transform var(--sgsap-duracao-rapida) var(--sgsap-saida),
        box-shadow var(--sgsap-duracao-rapida) var(--sgsap-saida);
}

/* Levantar o cartão só fora do modo de edição: durante a edição o cartão é
   objeto de arrasto, e mover no hover atrapalha a mira. */
.sgsap-shell .sgsap-dashboard-grid:not(.is-editing) [data-dashboard-card] .card:hover {
    box-shadow: var(--sgsap-shadow-lg);
    transform: translateY(-2px);
}

/* --- controles ------------------------------------------------------------ */

.sgsap-shell .btn,
.sgsap-shell .sgsap-button-primary {
    transition:
        background-color var(--sgsap-transition),
        border-color var(--sgsap-transition),
        color var(--sgsap-transition),
        box-shadow var(--sgsap-transition),
        transform var(--sgsap-duracao-rapida) var(--sgsap-saida);
}

.sgsap-shell .btn:active {
    transform: translateY(1px);
}

/* --- menu lateral --------------------------------------------------------- */

/* Uma barra que cresce a partir do centro marca o item apontado. Como é um
   pseudo-elemento com scaleY, não empurra o texto de lugar. */
.sgsap-sidebar .nav-link {
    position: relative;
    transition: background-color var(--sgsap-transition), padding-left var(--sgsap-duracao-rapida) var(--sgsap-saida);
}

.sgsap-sidebar .nav-link::before {
    background-color: var(--sgsap-nav-text-strong);
    bottom: .35rem;
    content: "";
    left: 0;
    position: absolute;
    top: .35rem;
    transform: scaleY(0);
    transition: transform var(--sgsap-duracao-rapida) var(--sgsap-saida);
    width: 3px;
}

.sgsap-sidebar .nav-link:hover::before,
.sgsap-sidebar .nav-link:focus-visible::before,
.sgsap-sidebar .nav-item.active .nav-link::before {
    transform: scaleY(1);
}

.sgsap-sidebar .nav-link:hover {
    padding-left: 1.15rem;
}

/* --- painéis suspensos ---------------------------------------------------- */

.sgsap-shell .dropdown-menu.show,
.sgsap-appearance__panel.show {
    animation: sgsap-abrir-painel var(--sgsap-duracao-rapida) var(--sgsap-saida);
}

/* --- barra de edição do painel -------------------------------------------- */

.sgsap-dashboard-edit-entry[open] .sgsap-dashboard-edit-toolbar {
    animation: sgsap-surgir var(--sgsap-duracao-rapida) var(--sgsap-saida);
    --sgsap-deslocamento: -.35rem;
}

/* --- espera --------------------------------------------------------------- */

/* Enquanto o indicador carrega, o bloco de status recebe uma faixa de brilho.
   O texto continua lá para quem usa leitor de tela; a animação é só a versão
   visual da mesma informação. */
.sgsap-shell [data-dashboard-state="loading"] .sgsap-dashboard-status {
    animation: sgsap-carregando 1.4s linear infinite;
    background-image: linear-gradient(
        90deg,
        var(--sgsap-surface-muted) 0%,
        var(--sgsap-surface-hover) 45%,
        var(--sgsap-surface-muted) 90%
    );
    background-size: 200% 100%;
    border-radius: var(--sgsap-radius-sm);
}

.sgsap-shell .sgsap-dashboard-builder-feedback:not(:empty) {
    animation: sgsap-surgir var(--sgsap-duracao-rapida) var(--sgsap-saida);
}

/* --- tabelas e calendário ------------------------------------------------- */

.sgsap-shell .table tbody tr {
    transition: background-color var(--sgsap-transition);
}

.sgsap-shell .sgsap-calendar-cell {
    transition: background-color var(--sgsap-transition), box-shadow var(--sgsap-transition);
}

.sgsap-shell .sgsap-calendar-chip {
    transition: transform var(--sgsap-duracao-rapida) var(--sgsap-saida), box-shadow var(--sgsap-transition);
}

.sgsap-shell .sgsap-calendar-chip:hover {
    transform: translateX(2px);
}

/* A célula que recebe o chip arrastado pulsa: confirma o alvo antes de soltar. */
.sgsap-shell .sgsap-calendar-cell.is-alvo {
    animation: sgsap-pulsar 900ms ease-in-out infinite;
}

/* --- notificações --------------------------------------------------------- */

.sgsap-shell .badge-counter {
    transition: transform var(--sgsap-duracao-rapida) var(--sgsap-saida);
}

.sgsap-shell .sgsap-appearance__trigger:hover .fa-adjust,
.sgsap-shell .nav-link:hover .badge-counter {
    transform: scale(1.12);
}

/* --- movimento reduzido --------------------------------------------------- */

/* Sem exceção. Zerar a duração em vez de usar `animation: none` mantém o
   comportamento previsível para quem lê o CSS; como nenhuma animação daqui usa
   fill-mode, o estado de repouso já é o estado completo. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-delay: 0ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}