/* =========================================================================
   PACTO GM - tela de acesso "Selo-cofre"
   -------------------------------------------------------------------------
   REGRA MESTRA DE DESEMPENHO E ROBUSTEZ:
   o CSS abaixo JA E O ESTADO FINAL. A abertura e puramente aditiva
   (element.animate com fill:'backwards'). Consequencias:
     - se o JS falhar, nao carregar ou ser bloqueado, a tela nasce completa
       e utilizavel, com contraste AA integral;
     - "pular" a abertura e so cancelar as animacoes: o estado final ja esta
       aqui, entao a resposta e imediata (nao depende de nenhum cleanup);
     - CLS = 0: todas as caixas tem dimensao explicita desde o primeiro byte.
   ========================================================================= */

/* --- tokens ------------------------------------------------------------ */
:root{
  color-scheme:light;
  /* interface (tokens do sistema) */
  --fundo:#EEF2F7;
  --fundo-brilho:rgba(37,150,192,.10);
  --superficie:#FFFFFF;
  --texto:#0A2540;
  --texto-suave:#3D4B5C;
  --texto-sutil:#5A6776;
  --borda-cartao:#D8E0EA;
  --borda-controle:#7C8798;      /* 3,64:1 - medido. NAO usar #8491A3 (3,20:1) */
  --foco:#0B5E7C;                /* 6,43:1 sobre branco */
  --acao:#0C0958;
  --acao-texto:#FFFFFF;
  --acao-hover:#181478;
  --erro:#8A1C1C;
  --sombra:0 18px 40px -26px rgba(10,37,64,.55);

  /* marca - cores medidas no arquivo oficial pacto-logo-h-light_v1.png */
  --m-anel-e0:#023e6f; --m-anel-e1:#012e5b; --m-anel-e2:#011f47;
  --m-anel-d0:#011f47; --m-anel-d1:#023361; --m-anel-d2:#024576;
  --m-anel-b:#011e47;
  --m-laco-t0:#0198bf; --m-laco-t1:#01749e; --m-laco-t2:#01325c;
  --m-laco-e0:#011f48; --m-laco-e1:#012a52; --m-laco-e2:#013260;
  --m-laco-d0:#011e47; --m-laco-d1:#012a55; --m-laco-d2:#014572;
  --m-telhado:#f1c065;
  --m-barra0:#dfb25d; --m-barra1:#be9449; --m-barra2:#a07a37;
  --m-wm:#011e47; --m-wm-gm0:#0185ac; --m-wm-gm1:#01779f;
  --m-wm-lo0:#0290ba; --m-wm-lo1:#035f88;
  --ouro-vivo:#ffd97a; --ouro-brasa:#e8a53a;
  --brilho-feixe:rgba(255,255,255,.72);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fundo:#071120;
  --fundo-brilho:rgba(60,170,211,.16);
  --superficie:#0F1D2E;
  --texto:#E9F1F9;
  --texto-suave:#B4C3D3;
  --texto-sutil:#94A5B8;
  --borda-cartao:#22344A;
  --borda-controle:#7E8FA3;
  --foco:#5FC0E3;
  --acao:#3CAAD3;
  --acao-texto:#04121F;
  --acao-hover:#5FC0E3;
  --erro:#FF9B9B;
  --sombra:0 22px 48px -28px rgba(0,0,0,.9);

  /* marca - cores medidas no arquivo oficial pacto-logo-h-dark_v1.png */
  --m-anel-e0:#0a61e6; --m-anel-e1:#0d6eec; --m-anel-e2:#418ef3;
  --m-anel-d0:#39b1f8; --m-anel-d1:#077af6; --m-anel-d2:#0c6ef1;
  --m-anel-b:#0a5fe4;
  --m-laco-t0:#17f2fc; --m-laco-t1:#0ce4fb; --m-laco-t2:#0da5ee;
  --m-laco-e0:#0856d2; --m-laco-e1:#0a78e8; --m-laco-e2:#1d9bf8;
  --m-laco-d0:#0679f9; --m-laco-d1:#0aa5fb; --m-laco-d2:#0ee0fd;
  --m-telhado:#f5cf6a;
  --m-barra0:#fedd5f; --m-barra1:#fdc63e; --m-barra2:#fcac1b;
  --m-wm:#FFFFFF; --m-wm-gm0:#00d2fb; --m-wm-gm1:#01cefb;
  --m-wm-lo0:#00d4fc; --m-wm-lo1:#0098e4;
  --ouro-vivo:#ffe9a3; --ouro-brasa:#ffbb45;
  --brilho-feixe:rgba(180,230,255,.55);
}
/* quando o Blade nao escreve data-theme, respeita o sistema operacional */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --fundo:#071120; --fundo-brilho:rgba(60,170,211,.16); --superficie:#0F1D2E;
    --texto:#E9F1F9; --texto-suave:#B4C3D3; --texto-sutil:#94A5B8;
    --borda-cartao:#22344A; --borda-controle:#7E8FA3; --foco:#5FC0E3;
    --acao:#3CAAD3; --acao-texto:#04121F; --acao-hover:#5FC0E3; --erro:#FF9B9B;
    --sombra:0 22px 48px -28px rgba(0,0,0,.9);
    --m-anel-e0:#0a61e6; --m-anel-e1:#0d6eec; --m-anel-e2:#418ef3;
    --m-anel-d0:#39b1f8; --m-anel-d1:#077af6; --m-anel-d2:#0c6ef1;
    --m-anel-b:#0a5fe4;
    --m-laco-t0:#17f2fc; --m-laco-t1:#0ce4fb; --m-laco-t2:#0da5ee;
    --m-laco-e0:#0856d2; --m-laco-e1:#0a78e8; --m-laco-e2:#1d9bf8;
    --m-laco-d0:#0679f9; --m-laco-d1:#0aa5fb; --m-laco-d2:#0ee0fd;
    --m-telhado:#f5cf6a;
    --m-barra0:#fedd5f; --m-barra1:#fdc63e; --m-barra2:#fcac1b;
    --m-wm:#FFFFFF; --m-wm-gm0:#00d2fb; --m-wm-gm1:#01cefb;
    --m-wm-lo0:#00d4fc; --m-wm-lo1:#0098e4;
    --ouro-vivo:#ffe9a3; --ouro-brasa:#ffbb45;
    --brilho-feixe:rgba(180,230,255,.55);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* barras de sistema translucidas no celular */
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body{
  margin:0;
  /* pilha 100% local: Google Fonts seria requisicao bloqueante e mata o LCP */
  font-family:Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--fundo);
  color:var(--texto);
  overflow-x:clip;              /* clip, nao hidden: nao cria contexto de rolagem */
  line-height:1.45;
}
/* brilho de ambiente: pintado uma vez, nunca animado */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 48% at 50% 34%,var(--fundo-brilho),transparent 70%);
}

