/* Movimento: entradas em cascata, troca de tela, toques e detalhes vivos. Tudo curto (≤ 400 ms) e com a
   mesma curva do sistema; some inteiro com "reduzir movimento" ligado no aparelho. */
:root { --mola: cubic-bezier(.32, .72, 0, 1); --mola-2: cubic-bezier(.34, 1.4, .64, 1); }

/* Cartões entram em cascata quando a tela aparece */
.tela > .grade > .cartao, .tela > .grade > div > .cartao, .tela > .cartao { animation: sobe-suave .5s var(--mola) both; }
.tela > .grade > .cartao:nth-child(2), .tela > .grade > div > .cartao:nth-child(2) { animation-delay: .05s; }
.tela > .grade > .cartao:nth-child(3), .tela > .grade > div > .cartao:nth-child(3) { animation-delay: .1s; }
.tela > .grade > .cartao:nth-child(4), .tela > .grade > div > .cartao:nth-child(4) { animation-delay: .15s; }
.tela > .grade > div > .cartao:nth-child(5) { animation-delay: .2s; }
.tela > .grade > div > .cartao:nth-child(6) { animation-delay: .25s; }
.lista > *, .tabela tbody tr { animation: aparece-linha .35s var(--mola) both; }
.lista > *:nth-child(n+2), .tabela tbody tr:nth-child(n+2) { animation-delay: calc(var(--i, 1) * 25ms); }
@keyframes sobe-suave { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes aparece-linha { from { opacity: 0; transform: translateX(-6px); } }

/* Troca de tela com a API de transição de vista (quem não tem, usa a animação "entra" normal) */
::view-transition-old(root) { animation: some-tela .18s ease-in both; }
::view-transition-new(root) { animation: entra-tela .3s var(--mola) both; }
@keyframes some-tela { to { opacity: 0; transform: translateY(-6px); } }
@keyframes entra-tela { from { opacity: 0; transform: translateY(10px); } }
.lateral, .topo, .barra-cel { view-transition-name: fixo; }
::view-transition-group(fixo) { animation: none; }

/* Cartões e linhas respondem ao passar do mouse */
.cartao { transition: transform var(--tr), box-shadow var(--tr); }
.grade > .cartao:hover, .grade > div > .cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.numero .valor { animation: numero-entra .6s var(--mola) both; }
@keyframes numero-entra { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }

/* Botões: afundam ao toque e brilham ao passar */
.btn { position: relative; overflow: hidden; transition: transform var(--tr-r), background var(--tr-r), box-shadow var(--tr-r); }
.btn:not(.cinza):not(.claro):not(.icone):hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--azul) 35%, transparent); }
.btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.btn.tocado::after { opacity: 1; transition: none; animation: onda .5s ease-out; }
@keyframes onda { from { transform: scale(0); opacity: .9; } to { transform: scale(2.5); opacity: 0; } }
.btn:active { transform: scale(.96); }

/* Menu lateral: o item ativo desliza; os outros ganham um leve avanço ao passar */
.nav a { transition: background var(--tr-r), color var(--tr-r), transform var(--tr-r), padding-left var(--tr-r); }
.nav a:hover:not(.ativo) { padding-left: 14px; }
.nav a.ativo { box-shadow: 0 4px 14px color-mix(in srgb, var(--azul) 40%, transparent); animation: pulso-ativo .4s var(--mola-2); }
@keyframes pulso-ativo { from { transform: scale(.97); } }
.nav a svg { transition: transform var(--tr-r); } .nav a:hover svg { transform: scale(1.12) rotate(-4deg); }

/* Barras de progresso crescem ao aparecer; a linha do "agora" pulsa */
.numero .barra i { animation: cresce-barra .9s var(--mola) both; transform-origin: left; }
@keyframes cresce-barra { from { transform: scaleX(0); } }
.agora::before { animation: pulsa 2s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.6); opacity: .5; } }
.evento { transition: transform var(--tr-r), box-shadow var(--tr-r), opacity var(--tr-r); animation: sobe-suave .4s var(--mola) both; }
.evento:hover { transform: scale(1.02) translateX(1px); }

/* Segmentos: o fundo do ativo desliza em vez de piscar */
.segmentos button { transition: background var(--tr), color var(--tr-r), box-shadow var(--tr), transform var(--tr-r); }
.segmentos button:active { transform: scale(.95); }
.etiqueta { transition: transform var(--tr-r); } .lista > *:hover .etiqueta { transform: scale(1.04); }
.chave::after { transition: transform var(--tr-r), box-shadow var(--tr-r); } .chave:active::after { width: 30px; }
.chave.ligada { animation: chave-liga .3s var(--mola-2); } @keyframes chave-liga { from { transform: scale(.94); } }

/* Folhas e avisos com mola */
.folha { animation: folha-sobe .38s var(--mola-2); }
@keyframes folha-sobe { from { opacity: 0; transform: translateY(28px) scale(.96); } }
.aviso { animation: aviso-entra .35s var(--mola-2); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-14px) scale(.95); } }
.esqueleto { animation: brilha 1.4s infinite, sobe-suave .3s var(--mola) both; }

/* Odontograma: dentes respondem ao toque; marcação nova "pisca" uma vez */
.dente svg { transition: transform var(--tr-r); } .dente:hover svg { transform: translateY(-2px) scale(1.08); } .dente:active svg { transform: scale(.95); }
.dente .face { transition: fill .25s, stroke .15s; }

/* Entrada: fundo com luz que respira, logo flutua, caixa sobe */
.entrada-tela { position: relative; overflow: hidden; }
.entrada-tela::before, .entrada-tela::after { content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; z-index: 0; }
.entrada-tela::before { background: var(--azul); top: -30vmax; left: -20vmax; animation: deriva 14s ease-in-out infinite alternate; }
.entrada-tela::after { background: var(--azul-2); bottom: -30vmax; right: -20vmax; animation: deriva 18s ease-in-out infinite alternate-reverse; }
@keyframes deriva { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
.entrada-tela.com-fundo { background-size: cover; background-position: center; }
.entrada-tela.com-fundo::before, .entrada-tela.com-fundo::after { opacity: .2; }
.entrada-caixa { position: relative; z-index: 1; }
.entrada-caixa img { animation: flutua 5s ease-in-out infinite, sobe-suave .6s var(--mola) both; }
@keyframes flutua { 50% { transform: translateY(-6px); } }
.entrada-caixa h1 { animation: sobe-suave .6s .08s var(--mola) both; }
.entrada-caixa p { animation: sobe-suave .6s .14s var(--mola) both; }
.entrada-caixa .cartao { animation: sobe-suave .6s .2s var(--mola) both; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: color-mix(in srgb, var(--fundo-2) 80%, transparent); }
.codigo input { transition: letter-spacing .3s, border-color var(--tr-r), box-shadow var(--tr-r); } .codigo input:focus { letter-spacing: .5em; }

/* Marca na barra lateral: o ícone gira de leve ao passar */
.marca img { transition: transform .5s var(--mola-2); } .marca:hover img { transform: rotate(-8deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .tela > .grade > .cartao, .tela > .grade > div > .cartao, .tela > .cartao, .lista > *, .tabela tbody tr, .numero .valor, .numero .barra i, .evento, .folha, .aviso, .entrada-caixa *, .nav a.ativo, .chave.ligada { animation: none !important; }
  .entrada-tela::before, .entrada-tela::after, .agora::before { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}