/* ============================================================
   TELA DE LOGIN — ANIMAÇÕES COMPARTILHADAS, TRANSIÇÕES DE PÁGINA E TOGGLE DE TEMA
   Parte 2/9 da antiga style.css (linhas 92–271 do original).
   A ordem das <link> no index.html repete a ordem original do arquivo,
   então a cascata é exatamente a mesma de antes da divisão.
   ============================================================ */

/* ===================== SHARED ANIMATIONS ===================== */
@keyframes phraseSlide {
  0% { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  15% { opacity: 1; transform: translateY(0); filter: blur(0); }
  80% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
}

@keyframes cardSlideIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Removidos em 2026-09-29, junto com a decoração de fundo:
   - gradientShift: animava o gradiente dos títulos (.brand-title,
     .register-alt-brand-title, .success-name). Repintura contínua de
     texto = ghosting no TN. Os títulos agora usam cor sólida.
   - decoPulse / decoFloat: animavam as formas geométricas de fundo,
     que também saíram. */

@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes successPop {
  from { opacity: 0; transform: scale(0.85) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shakeIn {
  0% { transform: translateX(-6px); opacity: 0; }
  50% { transform: translateX(3px); }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes checkPop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===================== PAGE TRANSITIONS (App) ===================== */
.page-wrapper {
  animation: pageEnter 0.3s ease-out both;
}

.page-wrapper.page-exit {
  animation: pageExit 0.2s ease-in both;
}

@keyframes pageExit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== THEME TOGGLE ===================== */
/* ===================== THEME TOGGLE =====================
 * RESTAURADO em 2026-09-30, a pedido do dono: a tela de login volta a ter a
 * animação que ela tinha antes (a de ~2 dias), com o mesmo comportamento e os
 * mesmos efeitos. O que caracteriza essa animação:
 *   - o deslize E o giro de 180° são feitos pelo JS (login-theme.js), quadro a
 *     quadro, em 420ms com easeOutExpo. Por isso aqui NÃO existe transição de
 *     `transform` na bolinha: quem escreve o transform é o rAF, e uma
 *     transição de CSS por cima brigaria com ele;
 *   - a bolinha troca de cor sozinha, por transição de 0.45s;
 *   - quando a página cai no caminho de reserva (sem View Transition), entram
 *     os dois efeitos "de antes": o anel que pulsa na faixa (themePulse) e o
 *     brilho que dá um tapa na bolinha (themeThumbPop).
 * O chat NÃO usa isto — lá vale a rolagem de 360° (css/ui/header.css). */

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.theme-toggle-track {
  display: flex;
  align-items: center;
  width: 52px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 3px;
  transition: background 0.45s var(--ease-out-expo),
              border-color 0.45s var(--ease-out-expo),
              transform 0.3s var(--ease-spring);
}

.theme-toggle:hover .theme-toggle-track {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
}

.theme-toggle:active .theme-toggle-track {
  transform: scale(0.94);
}

.theme-toggle-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #8b5cf6;
  border-radius: 50%;
  /* O sol fica BRANCO no tema claro (ver abaixo) — é o visual de antes, o
     mesmo tratamento da lua no escuro: desenho claro sobre a bolinha colorida. */
  color: #fff;
  will-change: transform;
  transition: background 0.45s var(--ease-out-expo),
              box-shadow 0.45s var(--ease-out-expo);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.6);
}

.theme-toggle:hover .theme-toggle-thumb {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.85);
}

[data-theme="light"] .theme-toggle-track {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .theme-toggle:hover .theme-toggle-track {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Sem `color` aqui de propósito: o sol continua BRANCO (herda o #fff de cima).
   Em 29/09 ele tinha virado marrom (#3d2a06) para ganhar contraste; o dono
   achou feio no tema claro e pediu o visual de antes de volta. */
[data-theme="light"] .theme-toggle-thumb {
  background: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.55);
}

[data-theme="light"] .theme-toggle:hover .theme-toggle-thumb {
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.8);
}

html.theme-morphing .theme-toggle-track {
  animation: themePulse 0.85s var(--ease-out-expo) both;
}

html.theme-morphing .theme-toggle-thumb {
  animation: themeThumbPop 0.85s var(--ease-out-expo) both;
}

@keyframes themePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.45), 0 0 0 0 rgba(245, 158, 11, 0.28);
  }
  45% {
    box-shadow: 0 0 0 10px rgba(139, 92, 246, 0.16), 0 0 30px rgba(139, 92, 246, 0.25);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(139, 92, 246, 0), 0 0 0 rgba(139, 92, 246, 0);
  }
}

/* `filter` (e não `transform`) de propósito: é o efeito de antes — um "tapa"
   de brilho na bolinha. Com `transform` seria um scale, que é outra coisa.
   E é animação de uma vez só (0.85s), não um laço. */
@keyframes themeThumbPop {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.35) saturate(1.35); }
}

/* Quem pediu para reduzir movimento no sistema não recebe nem o pulso nem o
   brilho. O deslize em si é do rAF (login-theme.js) e continua — ele é a
   própria informação de que o tema mudou, não é decoração. O chat tem o mesmo
   bloco (css/ui/header.css), para as duas telas ficarem iguais. */
@media (prefers-reduced-motion: reduce) {
  html.theme-morphing .theme-toggle-track,
  html.theme-morphing .theme-toggle-thumb { animation: none; }
}