/*!
 * visual-novo-anima.css
 *
 * Atle-Desenvolvimento Scripts
 * © 2026 Atle Consultoria Empresarial
 *
 * SOFTWARE PROPRIETÁRIO — TODOS OS DIREITOS RESERVADOS.
 * A cópia, reprodução, distribuição, engenharia reversa ou uso
 * deste código, no todo ou em parte, sem autorização escrita da
 * Atle Consultoria Empresarial, é proibida e sujeita às sanções
 * da Lei 9.609/98 e da Lei 9.610/98.
 *
 */

/* ═══════════════════════════════════════════════════════════════════════
   MOVIMENTO — o vocabulário de animação do artefato
   ═══════════════════════════════════════════════════════════════════════

   Pedido: *"precisa agora melhorar as animacoes"*.

   🔴 O QUE FALTAVA NÃO ERA "MAIS ANIMAÇÃO", ERA RESPOSTA AO TOQUE. As camadas
   1 a 3 já tinham transições de cor e de largura, mas nada acontecia quando a
   pessoa CLICA: o botão não afunda, o chip não reage, a bolinha do interruptor
   não se alonga. É essa meia dúzia de milissegundos que faz a tela parecer
   viva em vez de parecer uma foto — e o artefato tem tudo isso medido.

   ⚠️ TODO VALOR AQUI SAIU DO ARTEFATO, não do gosto:
     --nv-mola    cubic-bezier(.34,1.56,.64,1)  passa do destino e volta
     --nv-saida   cubic-bezier(.22,.61,.36,1)   desacelera até parar
     durações     .09s (toque) · .12/.14/.16s (cor, foco) · .22s (abrir/fechar)
                  .2s (entrada de camada) · .34s (o andar do interruptor)
     afundar      botão .955 · botão quieto .96 · ícone .9 · chip .93
     bolinha       alonga de 12 para 16px enquanto o dedo está em cima
     `sobe`       de opacity 0 + translateY(10px) scale(.985) para nada
     `pisca`      .32 → 1 → .32 em 1,6s, para o que está AO VIVO
     `corre`      -110% → 280% em 1,25s, o brilho que atravessa o esqueleto

   🔴 E A REGRA QUE NÃO É ENFEITE: `prefers-reduced-motion`. Quem liga essa
   opção no sistema operacional costuma ter enxaqueca vestibular ou vertigem —
   animação não é preferência estética para essa pessoa, é sintoma. Com ela
   ligada tudo cai para .01s e o afundar sai de cena. O artefato faz isso e é
   por isso que está aqui.
   ⚠️ `.01s` e não `0s`: duração zero cancela o evento `transitionend`, e há
   código que espera por ele para limpar estado.

   🔴 E TODO SELETOR TRAZ `[data-swgma-mode]` pelo motivo da camada 2: a coluna
   do MEIO da especificidade é comparada antes da dos elementos, e o
   `swgma-theme.css` veste `.btn` com dois atributos. Sem isso esta folha
   carregava, os tokens valiam, e NENHUMA regra de movimento pegava — foi
   exatamente o que a prova acusou na primeira execução.

   ═══════════════════════════════════════════════════════════════════════ */

html[data-swgma-theme^="novo-"][data-swgma-mode] {
  --nv-mola: cubic-bezier(.34, 1.56, .64, 1);
  --nv-saida: cubic-bezier(.22, .61, .36, 1);
  --nv-t-toque: .09s;
  --nv-t-cor: .14s;
  --nv-t-abre: .22s;
}

