/* Gerado a partir dos `<style>` que viviam dentro do HTML (29/09/2026).
   Arquivo .css em /styles E SERVIDO pela plataforma, e ao contrario do CSS inline ele
   tem ETag, entao a segunda visita revalida com 304 em vez de baixar tudo de novo.
   NAO passa pela compiladora: sem `@apply`, e `rgb(a b c / d)` aqui funciona.
   A ORDEM DOS BLOCOS ABAIXO E A ORDEM QUE ELES TINHAM NO DOCUMENTO. Nao reordenar. */

/* Tela de login em duas colunas, colagem a esquerda e formulario a DIREITA.
   Prefixo `how-entrar` e nao `how-login`: esse ja e a classe do botao Login do header,
   com regras no core.css.
   **Os ganchos do `scripts/auth.js` nao podem ser renomeados:** `#magic-link-form`,
   `#email-step`, `#email`, `#otp-step`, `.otp-input` (seis), `#user-email`,
   `#back-to-email`, `.submit-button`, `button[type=submit]`. */

/* A tela cheia desliga QUATRO elementos do layout, todos filhos diretos de `.how-palco`:
   `header`, `footer`, o espacador `.how-header-space` (70px, que sobrava e jogava a barra
   fora da tela) e `.how-brilho` (que criava 62px de rolagem vertical). */
body:has(.how-entrar) .how-palco > header,
body:has(.how-entrar) .how-palco > footer,
/* o `how-header-space` e o espacador que compensa o header fixo; com o header fora
   ele vira 70px de sobra e a barra de baixo da colagem cai fora da tela */
body:has(.how-entrar) .how-palco > .how-header-space,
/* o `how-brilho` e a mancha decorativa do layout; aqui ela nao aparece (cada lado tem
   o proprio brilho) e ainda criava 62px de rolagem vertical, medidos */
body:has(.how-entrar) .how-palco > .how-brilho { display: none }
body:has(.how-entrar) main { display: flex }

.how-entrar{display:grid;grid-template-columns:minmax(0,1fr) clamp(560px,50%,980px);width:100%;min-height:100dvh}

/* ---------------- colagem ---------------- */
.how-entrar-arte{position:relative;overflow:hidden;background:#0c0a1d}
/* o grupo inteiro e maior que a area e girado: assim as bordas somem cortadas e
   nenhuma arte aparece "solta" no meio do nada */
/* quatro colunas de 310 com vao de 24 dao 1312px: cobrem a coluna da arte em 1920 sem
   deixar faixa vazia de um lado. O inset negativo e a rotacao escondem as pontas. */
.how-entrar-mosaico{position:absolute;inset:-16% -12%;display:flex;gap:24px;justify-content:center;
  transform:rotate(-9deg);pointer-events:none}
.how-entrar-col{display:flex;flex-direction:column;gap:24px;width:310px;flex:none;will-change:transform}
/* **16:9 e nao retrato.** A arte dos produtos da loja e toda deitada (616x353); num
   quadro em pe ela perderia 58% da largura e viraria recorte, como ficou provado no
   exemplo da astrokey. Aqui nada e cortado. */
.how-entrar-col img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;
  box-shadow:0 18px 40px #00000059;background:#141414}
/* cada coluna anda num sentido, devagar; o laco fecha porque a lista e duplicada */
.how-entrar-col:nth-child(odd){animation:how-entrar-sobe 46s linear infinite}
.how-entrar-col:nth-child(even){animation:how-entrar-desce 46s linear infinite}
@keyframes how-entrar-sobe{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes how-entrar-desce{from{transform:translateY(-50%)}to{transform:translateY(0)}}
/* O SELETOR PRECISA DE (0,2,0) PARA GANHAR: as regras base sao
   `.how-entrar-col:nth-child(odd)` e `(even)`, e a classe sozinha vale (0,1,0) e PERDE.
   Media query nao soma peso. */
@media(prefers-reduced-motion:reduce){.how-entrar-col.how-entrar-col{animation:none}}

/* A colagem fica PARADA no celular: a arte continua na tela, some so o deslizar. Ela
   custava 180 recalculos de estilo por segundo com a pagina parada, e esta e a pagina
   onde a pessoa digita o e-mail e os seis digitos. Nao da para barratear: a coluna ja tem
   `will-change`, nao ha mascara no caminho, e o que impede a GPU e o TAMANHO (a lista
   duplicada tem milhares de px). Consertar seria trocar a tecnica do laco. */
@media(max-width:1000px){.how-entrar-col.how-entrar-col{animation:none}}

/* No computador a colagem fica, porque e o desenho da pagina, mas CONGELA quando ha foco
   num campo, que e quando o custo incomoda. Feito com `:has(input:focus)`, sem JS. */
.how-entrar:has(input:focus) .how-entrar-col.how-entrar-col{animation-play-state:paused}

/* banho roxo por cima da colagem, para a arte nao competir com o formulario */
.how-entrar-tinta{position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(var(--how-roxo) / .52),rgb(12 10 29 / .40) 45%,rgb(11 10 22 / .74));}
.how-entrar-arte::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 82% at 46% 48%,transparent 42%,rgb(10 10 18 / .58))}

