/* Microinterações. Só animam na troca de tela (classe .enter), nunca a cada salvamento. */

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(34px); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.98); } }
@keyframes rise { from { opacity: 0; transform: translateY(13px) scale(0.98); } }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: var(--len, 400); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(166, 61, 44, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(166, 61, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(166, 61, 44, 0); } }
@keyframes shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Entrada escalonada dos blocos da página */
.page.enter > *, .page.enter .kpi-grid > *, .page.enter .golden > * > *, .page.enter .stack > * {
  animation: enter .5s var(--ease) both;
}
.page.enter > :nth-child(2), .page.enter .kpi-grid > :nth-child(1) { animation-delay: .04s; }
.page.enter > :nth-child(3), .page.enter .kpi-grid > :nth-child(2) { animation-delay: .08s; }
.page.enter > :nth-child(4), .page.enter .kpi-grid > :nth-child(3) { animation-delay: .12s; }
.page.enter > :nth-child(5), .page.enter .kpi-grid > :nth-child(4) { animation-delay: .16s; }
.page.enter .golden > * > :nth-child(2) { animation-delay: .2s; }
.page.enter .golden > * > :nth-child(3) { animation-delay: .26s; }

/* Barras do gráfico e medidores crescem na entrada */
.page.enter .chart rect.bar-in, .page.enter .chart rect.bar-out { animation: grow-y .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms + .15s); }
.page.enter .meter > i { animation: grow-x .9s var(--ease) both .2s; }
.page.enter .spark-line { stroke-dasharray: var(--len, 400); animation: draw 1.2s var(--ease) both .2s; }

/* Brilho metálico discreto no destaque principal */
.kpi.hero::before { background-size: 200% 100%; background-image: linear-gradient(90deg, #a88040, #f5ce72, #d4a853, #a88040); animation: shine 6s linear infinite; }

/* Linha da tabela recém-alterada */
.flash { animation: flash 1.4s var(--ease); }
@keyframes flash { 0% { background: rgba(212, 168, 83, 0.22); } 100% { background: transparent; } }

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