/* ── AFUNDAR AO TOCAR ───────────────────────────────────────────────────
   O tamanho do recuo diz o peso da peça: botão cheio afunda menos (.955),
   ícone solto afunda mais (.9) porque é pequeno e precisa de sinal maior. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn,
html[data-swgma-theme^="novo-"][data-swgma-mode] .chip,
html[data-swgma-theme^="novo-"][data-swgma-mode] .filter-pill,
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-lancador,
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-apps > *,
html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-item,
html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-group-header {
  /* ⚠️ `!important` aqui porque `style.css` e `swgma-theme.css` também
     declaram `transition` no `.btn` e empatam em especificidade — sem isto o
     afundar acontecia com a curva de fábrica (`transform .12s`) em vez da
     mola. A camada de MOVIMENTO é a dona do movimento; cor e forma continuam
     das outras. */
  transition: background var(--nv-t-cor) ease,
              color var(--nv-t-cor) ease,
              border-color var(--nv-t-cor) ease,
              box-shadow var(--nv-t-cor) ease,
              transform .18s var(--nv-mola) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn:active {
  transform: scale(.955) !important;
  transition-duration: var(--nv-t-toque);
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-outline:active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-secondary:active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .btn-sm:active { transform: scale(.96) !important; }
html[data-swgma-theme^="novo-"][data-swgma-mode] .chip:active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .filter-pill:active { transform: scale(.93) !important; }
/* ícone solto: o puxador, o hambúrguer, o lançador e cada app dele */
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-puxador:active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-hamb:active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-lancador:active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-apps > *:active {
  transform: scale(.9) !important;
  transition-duration: var(--nv-t-toque);
}
/* item de menu: recuo mínimo — a lista inteira tremendo incomoda */
html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-item:active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-group-header:active { transform: scale(.985) !important; }

/* ── O INTERRUPTOR: a bolinha se ALONGA enquanto o dedo está em cima ────
   É o detalhe que faz o interruptor parecer físico. Medido: 12 → 16px, e o
   andar usa a mola (passa do destino e volta), não `ease`. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch .switch-track::after {
  transition: transform .34s var(--nv-mola), width .2s var(--nv-mola),
              background var(--nv-t-cor) ease !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch:active .switch-track::after { width: 16px !important; }
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch:active input:checked ~ .switch-track::after {
  width: 16px !important; transform: translateX(8px) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch .switch-track {
  transition: background .28s var(--nv-mola), border-color .2s ease !important;
}

/* ── ENTRADA DE CAMADA: `sobe` ──────────────────────────────────────────
   Diálogo e painel de conta entram subindo 10px com um leve encolhimento.
   Aparecer do nada é o que faz uma camada grande parecer "pulo".

   🔴 O LANÇADOR FICOU DE FORA, A PEDIDO: *"remova a animacao do menu do
   google que criamos"*. E o pedido tem razão de ser — o lançador abre
   ENCOSTADO no botão que foi clicado, a 8px dele. Subir 10px num painel
   que nasce colado no gatilho lê como tremida, não como entrada; a
   animação de subir serve para camada que nasce no MEIO da tela, longe
   de onde a mão estava. Ele aparece direto. */
@keyframes nv-sobe {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-conta-veu:not([hidden]) > *,
html[data-swgma-theme^="novo-"][data-swgma-mode] .modal.show .modal-content,
html[data-swgma-theme^="novo-"][data-swgma-mode] .modal-overlay:not([hidden]) .modal-content {
  animation: nv-sobe .2s var(--nv-saida);
}
/* o véu escurece em fade, sem subir: ele é fundo, não camada */
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-conta-veu,
html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-veu {
  transition: opacity .16s ease;
}

/* ── AO VIVO: `pisca` ───────────────────────────────────────────────────
   Só para o que REALMENTE está acontecendo agora (ponto de "ao vivo",
   indicador de gravação). Piscar decoração cansa e rouba a atenção do que
   importa. */
@keyframes nv-pisca {
  0%, 100% { opacity: .32; }
  50%      { opacity: 1; }
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .live-dot,
html[data-swgma-theme^="novo-"][data-swgma-mode] .sfe-live-dot,
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-vivo] {
  animation: nv-pisca 1.6s ease-in-out infinite;
}

/* ── ESQUELETO DE CARREGAMENTO: `corre` ─────────────────────────────────
   🔴 São 310 `.skeleton` no People, e todos eram blocos cinza PARADOS. Bloco
   parado não diz "estou carregando", diz "quebrou". O brilho que atravessa
   diz que há algo em curso — é a diferença entre esperar e desconfiar. */
@keyframes nv-corre {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .skeleton {
  position: relative;
  overflow: hidden;
  background: var(--nv-preenche, #E5E5EA) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg,
              transparent,
              color-mix(in srgb, var(--sw-canvas, #fff) 70%, transparent),
              transparent);
  animation: nv-corre 1.25s ease-in-out infinite;
}

/* ── A PÁGINA TROCA EM FADE ─────────────────────────────────────────────
   Medido no artefato: `.pagina{transition:opacity .22s ease}`. Sem isso o
   conteúdo novo aparece de estalo em cima do antigo. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .page-body {
  transition: opacity var(--nv-t-abre) ease;
}

/* ── O TRILHO E O PAINEL usam a curva de SAÍDA, não `ease` ──────────────
   Abrir e fechar é movimento com destino: desacelera até parar. `ease`
   desacelera E acelera, o que numa largura de 182px lê como hesitação. */
html[data-swgma-theme^="novo-"][data-swgma-mode] #sidebar {
  transition: width var(--nv-t-abre) var(--nv-saida),
              box-shadow var(--nv-t-abre) ease !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-group-items {
  transition: none;   /* altura desconhecida: quem anima é o `display`, e meia animação é pior que nenhuma */
}

/* ═══ MOVIMENTO REDUZIDO ═══════════════════════════════════════════════
   🔴 NÃO É PREFERÊNCIA ESTÉTICA. Quem liga esta opção no sistema costuma ter
   vertigem ou enxaqueca vestibular: para essa pessoa, animação é sintoma.
   Tudo cai para .01s, o afundar sai de cena e o que é INFINITO para de vez —
   um ponto piscando sem parar é o pior caso.
   ⚠️ `.01s` e não `0s`: duração zero não dispara `transitionend`, e há código
   que espera esse evento para limpar estado. */
@media (prefers-reduced-motion: reduce) {
  /* ⚠️ O CORINGA `*` NÃO BASTA. A regra do conjunto pressionável usa
     `transition: … !important` e é (0,3,1); o coringa é (0,2,0). Entre dois
     `!important` ganha quem tem mais especificidade — então a duração ficava
     em .14s mesmo com movimento reduzido pedido. A lista precisa ser repetida
     aqui, com o mesmo alcance. É a terceira vez que a coluna do meio decide;
     ver [[css-especificidade-coluna-do-meio]]. */
  html[data-swgma-theme^="novo-"][data-swgma-mode] .btn,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .chip,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .filter-pill,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-lancador,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-apps > *,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-item,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-group-header,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch .switch-track,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch .switch-track::after,
  html[data-swgma-theme^="novo-"][data-swgma-mode] #sidebar {
    transition-duration: .01s !important;
  }
  html[data-swgma-theme^="novo-"][data-swgma-mode] *,
  html[data-swgma-theme^="novo-"][data-swgma-mode] *::before,
  html[data-swgma-theme^="novo-"][data-swgma-mode] *::after {
    transition-duration: .01s !important;
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
  }
  html[data-swgma-theme^="novo-"][data-swgma-mode] .btn:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .chip:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .filter-pill:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-lancador:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-apps > *:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-puxador:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .nv-hamb:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-item:active,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .sidebar-group-header:active {
    transform: none !important;
  }
  html[data-swgma-theme^="novo-"][data-swgma-mode] .form-switch:active .switch-track::after { width: 12px !important; }
  html[data-swgma-theme^="novo-"][data-swgma-mode] .skeleton::after { animation: none !important; display: none; }
  html[data-swgma-theme^="novo-"][data-swgma-mode] .live-dot,
  html[data-swgma-theme^="novo-"][data-swgma-mode] .sfe-live-dot,
  html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-vivo] { animation: none !important; opacity: 1 !important; }
}