.tela{
  position:relative;z-index:1;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;padding:26px 20px;
}
/* duas colunas por LARGURA e, por consequencia, tambem em janelas baixas
   (1440x600, 1366x768, 1280x720): o botao Entrar nunca cai abaixo da dobra */
@media (min-width:1040px){
  .tela{flex-direction:row;gap:clamp(48px,7vw,96px);padding:32px 40px}
}

/* --- area da marca ----------------------------------------------------- */
.marca{display:flex;flex-direction:column;align-items:center;gap:18px}

/* dimensoes explicitas em todos os pontos de corte => CLS 0 */
.palco{position:relative;width:196px;height:217px;perspective:1000px;perspective-origin:50% 50%}
.wordmark{display:block;width:284px;height:34px}
@media (min-width:560px){
  .palco{width:236px;height:262px}
  .wordmark{width:342px;height:41px}
}
@media (min-width:1040px){
  .palco{width:288px;height:319px}
  .wordmark{width:418px;height:50px}
}
@media (max-height:700px){
  .palco{width:196px;height:217px}
  .wordmark{width:284px;height:34px}
}
/* telas baixas (360x640, 1280x600...): o botao Entrar nunca vai abaixo
   da dobra. Dimensoes tambem explicitas aqui, entao CLS continua 0. */
@media (max-height:660px){
  .tela{gap:18px;padding:14px 16px}
  .marca{gap:12px}
  .palco{width:150px;height:166px}
  .wordmark{width:218px;height:26px}
  .cartao{padding:18px 18px 14px}
  .cartao h1{margin-bottom:14px;font-size:1.1rem}
  .campo{margin-bottom:11px}
  .campo input{height:42px}
  .lembrar{margin-bottom:14px}
  .entrar{height:44px}
  .rodape{margin-top:12px}
}