/* ---------------- formulario ---------------- */
/* Fundo chapado, sem brilho. O usuario pediu para tirar: achou que o degrade radial
   deixava a tela com cara de feita por IA. Nao recolocar sem pedido. */
.how-entrar-lado{display:flex;align-items:center;justify-content:center;padding:40px 34px;
  background:rgb(var(--how-noite));border-left:1px solid rgb(255 255 255 / .06)}
.how-entrar-caixa{width:100%;max-width:428px}
.how-entrar-marca{display:flex;align-items:center;gap:11px;width:fit-content;margin:0 auto 26px}
.how-entrar-marca img{height:36px;width:auto;display:block}
/* a palavra vem do `brand-mark`, que a desenha por mascara; aqui so o tamanho */
.how-entrar-marca .how-brand-name{width:108px;height:33px}
.how-entrar-caixa h1{margin:0 0 8px;font-size:26px;font-weight:700;letter-spacing:-.02em;text-align:center}
.how-entrar-sub{margin:0 0 26px;color:rgb(var(--muted-foreground));font-size:14.5px;line-height:1.5;text-align:center}

.how-entrar-social{display:flex;flex-direction:column;gap:10px}
/* Cinza neutro, nao roxo: o usuario pediu para tirar o roxo dos botoes sociais e do
   campo, seguindo a astrokey. O roxo fica so no botao de Entrar. */
.how-entrar-social button{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:44px;
  border:1px solid rgb(255 255 255 / .10);border-radius:10px;background:rgb(255 255 255 / .04);
  color:rgb(var(--foreground));font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease}
.how-entrar-social button:hover{border-color:rgb(255 255 255 / .18);background:rgb(255 255 255 / .07)}
.how-entrar-social svg{width:19px;height:19px;flex:none}

.how-entrar-ou{display:flex;align-items:center;gap:14px;margin:22px 0;
  color:rgb(var(--muted-foreground));font-size:12.5px}
.how-entrar-ou::before,.how-entrar-ou::after{content:"";flex:1;height:1px;background:rgb(255 255 255 / .09)}

