/**
 * Movimento e foco (AB#490). Anima apenas opacity e translate. Durações/curva vêm de tokens.css.
 *  - Entrada de rota: .page-fade-in (fade + subida de 10 px, 320 ms) reaplicada a cada render() pelo app.js.
 *  - Revelação: .rise + .d1/.d2/.d3 (subida de 12 px, 600 ms, atraso escalonado de 70 ms).
 *  - Hover de card com link: -2 px em 200 ms. Menu da conta: fade + subida em 200 ms.
 *  - Foco: anel de 2 px sólido brand com deslocamento de 2 px em todo elemento interativo, nos dois temas.
 */
@keyframes rd-enter { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes rd-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }

.page-fade-in { animation: rd-enter var(--motion-standard) var(--ease) both; }
.rise { animation: rd-rise var(--motion-reveal) var(--ease) both; }
.d1 { animation-delay: var(--motion-stagger); }
.d2 { animation-delay: calc(var(--motion-stagger) * 2); }
.d3 { animation-delay: calc(var(--motion-stagger) * 3); }

a.card, button.card, .interactive-card, .tile {
  transition: translate var(--motion-menu) var(--ease), box-shadow var(--motion-menu), border-color var(--motion-menu);
}
a.card:hover, button.card:hover, .interactive-card:hover, .tile:hover { translate: 0 -2px; }

.umenu, .profile-dropdown.open { animation: rd-enter var(--motion-menu) var(--ease) both; }

.nav-links a, .op-nav a, .mnav a, .navpill a, .pside nav a {
  transition: background var(--motion-menu) var(--ease), color var(--motion-menu);
}

/* Foco por teclado: um único anel para tudo que é interativo */
:where(a, button, input, textarea, select, summary, [role="button"], [role="switch"], [role="checkbox"], [role="radio"], [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Movimento reduzido: sem translação nem elevação; no máximo opacidade */
@media (prefers-reduced-motion: reduce) {
  .page-fade-in, .umenu, .profile-dropdown.open { animation-name: rd-fade; }
  .rise { animation-name: rd-fade; animation-delay: 0ms; }
  .d1, .d2, .d3 { animation-delay: 0ms; }
  a.card:hover, button.card:hover, .interactive-card:hover, .tile:hover { translate: none; transform: none; }
  a.card, button.card, .interactive-card, .tile { transition: none; }
  .nav-links a, .op-nav a, .mnav a, .navpill a, .pside nav a { transition: none; }
}
.reduce-motion .page-fade-in, .reduce-motion .umenu { animation-name: rd-fade; }
.reduce-motion .rise { animation-name: rd-fade; animation-delay: 0ms; }
.reduce-motion .d1, .reduce-motion .d2, .reduce-motion .d3 { animation-delay: 0ms; }
.reduce-motion a.card:hover, .reduce-motion button.card:hover, .reduce-motion .interactive-card:hover, .reduce-motion .tile:hover { translate: none; transform: none; }