/* Movimento: só transform e opacity (mais o traço do gráfico). Entrada de tela abaixo de 500 ms. */
:root { --sai: cubic-bezier(.16, 1, .3, 1); }
html { -webkit-tap-highlight-color: transparent; }

@keyframes sobe { from { opacity: 0; transform: translateY(10px); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes encher { from { transform: scaleX(0); } }
@keyframes desenha { from { stroke-dashoffset: var(--len); } }
@keyframes entra-sheet { from { transform: translateY(28px); opacity: 0; } }
@keyframes entra-aviso { from { transform: translateY(14px); opacity: 0; } }
@keyframes sai-aviso { to { transform: translateY(8px); opacity: 0; } }
@keyframes marca { from { stroke-dashoffset: 24; } }

/* Troca de tela: fade e deslocamento curto, com os blocos entrando em sequência. */
.entra > :not(.colunas) { animation: sobe 220ms var(--sai) backwards; }
.entra > :nth-child(2) { animation-delay: 40ms; }
.entra > :nth-child(3) { animation-delay: 80ms; }
.entra > :nth-child(n+4) { animation-delay: 120ms; }
.entra .colunas > div > *, .entra .colunas > section { animation: sobe 240ms var(--sai) backwards; }
.entra .colunas > .coluna-a > *, .entra .colunas > section:first-child { animation-delay: 60ms; }
.entra .coluna-b > :nth-child(1), .entra .colunas > section:nth-child(2) { animation-delay: 120ms; }
.entra .coluna-b > :nth-child(n+2) { animation-delay: 180ms; }

/* Barra de aulas enchendo. */
.progresso span.cheio { transform-origin: left center; animation: encher 420ms var(--sai) 160ms backwards; }

/* Gráfico: a linha se desenha, os pontos aparecem depois. */
.g-linha.anima { animation: desenha 460ms var(--sai) 80ms backwards; }
.grafico.anima .g-ponto, .grafico.anima .g-ponto-ativo { animation: aparece 200ms ease-out 380ms backwards; }

/* Resposta ao toque. */
.btn, .item-treino, .duvida-linha, .segmento, .abas a, .menu a, .pessoa { transition: transform 90ms ease-out; }
.btn:active, .item-treino:active, .duvida-linha:active, .segmento:active, .abas a:active, .menu a:active { transform: scale(.98); }
.btn-primario:active { filter: brightness(.92); }
.btn-sec:active, .btn-texto:active { background: var(--s2); }
.btn-perigo:active { background: rgba(240, 138, 132, .1); }
.item-treino:active { background: var(--s2); }
.duvida-linha:active { background: var(--s2); }

/* Indicador deslizante das abas e do menu lateral. */
.abas .indicador, .menu .indicador { position: absolute; pointer-events: none; }
.abas .indicador { top: -1px; left: 0; width: 25%; height: 3px; display: flex; justify-content: center; transform: translateX(calc(var(--i, 0) * 100%)); }
.abas .indicador::after { content: ""; width: 32px; height: 3px; border-radius: 0 0 2px 2px; background: var(--txt); }
.menu { position: relative; }
.menu .indicador { left: 0; top: 0; width: 100%; height: 44px; border-radius: 10px; background: var(--s2); z-index: 0; transform: translateY(calc(var(--i, 0) * 48px)); }
.menu a { position: relative; z-index: 1; }
.menu-pronto .abas .indicador, .menu-pronto .menu .indicador { transition: transform 240ms var(--sai), opacity 160ms; }
.sem-ativo .indicador { opacity: 0; }

/* Sheet e aviso. */
.sheet-fundo { animation: aparece 160ms ease-out; }
.sheet { animation: entra-sheet 240ms var(--sai); }
.aviso { display: flex; align-items: center; justify-content: center; gap: var(--e2); animation: entra-aviso 220ms var(--sai); }
.aviso.saindo { animation: sai-aviso 180ms ease-in forwards; }
.aviso-marca { flex-shrink: 0; }
.aviso-marca path { stroke-dasharray: 24; animation: marca 320ms ease-out 120ms backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Atualização silenciosa com dado novo: sem refazer nenhuma animação. */
.quieto *:not(.anima):not(.g-ponto):not(.g-ponto-ativo) { animation: none !important; }
.quieto { animation: none !important; }