.how-entrar-caixa label{display:block;margin-bottom:8px;
  color:rgb(var(--muted-foreground));font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.how-entrar-caixa input[type=email]{height:46px;width:100%;padding:0 15px;
  border:1px solid rgb(255 255 255 / .10);border-radius:10px;background:rgb(255 255 255 / .04);
  color:rgb(var(--foreground));font-size:15px}
.how-entrar-caixa input[type=email]:focus{outline:none;border-color:rgb(var(--how-violeta));box-shadow:none}
.how-entrar-caixa input::placeholder{color:rgb(255 255 255 / .34)}

.how-entrar-enviar{width:100%;height:46px;margin-top:20px;border:0;border-radius:10px;
  background:rgb(var(--how-violeta));color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  transition:background-color .2s ease,transform .35s cubic-bezier(.34,1.5,.64,1)}
.how-entrar-enviar:hover{background:rgb(var(--how-violeta) / .86);transform:translateY(-1px)}
.how-entrar-enviar:disabled{opacity:.6;cursor:default;transform:none}

/* ---------------- codigo de 6 digitos ---------------- */
/* Os quadros saem da linha, formam um anel e giram enquanto o servidor confere. Quem
   comanda e o `scripts/login-otp.js`; daqui saem so as formas e os tempos. Quem voa e o
   `.how-entrar-quadro`, nao o `input`: mover o campo tiraria o foco do teclado no meio
   do caminho. */
.how-entrar-palco{position:relative;height:54px;margin-top:6px;
  transition:height .34s cubic-bezier(.34,1.24,.44,1)}

.how-entrar-guia{position:absolute;left:50%;top:50%;width:184px;height:184px;margin:-92px 0 0 -92px;
  opacity:0;transition:opacity .3s ease}
.how-entrar-guia.on{opacity:1}
.how-entrar-guia circle{fill:none;stroke:rgb(255 255 255 / .13);stroke-width:1;stroke-dasharray:3 7}
.how-entrar-ponto{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:rgb(255 255 255 / .35);opacity:0;transform:scale(.2);
  transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.5,.5,1)}
.how-entrar-ponto.on{opacity:1;transform:scale(1)}

/* o grupo e um ponto no centro do palco e cada quadro se posiciona a partir dele:
   girando ESTE elemento, o anel inteiro gira em volta do centro */
.how-entrar-codigo{position:absolute;left:50%;top:50%;display:block;width:0;height:0}
.how-entrar-quadro{position:absolute;left:0;top:0;display:grid;place-items:center;
  border:1px solid rgb(255 255 255 / .10);border-radius:10px;background:rgb(255 255 255 / .04)}
/* a transicao so entra depois da primeira colocacao (classe `pronto`), senao os quadros
   entram voando do centro na primeira vez que a tela do codigo aparece */
.how-entrar-codigo.pronto .how-entrar-quadro{
  transition:transform .34s cubic-bezier(.34,1.24,.44,1),width .34s cubic-bezier(.34,1.24,.44,1),
    height .34s cubic-bezier(.34,1.24,.44,1),border-color .2s ease,background-color .2s ease,
    color .2s ease,opacity .2s ease,box-shadow .2s ease}
.how-entrar-quadro input{width:100%;height:100%;padding:0;border:0;border-radius:inherit;
  background:transparent;color:inherit;font-size:21px;font-weight:700;text-align:center;
  caret-color:rgb(var(--how-violeta))}
