/* Semperion · veste escura da tela de entrada.
   Só design: tudo aqui é escopado em #entrada e não muda nenhum comportamento.
   A linguagem é a do site institucional: azul-ferro profundo, papel, lacre como única cor viva. */

#entrada{
  --e-fundo:#121A2A;
  --e-fundo2:#0B111E;
  --e-tinta:#ECE8DF;
  --e-dim:#99A0AE;
  --e-lacre:#D9786B;
  --e-linha:rgba(236,232,223,.14);
  color-scheme:dark;

  position:fixed;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:26px;
  padding:28px max(16px, env(safe-area-inset-left,0px)) 28px max(16px, env(safe-area-inset-right,0px));
  overflow:auto;
  background:
    repeating-linear-gradient(to bottom, rgba(236,232,223,.016) 0 1px, transparent 1px 7px),
    radial-gradient(120% 90% at 50% 0%, var(--e-fundo) 0%, var(--e-fundo2) 100%);
  background-color:var(--e-fundo2);
  color:var(--e-tinta);
  font-weight:300;
}
#entrada.oculto{display:none!important}

/* a câmara: centralizada pelas margens, para o topo nunca ficar fora do alcance
   quando a tela é mais baixa que o conteúdo (celular no passo do QR) */
#entrada .cartao-entrada{
  margin-top:auto;
  width:min(420px,100%);
  background:rgba(20,29,47,.78);
  border:none;
  border-radius:0;
  box-shadow:0 36px 96px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.4);
  padding:44px 36px 38px;
  animation:e-surge 1.2s .15s cubic-bezier(.2,.6,.2,1) both;
}
@keyframes e-surge{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* assinatura e bordão */
#entrada .assinatura-entrada{text-align:center;margin-bottom:30px}
#entrada .assinatura-entrada svg{
  width:min(236px,70%);height:auto;
  --marca-tinta:#ECE8DF;
  --marca-ponto:#D9786B;
}
#entrada .assinatura-entrada path[style*="marca-ponto"]{animation:e-brasa 5.5s 1.4s ease-in-out infinite}
@keyframes e-brasa{0%,100%{opacity:1}50%{opacity:.45}}
#entrada .bordao{
  margin-top:14px;color:var(--e-dim);
  font-size:.6rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.32em;text-indent:.32em;
  animation:e-bordao 2s .7s cubic-bezier(.2,.6,.2,1) both;
}
@keyframes e-bordao{from{opacity:0;letter-spacing:.55em}to{opacity:1;letter-spacing:.32em}}

/* títulos e textos dos passos */
#entrada .passo-titulo{
  color:var(--e-tinta);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.26em;text-indent:.26em;text-align:center;
  margin-bottom:12px;
}
#entrada .passo-texto{color:var(--e-dim);font-size:.86rem;font-weight:300;line-height:1.7;text-align:center}
#entrada .passo-texto strong{color:var(--e-tinta);font-weight:500}
#entrada .passo-texto em{color:var(--e-tinta);font-style:normal;font-weight:500}

/* campos */
#entrada .rotulo{
  display:block;color:var(--e-dim);font-size:.58rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.26em;margin:18px 0 8px;
}
#entrada .campo{
  width:100%;background:rgba(9,14,25,.85);
  border:none;border-radius:0;
  color:var(--e-tinta);font-family:inherit;font-weight:400;font-size:.95rem;
  padding:14px 15px;outline:none;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.55);
  transition:box-shadow .3s;
  caret-color:var(--e-lacre);
}
#entrada .campo::placeholder{color:rgba(153,160,174,.45)}
#entrada .campo:focus{box-shadow:inset 0 3px 12px rgba(0,0,0,.55), 0 0 0 1px rgba(217,120,107,.4), 0 0 22px rgba(217,120,107,.18)}
#entrada .campo-codigo{
  text-align:center;font-size:1.5rem;font-weight:600;letter-spacing:.5em;text-indent:.5em;
}

/* botões */
#entrada .botao{
  background:rgba(236,232,223,.07);color:var(--e-tinta);
  border:none;border-radius:0;
  font-family:inherit;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.28em;text-indent:.28em;
  padding:16px 22px;cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  transition:color .35s,letter-spacing .35s,background .35s,box-shadow .35s;
}
#entrada .botao:hover,#entrada .botao:focus-visible{
  background:rgba(217,120,107,.14);color:var(--e-lacre);letter-spacing:.34em;
  box-shadow:0 12px 36px rgba(0,0,0,.45), 0 0 26px rgba(217,120,107,.22);
}
#entrada .botao:focus-visible{outline:1px solid var(--e-lacre);outline-offset:3px}
#entrada .botao:disabled{opacity:.45;cursor:default;letter-spacing:.28em;background:rgba(236,232,223,.05);color:var(--e-dim);box-shadow:none}
#entrada .botao-largo{width:100%}
#entrada .botao-claro{background:rgba(236,232,223,.05);color:var(--e-dim)}
#entrada .botao-claro:hover{background:rgba(217,120,107,.12);color:var(--e-lacre)}
#entrada .botao-texto{
  background:none;border:none;color:var(--e-dim);
  font-family:inherit;font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;text-indent:.22em;
  padding:12px 4px;cursor:pointer;transition:color .3s;
}
#entrada .botao-texto:hover{color:var(--e-lacre)}

/* avisos */
#entrada .aviso{border-radius:0;font-weight:400}
#entrada .aviso-erro{
  background:rgba(156,47,47,.2);border:none;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  color:#E8A79C;font-size:.82rem;padding:12px 14px;margin-top:14px;
}

/* segundo fator */
#entrada .qr-caixa{
  background:#F7F6F2;border:none;border-radius:0;
  box-shadow:0 14px 36px rgba(0,0,0,.5);
  padding:12px;width:fit-content;margin:16px auto;
}
#entrada .qr-caixa canvas,#entrada .qr-caixa img,#entrada .qr-caixa svg{display:block}
#entrada .segredo{
  background:rgba(9,14,25,.85);border:none;border-radius:0;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.55);
  color:var(--e-tinta);font-size:.78rem;font-weight:500;letter-spacing:.12em;
  padding:10px 12px;word-break:break-all;user-select:all;
}
#entrada form > p[style]{display:none}

/* sem instruções: só eu entro aqui */
#entrada .passo-texto,
#entrada .rotulo,
#passo-email .passo-titulo{display:none}
#passo-email .campo{margin-top:2px}

/* brasas ao fundo, conteúdo acima */
#brasas-entrada{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#entrada .cartao-entrada,#entrada .rodape-entrada,#entrada .selo-entrada{position:relative;z-index:1}

/* selo entre o cartão e o rodapé */
#entrada .selo-entrada{
  display:block;width:62px;height:auto;margin:0 auto;opacity:.9;
  animation:e-surge 1.2s .6s cubic-bezier(.2,.6,.2,1) both;
}

/* rodapé da entrada */
#entrada .rodape-entrada{
  margin-bottom:auto;
  color:var(--e-dim);font-size:.56rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;text-align:center;
  animation:e-surge 1.2s .9s cubic-bezier(.2,.6,.2,1) both;
}

@media (prefers-reduced-motion: reduce){
  #entrada *,#entrada{animation:none!important;transition:none!important}
  #entrada .cartao-entrada,#entrada .bordao,#entrada .rodape-entrada{opacity:1}
}
@media (max-width:420px){
  #entrada .cartao-entrada{padding:34px 22px 30px}
}