/*
 * Movimento da base comum do protótipo.
 * Durações e curva vêm de tokens.css (também definidos no :root, porque os pseudo-elementos
 * ::view-transition-* herdam do :root e não do wrapper .mr-theme).
 * Tudo é desligado com `prefers-reduced-motion: reduce`; navegador sem View Transitions troca a página sem animação.
 */

/* ---------- Transição entre páginas (View Transitions entre documentos) ---------- */

/*
 * ATENÇÃO (medido no Chromium 153): o navegador lê o opt-in cedo; só no CSS externo ele falha em ~70% das
 * navegações ("Transition was aborted ... ViewTransition opt-in disabled"). Com a MESMA regra num <style>
 * inline no <head>, antes dos <link>, deu 0 falhas em 20. A página gerada deve trazer esse <style> inline
 * (veja BASE.md); a regra abaixo fica como reserva e documentação.
 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }
}

.mr-page { view-transition-name: mr-page; }
/* Menu lateral do canvas: grupo próprio, para ficar parado enquanto o conteúdo troca. */
.mr-page nav[aria-label="Principal"] { view-transition-name: mr-nav; }

@keyframes mr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mr-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mr-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes mr-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes mr-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes mr-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes mr-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@keyframes mr-spin { to { transform: rotate(360deg); } }

::view-transition-old(mr-page) { animation: mr-fade-out var(--mr-dur-fast) ease both; }
::view-transition-new(mr-page) { animation: mr-fade-in var(--mr-dur) var(--mr-ease) both; }
/* O menu não se mexe: cruzamento sem deslocamento e sem desvanecer em dobro. */

::view-transition-old(mr-nav) { animation: none; opacity: 0; }
::view-transition-new(mr-nav) { animation: none; }

/* ---------- Entrada dos cartões em sequência ---------- */

.mr-page .glass {
  animation: mr-rise var(--mr-dur-slow) var(--mr-ease) backwards;
}
.mr-page .glass:nth-child(2) { animation-delay: 40ms; }
.mr-page .glass:nth-child(3) { animation-delay: 80ms; }
.mr-page .glass:nth-child(4) { animation-delay: 120ms; }
.mr-page .glass:nth-child(5) { animation-delay: 160ms; }
.mr-page .glass:nth-child(6) { animation-delay: 200ms; }
.mr-page .glass:nth-child(7) { animation-delay: 240ms; }
.mr-page .glass:nth-child(n+8) { animation-delay: 280ms; }

/* ---------- Resposta ao toque e ao ponteiro ---------- */

.mr-theme .btn,
.mr-theme .tab,
.mr-theme .mr-theme-toggle,
.mr-page button,
.mr-page a[style*="border-radius: 999px"] {
  transition:
    transform var(--mr-dur-fast) var(--mr-ease),
    opacity var(--mr-dur-fast) var(--mr-ease),
    background-color var(--mr-dur-fast) var(--mr-ease),
    border-color var(--mr-dur-fast) var(--mr-ease),
    color var(--mr-dur-fast) var(--mr-ease);
}
.mr-theme .btn:active,
.mr-theme .tab:active,
.mr-theme .mr-theme-toggle:active,
.mr-page button:active,
.mr-page a[style*="border-radius: 999px"]:active {
  transform: scale(0.98);
}
.mr-page a[style*="border-radius: 999px"]:hover,
.mr-page button.chip:hover { background-color: var(--mr-surface-2); }
.mr-page .nav-link { transition: background-color var(--mr-dur-fast) var(--mr-ease), color var(--mr-dur-fast) var(--mr-ease); }

.mr-theme :is(.input, .field input, .field select, .field textarea) {
  transition: border-color var(--mr-dur-fast) var(--mr-ease), background-color var(--mr-dur-fast) var(--mr-ease);
}

.mr-theme .toggle-ui { transition: background-color var(--mr-dur) var(--mr-ease), border-color var(--mr-dur) var(--mr-ease); }
.mr-theme .toggle-ui::before { transition: transform var(--mr-dur) var(--mr-ease); }

/* ---------- Estados de carregamento ---------- */

.mr-theme .skel {
  background: linear-gradient(90deg, var(--mr-skel) 0%, var(--mr-skel-hi) 50%, var(--mr-skel) 100%);
  background-size: 200% 100%;
  animation: mr-shimmer 1.4s ease-in-out infinite;
}
.mr-theme .btn.is-loading::after,
.mr-theme .btn[aria-busy="true"]::after { animation: mr-spin 700ms linear infinite; }

/* ---------- Toast e modal ---------- */

.mr-theme .toast { animation: mr-toast-in var(--mr-dur-slow) var(--mr-ease) both; }
.mr-theme .toast.is-leaving { animation: mr-toast-out var(--mr-dur) var(--mr-ease) forwards; }

.mr-theme dialog.modal[open] { animation: mr-pop var(--mr-dur) var(--mr-ease) both; }
.mr-theme dialog.modal[open]::backdrop { animation: mr-fade-in var(--mr-dur) ease both; }
.mr-theme .modal-layer { animation: mr-fade-in var(--mr-dur) ease both; }
.mr-theme .modal-layer .modal { animation: mr-pop var(--mr-dur) var(--mr-ease) both; }

/* ---------- Movimento reduzido: tudo desligado ----------
   (a transição entre páginas já fica desligada porque o @view-transition só vale em `no-preference`;
   regras `::view-transition-*(*)` aqui dentro derrubam a transição no Chromium mesmo sem casar com a media query) */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .mr-theme .skel { background: var(--mr-skel); }
}