.how-entrar-quadro input:focus{outline:none}
.how-entrar-quadro:focus-within{border-color:rgb(var(--how-violeta))}
.how-entrar-quadro.verde{border-color:#34d399;background:#34d3991a;color:#34d399;
  box-shadow:0 0 0 3px #34d39914}
.how-entrar-quadro.vermelho{border-color:#f87171;background:#f871711a;color:#f87171}
.how-entrar-quadro.sumindo{opacity:0}

/* ---- simbolo do confere ---- */
/* nunca `display:none`: e `opacity` mais `transform`, senao nao ha o que animar */
.how-entrar-selo{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;
  display:grid;place-items:center;border:1.5px solid #34d399;border-radius:26px;
  background:#34d3991a;color:#34d399;opacity:0;transform:scale(.35);pointer-events:none}
.how-entrar-selo.on{animation:how-entrar-selo-entra .46s cubic-bezier(.22,1.4,.4,1) forwards}
@keyframes how-entrar-selo-entra{to{opacity:1;transform:scale(1)}}
.how-entrar-selo svg{width:34px;height:34px}
.how-entrar-selo path{stroke-dasharray:32;stroke-dashoffset:32}
.how-entrar-selo.on path{animation:how-entrar-risca .3s .14s ease forwards}
@keyframes how-entrar-risca{to{stroke-dashoffset:0}}

.how-entrar-onda{position:absolute;left:50%;top:50%;border:1px solid #34d399;border-radius:32px;
  opacity:0;pointer-events:none}
.how-entrar-onda.on{animation:how-entrar-onda-sai .85s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes how-entrar-onda-sai{
  0%{width:88px;height:88px;margin:-44px 0 0 -44px;opacity:.55}
  100%{width:210px;height:210px;margin:-105px 0 0 -105px;opacity:0}
}
.how-entrar-fagulha{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
  border-radius:50%;background:#34d399;opacity:0;pointer-events:none}
.how-entrar-fagulha.on{animation:how-entrar-fagulha-sai .7s cubic-bezier(.16,.8,.3,1) forwards}
@keyframes how-entrar-fagulha-sai{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(1)}
}

/* ---- estados da tela enquanto confere ---- */
/* Tudo o que nao e o anel sai de cena, como na referencia. Sai ENCOLHENDO, e nao so
   apagando: apagando sozinho deixaria uns 200px de buraco em cima do anel. O encolher
   acontece no mesmo tempo do voo dos quadros, entao e um movimento so. */
.how-entrar-social,.how-entrar-ou,#otp-step label,.how-entrar-enviar,.how-entrar-voltar{
  transition:opacity .3s ease,max-height .34s ease,margin .34s ease,transform .3s ease}
.how-entrar-caixa[data-otp] :is(.how-entrar-social,.how-entrar-ou,#otp-step label,
  .how-entrar-enviar,.how-entrar-voltar){
  max-height:0;margin-top:0;margin-bottom:0;opacity:0;overflow:hidden;pointer-events:none}
.how-entrar-caixa[data-otp] .how-entrar-enviar{padding:0;border:0}
.how-entrar-caixa[data-otp=ok] h1{color:#34d399}

/* escondido, nao ocupa altura nenhuma: senao ja nasce um buraco embaixo do codigo */
.how-entrar-selado{display:flex;align-items:center;justify-content:center;gap:7px;
  margin:0;height:0;overflow:hidden;color:#34d399;font-size:13px;font-weight:600;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease,height .3s ease,margin .3s ease}
.how-entrar-selado.on{margin-top:14px;height:20px;opacity:1;transform:none}
.how-entrar-selado svg{width:14px;height:14px;flex:none}

.how-entrar-dica{margin:12px 0 0;color:rgb(var(--muted-foreground));font-size:13px;line-height:1.5;text-align:center}
.how-entrar-dica b{color:rgb(var(--foreground));font-weight:600}
.how-entrar-voltar{display:block;margin:16px auto 0;padding:0;border:0;background:none;
  color:rgb(var(--how-violeta));font-size:13.5px;font-weight:600;cursor:pointer}
.how-entrar-voltar:hover{text-decoration:underline;text-underline-offset:3px}
/* `display:block` acima vence o `.hidden` da plataforma, que tambem vale (0,1,0) e vem
   antes na cascata. Sem esta linha o "Nao recebeu o codigo?" aparece de cara. Mesmo
   tropeco ja registrado em `.how-af-ok` e `.how-faq-limpar`. */
.how-entrar-voltar.hidden{display:none}

.how-entrar-pe{margin:24px 0 0;color:rgb(var(--muted-foreground));font-size:12.5px;text-align:center}
.how-entrar-pe a{color:inherit;text-decoration:none}
.how-entrar-pe a:hover{color:rgb(var(--foreground));text-decoration:underline;text-underline-offset:3px}
.how-entrar-pe span{margin:0 8px;opacity:.5}

/* ---------------- telas menores ---------------- */
/* abaixo de 1000px a colagem vira uma faixa no topo: em duas colunas estreitas o
   formulario ficaria espremido e a arte deixaria de ser arte */
@media(max-width:1000px){
  .how-entrar{grid-template-columns:minmax(0,1fr);min-height:0}
  .how-entrar-arte{order:-1;height:196px}
  .how-entrar-lado{border-left:0;border-top:1px solid rgb(255 255 255 / .06);padding:32px 22px 48px}
}
@media(max-width:560px){
  .how-entrar-arte{height:158px}
  .how-entrar-caixa h1{font-size:23px}
  /* a altura e o vao dos quadros vem do JS nesta largura (50 e 6); aqui so a fonte */
  .how-entrar-quadro input{font-size:19px}
}