.pulso,.tilt,.voo,.tremor{
  position:absolute;inset:0;transform-style:preserve-3d;
  /* Durante o voo o selo ocupa a tela inteira (5,9x) e passa POR CIMA do
     cartao. pointer-events e herdado: com "none" aqui, toda a pilha 3D vira
     transparente ao clique e o formulario recebe o toque mesmo no meio da
     abertura. O tilt continua funcionando: o .palco (pai) segue recebendo o
     ponteiro dentro da propria caixa. */
  pointer-events:none;
}
.tilt{transition:transform .16s ease-out}
.cam{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* Camadas em Z REAIS. A escala compensa a divisao de perspectiva
   (fator p/(p-z) com p=1000), entao em repouso a composicao e
   pixel a pixel identica a logo original - so o paralaxe do tilt revela
   a profundidade. Nenhuma moldura, nenhum fundo: o fundo e a propria tela. */
.cam--ouro   {transform:translateZ(-7px) scale(1.007)}
.cam--anel   {transform:translateZ(0)}
.cam--lacos  {transform:translateZ(9px) scale(.991)}
.cam--telhado{transform:translateZ(15px) scale(.985)}

/* revelacao: invisivel em repouso; existe so durante a abertura */
.rev{opacity:0;transform:translateZ(26px) scale(.974)}
/* Cada degrau cresce ancorado na PROPRIA BASE (x do centro da barra, y da
   linha de base em 782/816). Assim a escada sobe a partir do chao do selo em
   vez de inchar a partir do centro do desenho - e a leitura de crescimento
   que a marca ja carrega. Tudo volta a 1 antes do fim: o estado final e a
   logo original. */
#rev1{transform-origin:42.0% 95.8%}
#rev2{transform-origin:49.7% 95.8%}
#rev3{transform-origin:57.5% 95.8%}
#revT{transform-origin:50.0% 9.3%}
/* o eixo aureo comeca ACIMA do topo da barra mais alta (632/816 = 77,5%),
   senao ele imprime por cima da barra do meio e as duas viram um borrao */
.rev--eixo{
  position:absolute;left:49.1%;top:1%;right:auto;bottom:auto;width:1.9%;height:75.5%;
  transform-origin:50% 100%;
  background:linear-gradient(to top,
     rgba(0,0,0,0) 0%, var(--ouro-brasa) 12%, var(--ouro-vivo) 50%,
     var(--ouro-brasa) 88%, rgba(0,0,0,0) 100%);
  border-radius:3px;
}
/* aura da revelacao: brilho largo ATRAS da escada, para que o acendimento
   seja visto e nao apenas deduzido. Gradiente pintado uma vez; so opacity
   e transform entram na animacao. */
.brasa{
  position:absolute;left:24%;top:34%;right:auto;bottom:auto;width:52%;height:64%;
  border-radius:50%;opacity:0;pointer-events:none;
  transform:translateZ(18px) scale(.5);
  background:radial-gradient(circle,
     color-mix(in srgb,var(--ouro-vivo) 80%,transparent) 0%,
     color-mix(in srgb,var(--ouro-brasa) 40%,transparent) 40%,
     rgba(0,0,0,0) 72%);
}
/* onda de choque do impacto: dois aneis, escalados por transform */
.onda{
  position:absolute;left:14%;top:11%;right:auto;bottom:auto;width:72%;height:72%;
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(0,0,0,0) 54%,var(--ouro-brasa) 67%,rgba(0,0,0,0) 76%);
}
.onda2{
  position:absolute;left:25%;top:22%;right:auto;bottom:auto;width:50%;height:50%;
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(0,0,0,0) 58%,var(--ouro-vivo) 70%,rgba(0,0,0,0) 79%);
}
/* brilho metalico: janela que anda + copia da marca que anda ao contrario.
   Resultado: o feixe varre exatamente a silhueta da marca, sem mascara
   e usando SO transform (compositavel). */
.faixa{position:absolute;left:37%;top:-45%;right:auto;bottom:auto;width:26%;height:190%;
       overflow:clip;opacity:0;transform:rotate(18deg) translateX(-190%)}
.faixa__int{position:absolute;left:0;top:0;width:100%;height:100%;
            transform:translateX(190%) rotate(-18deg)}
