/* Hub Agência EvoluWill — transições de tela */

/* ============================================================
   O que é este arquivo, e o que ele NÃO é
   ============================================================
   Transição é coreografia de interface: a tela saindo de um estado e entrando em outro.
   Não é animação de personagem. Aqui não existe mascote, existe a tela de entrada saindo
   e o hub chegando. São coisas diferentes, e por isso moram em arquivos diferentes.

   ⚠️ O obstáculo real, que derruba qualquer tentativa ingênua:
   entrar no hub termina em `location.reload()`. Nenhuma animação atravessa um
   recarregamento, porque o navegador descarta a página inteira. Animar a saída e chamar o
   reload em seguida corta o movimento no meio e ainda pisca branco.

   Por isso a transição é cortada em duas metades, costuradas por uma bandeira no
   sessionStorage:

     metade 1, na página velha ... a caixa de login recua e a cortina fecha
     ---- recarregamento ----
     metade 2, na página nova .... a cortina JÁ nasce pintada, e abre quando o hub montou

   A cortina da metade 2 precisa existir antes da primeira pintura, senão pisca branco no
   intervalo entre o reload e o JS rodar. Quem a liga é um script no <head>, marcando a
   classe no <html>. É por isso que ela é um `::after` do <html> e não um elemento: no
   momento em que precisa estar pintada, o <body> ainda não existe.

   Efeito colateral bem-vindo: a cortina também cobre o `fetch("/api/me")` e a montagem do
   menu, que antes apareciam como um pisca de tela meio montada.
   ============================================================ */

:root{
  --t-saida:.42s;
  --t-entrada:.55s;
  --t-curva:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   A cortina
   ============================================================ */

/* Metade 1: elemento de verdade, porque nesta hora o <body> existe. Fica inerte na página
   o tempo todo, sem custo, e só ganha opacidade quando a saída começa. */
.cortina{
  position:fixed;inset:0;z-index:400;
  background:var(--navy-900);
  opacity:0;
  pointer-events:none;
}

/* Metade 2: pseudo-elemento do <html>, porque precisa estar pintado antes do <body>.
   `pointer-events:none` é o que impede a cortina de virar uma tela travada se algo
   der errado no meio do caminho. */
html.chegando::after{
  content:"";
  position:fixed;inset:0;z-index:400;
  background:var(--navy-900);
  pointer-events:none;
}

/* ============================================================
   Metade 1: a saída, na tela de entrada
   ============================================================ */

body.saindo .entrada-caixa{
  animation:caixaRecua var(--t-saida) var(--t-curva) forwards;
}
body.saindo .cortina{
  animation:cortinaFecha var(--t-saida) ease-out forwards;
}

/* A caixa recua para dentro da tela, não para fora: quem entrou está indo para o hub, e o
   movimento acompanha. Descer daria a leitura de fechar, e é o contrário. */
@keyframes caixaRecua{
  to{ opacity:0; transform:translateY(-14px) scale(.965); }
}
@keyframes cortinaFecha{
  to{ opacity:1; }
}

/* ============================================================
   Metade 2: a chegada, na página nova
   ============================================================ */

html.revelando::after{
  animation:cortinaAbre var(--t-entrada) var(--t-curva) forwards;
}
@keyframes cortinaAbre{
  to{ opacity:0; }
}

/* O hub não aparece de uma vez: entra em cascata, do topo para o conteúdo. O atraso é o
   que dá a leitura de "montou", em vez de "apareceu". */
html.revelando .topo{
  animation:chegaDoTopo var(--t-entrada) var(--t-curva) both;
  animation-delay:.10s;
}
html.revelando .menu{
  animation:chegaDaEsquerda var(--t-entrada) var(--t-curva) both;
  animation-delay:.16s;
}
html.revelando .conteudo{
  animation:chegaDeBaixo var(--t-entrada) var(--t-curva) both;
  animation-delay:.22s;
}

@keyframes chegaDoTopo{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:none; }
}
@keyframes chegaDaEsquerda{
  from{ opacity:0; transform:translateX(-14px); }
  to  { opacity:1; transform:none; }
}
@keyframes chegaDeBaixo{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}

/* ============================================================
   Quem pediu menos movimento
   ============================================================
   O hub não tinha nenhuma regra de `prefers-reduced-motion` até aqui. Quem liga essa opção
   no sistema costuma ligar por enjoo ou por vertigem, e translate é justamente o que
   incomoda. Então o movimento some e sobra a troca de opacidade, que continua explicando a
   passagem de uma tela para a outra sem deslocar nada. */
@media (prefers-reduced-motion:reduce){
  @keyframes caixaRecua{ to{ opacity:0; } }
  @keyframes chegaDoTopo{ from{ opacity:0 } to{ opacity:1 } }
  @keyframes chegaDaEsquerda{ from{ opacity:0 } to{ opacity:1 } }
  @keyframes chegaDeBaixo{ from{ opacity:0 } to{ opacity:1 } }
  html.revelando .topo,
  html.revelando .menu,
  html.revelando .conteudo{ animation-delay:0s; }
}