/* ════════════════════════════════════════════════════════════════════════
   CORTINA DE TRANSIÇÃO — login.html / cadastro.html → index.html
   ════════════════════════════════════════════════════════════════════════

   Uma cortina só, pintada igual nos dois lados da navegação dura, para que o
   usuário não perceba que existem duas páginas. Ver README seção 38.

   Por que BRANCA: o logo da cortina vem de localStorage.cached_logo, que é o
   que o admin sobe em config/company e pode ter fundo branco sólido (o padrão
   icons/icon_v2_x512.png tem). Cortina escura obrigaria todo logo, de todo
   cliente white-label, a ser transparente e com texto claro para sempre.
   O branco aceita qualquer logo. Bônus: o app já é claro, então a chegada
   não tem emenda, e o manifest.json já nasce com background_color #ffffff.

   Este arquivo é carregado por index.html, login.html e cadastro.html.
   O ?v= do index.html é reescrito pelo update-version.cjs (regex css/*.css).
   ════════════════════════════════════════════════════════════════════════ */

#auth-curtain {
  --curtain-fg: #0f172a;
  --curtain-g1: #6366f1;            /* índigo da marca */
  --curtain-g2: #06b6d4;            /* ciano do logo (o #22d3ee some no branco) */
  --curtain-track: rgba(15, 23, 42, 0.12);
  --curtain-glow: rgba(99, 102, 241, 0.55);
  --curtain-note: #64748b;

  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at 50% 0%, #f8fafc 0%, #ffffff 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  pointer-events: none;
  /* 300ms e não 180ms: sair do login escuro para o branco em 180ms é estalo. */
  transition: opacity 0.3s ease;
}

#auth-curtain.up {
  opacity: 1;
  pointer-events: auto;
}

/* REDE DE SEGURANÇA — não remover.
   A cortina fica em z-index 99999; o SweetAlert2 nasce em 1060. Se qualquer
   caminho abrir um modal com a cortina de pé, o cliente vê o modal por baixo
   e trava sem conseguir clicar (o loadUserProfile tem três Swal: telefone,
   "Acesso Pendente" e o gate de cadastro completo).
   O certo é o código chamar dropCurtain() antes de abrir o modal, e ele chama.
   Isto aqui é o que sobra para o caminho que ninguém mapeou. */
.swal2-container { z-index: 100000 !important; }

/* Saída: a cortina abre e o app entra por baixo. */
#auth-curtain.reveal {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.42s ease, transform 0.42s ease;
}

.curtain-mark {
  width: 168px;
  height: 168px;
  object-fit: contain;
  animation: curtain-breathe 3.2s ease-in-out infinite;
}

@keyframes curtain-breathe {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* ── Texto da etapa ────────────────────────────────────────────────────────
   Técnica do glitch (camadas em pseudo-elemento com deslocamento cromático),
   mas disparada SÓ na virada de etapa, nunca em loop. O efeito passa a
   significar "o sistema mudou de estado" em vez de "o sistema está quebrado".
   Fonte: Inter, porque index.html não carrega Outfit e a emenda entre as
   páginas é exatamente o que este arquivo existe para eliminar.
   ────────────────────────────────────────────────────────────────────────── */
.curtain-step {
  position: relative;
  z-index: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--curtain-fg);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  min-height: 1.2em;
}

.curtain-step::before,
.curtain-step::after {
  display: block;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.curtain-step::before { color: var(--curtain-g1); z-index: -1; }
.curtain-step::after  { color: var(--curtain-g2); z-index: -2; }

/* Rajada de 400ms no instante da virada. */
.curtain-step.burst         { animation: curtain-settle 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.curtain-step.burst::before { animation: curtain-glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; opacity: 0.85; }
.curtain-step.burst::after  { animation: curtain-glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both; opacity: 0.85; }

@keyframes curtain-glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-3px, 3px); }
  40%  { transform: translate(-3px, -3px); }
  60%  { transform: translate(3px, 3px); }
  80%  { transform: translate(3px, -3px); }
  to   { transform: translate(0); }
}

/* Rasga e assenta. Skews contidos, ao contrário do original do Uiverse,
   que chega a skewX(-50deg) e vira convulsão numa tela inteira. */
@keyframes curtain-settle {
  0%   { transform: skewX(0deg); }
  12%  { transform: skewX(14deg); }
  24%  { transform: skewX(-10deg); }
  38%  { transform: skewX(6deg) skewY(2deg); }
  52%  { transform: skewX(-4deg); }
  70%  { transform: skewX(2deg); }
  100% { transform: skewX(0deg); }
}

/* ── Barra segmentada ──────────────────────────────────────────────────────
   Os segmentos são gerados pela jornada (ver authTransition.js), não fixos:
   entrar pelo login tem 3 esperas, dar F5 já logado tem 2. Barra com total
   fixo mentiria em um dos dois casos.
   ────────────────────────────────────────────────────────────────────────── */
.curtain-segments {
  display: flex;
  gap: 6px;
  width: 260px;
}

.curtain-segments i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--curtain-track);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.curtain-segments i.done {
  background: var(--curtain-g1);
  box-shadow: 0 0 10px var(--curtain-glow);
}

.curtain-segments i.doing {
  background: linear-gradient(90deg, var(--curtain-g1) 0%, var(--curtain-g1) 40%, rgba(99, 102, 241, 0.15) 40%);
  background-size: 240% 100%;
  animation: curtain-sweep 1.1s ease-in-out infinite;
}

@keyframes curtain-sweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

/* Passou do tempo esperado? Fala a verdade em vez de fingir que não. */
.curtain-note {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--curtain-note);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.4s ease;
  min-height: 1em;
}

.curtain-note.show { opacity: 1; }

@media (max-width: 480px) {
  .curtain-mark { width: 132px; height: 132px; }
  /* "VERIFICANDO CREDENCIAIS" com 4px de tracking estoura em 375px */
  .curtain-step { font-size: 0.78rem; letter-spacing: 2px; }
  .curtain-segments { width: 76vw; }
}

/* ── Movimento reduzido ────────────────────────────────────────────────────
   Sai de graça porque o glitch já é pontual: basta trocar a rajada por um
   fade. Quem pediu menos movimento continua vendo o progresso, sem a tremida.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .curtain-mark,
  .curtain-segments i.doing,
  .curtain-step.burst::before,
  .curtain-step.burst::after {
    animation: none !important;
  }
  .curtain-step.burst { animation: curtain-soft-in 0.25s ease both !important; }
  .curtain-segments i.doing { background: var(--curtain-g1); opacity: 0.55; }
}

@keyframes curtain-soft-in {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* ── A espera CURTA pertence ao botão ──────────────────────────────────────
   Contraparte da regra 1 do authTransition.js: como a cortina só sobe depois
   de autenticar, durante a verificação da senha o botão é o único feedback
   que existe. Então ele precisa ser feedback de verdade, não só texto trocado.
   Usado por login.html e cadastro.html.
   inline-block em vez de flex de propósito: os botões dessas páginas não são
   flex e transformá-los mexeria no layout deles.
   ────────────────────────────────────────────────────────────────────────── */
.auth-btn-spin {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 8px;
  animation: auth-btn-spin 0.6s linear infinite;
}

.is-busy .auth-btn-spin { display: inline-block; }
.is-busy { cursor: default; filter: saturate(0.7) brightness(0.9); }

@keyframes auth-btn-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .auth-btn-spin { animation-duration: 1.6s; }
}