/* a copia da marca precisa cobrir exatamente a caixa do palco:
   largura 100/26 e altura 100/190 da propria faixa */
.faixa__marca{position:absolute;left:-142.3%;top:23.68%;width:384.6%;height:52.63%;
              color:var(--brilho-feixe)}

/* --- cartao ------------------------------------------------------------ */
.cartao{
  width:min(404px,100%);
  background:var(--superficie);
  border:1px solid var(--borda-cartao);
  border-radius:18px;
  padding:26px 26px 22px;
  box-shadow:var(--sombra);
}
.cartao h1{margin:0 0 18px;font-size:1.22rem;line-height:1.25;letter-spacing:-.01em}
.campo{margin:0 0 14px}
.campo label{display:block;margin:0 0 6px;font-size:.845rem;font-weight:600;color:var(--texto-suave)}
.campo input{
  width:100%;height:46px;padding:0 13px;
  font:inherit;font-size:.96rem;color:var(--texto);
  background:var(--superficie);
  border:1px solid var(--borda-controle);border-radius:10px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.campo input::placeholder{color:var(--texto-sutil)}
.campo input:hover{border-color:var(--texto-sutil)}
:where(input,button,a):focus-visible{outline:2px solid var(--foco);outline-offset:2px}
/* lacuna comum das tres variacoes: o campo com autofocus precisa de anel visivel */
input[autofocus]:focus{outline:2px solid var(--foco);outline-offset:2px}
.campo input:focus{border-color:var(--foco);box-shadow:0 0 0 3px color-mix(in srgb,var(--foco) 22%,transparent)}

.lembrar{display:flex;align-items:center;gap:9px;margin:2px 0 18px}
/* checkbox nativo com accent-color: "appearance:none" foi medido em
   735 ms de long task - proibido neste projeto */
.lembrar input{width:17px;height:17px;margin:0;accent-color:var(--acao);flex:0 0 auto}
.lembrar label{font-size:.865rem;color:var(--texto-suave)}

.erro{
  margin:0 0 14px;padding:9px 11px;border-radius:9px;
  font-size:.86rem;color:var(--erro);
  background:transparent;border:1px solid var(--erro);
  background:color-mix(in srgb,var(--erro) 10%,transparent);
  border-color:color-mix(in srgb,var(--erro) 40%,transparent);
}
.erro[hidden]{display:none}
/* aviso neutro vindo da sessão (session('status')): mesmo lugar, tom calmo */
.status{
  margin:0 0 14px;padding:9px 11px;border-radius:9px;
  font-size:.86rem;color:var(--texto-suave);
  border:1px solid var(--borda-cartao);
  background:color-mix(in srgb,var(--foco) 8%,transparent);
}

.entrar{
  width:100%;height:48px;border:0;border-radius:10px;
  font:inherit;font-size:.98rem;font-weight:650;letter-spacing:.01em;
  color:var(--acao-texto);background:var(--acao);cursor:pointer;
  transition:background-color .14s ease, transform .14s ease;
}
.entrar:hover{background:var(--acao-hover)}
.entrar:active{transform:translateY(1px)}

.rodape{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 0}
.discreto{
  border:0;background:none;padding:4px 2px;cursor:pointer;
  font:inherit;font-size:.78rem;color:var(--texto-sutil);
  border-radius:6px;
}
.discreto:hover{color:var(--texto-suave);text-decoration:underline}

/* aviso de demonstracao: position:fixed para custar CLS zero.
   translateX(-50%) no lugar de margin-left:min(...), pointer-events:none e
   visibility:hidden quando oculto - decoracao nunca engole clique. */
.aviso{
  position:fixed;left:50%;bottom:22px;z-index:9;
  transform:translateX(-50%) translateY(10px);
  max-width:calc(100vw - 32px);
  padding:10px 16px;border-radius:999px;
  font-size:.85rem;color:var(--acao-texto);background:var(--acao);
  box-shadow:0 12px 30px -16px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.aviso--on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}

.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#relogio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;top:0;left:0}

/* --- versao estatica --------------------------------------------------- */
/* data-perf="low" ou CPU/RAM fracas: nada se move (decidido no JS). A tela
   continua bonita porque a marca ja e o assunto. Por decisao do dono
   (21/09/2026), a preferencia "movimento reduzido" do sistema NAO e
   consultada — nem aqui nem no JS. */