/* ==========================================================================
   site-auth.css — telas de autenticacao (login, cadastro, telefone, 2 fatores,
   esqueci/redefinir senha). Carregado SEMPRE depois de site.css, que traz a
   fonte Geist, o reset e os tokens (--primary vem do banco, no <style> unico
   do layout). Aqui nao se redefine token do site: so se deriva.
   Contrato: anexo 02 (componente 13) + anexo 04 item 7 + anexo 05 item 6
   (botao primario com texto branco), item 7 (sparkles no "Testar gratis") e
   item 12 (painel claro, ilustracao abstrata, sem tela do produto).
   Sem sombra em superficie parada, sem emoji, sem gradiente em texto, tema
   claro fixo. Brilho, profundidade e movimento so em animacao e hover.
   Indice:
     1. Tokens locais   2. Split    3. Coluna do formulario
     4. Campos          5. Botoes   6. Avisos e rodape legal
     7. Painel da direita: a cena viva        8. Responsivo e reduced-motion
   ========================================================================== */

/* ── 0. Fonte propria destas telas ────────────────────────────────────── */
/* A Geist Mono so e usada aqui (campo de codigo do 2 fatores). Ela saiu do
   site.css para o site publico parar de baixar 23 KB por causa de tres badges
   de numero. O token --font-mono continua vindo do site.css. */
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/site/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Tokens locais ─────────────────────────────────────────────────── */
.st-auth {
  --auth-field: #d4d4d8;
  --auth-field-bg: #fff;
  --auth-sub: #525260;
  --auth-note-bg: #f4f4f5;
  --auth-col: 424px;

  /* DENSIDADE. Os quatro numeros que decidem a altura da coluna. O cadastro
     tem cinco campos e precisa caber em uma janela de 768px sem rolagem, entao
     o tamanho de trabalho e este. Abaixo de 768px de LARGURA eles voltam ao
     confortavel (secao 8): num celular a fonte do campo NAO pode cair abaixo
     de 16px, senao o iOS aplica zoom sozinho no foco, e o alvo de toque quer
     44px. Quem mexer na altura do formulario mexe aqui, nao campo a campo. */
  --auth-input-h: 40px;
  --auth-input-fs: 14px;
  --auth-btn-h: 44px;
  --auth-gap: 12px;

  /* Painel da direita (anexo 05 item 12): base CLARA e malha da marca em baixa
     opacidade. O degrade escuro anterior saiu inteiro. Tudo derivado de
     --primary por color-mix: trocar a cor da marca no admin repinta o painel.
     7 a 13% mantem a malha como atmosfera, nunca como mancha. */
  --auth-panel-bg: var(--bg-alt);
  --auth-mesh-1: color-mix(in srgb, var(--primary) 13%, transparent);
  --auth-mesh-2: color-mix(in srgb, var(--primary) 10%, transparent);
  --auth-mesh-3: color-mix(in srgb, var(--primary) 7%, transparent);
}

/* ── 2. Split ─────────────────────────────────────────────────────────── */
.st-auth-body { background: var(--bg-card); }

.st-auth {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* A folga de cima e de baixo e o primeiro corte quando a janela e baixa: ela e
   respiro, e o formulario e leitura. Por isso ela sai por ALTURA da janela (e
   nao por largura): quem aperta a coluna e a altura, e uma tela larga e baixa
   sofre o mesmo que um notebook de 1366x768. */
.st-auth__side {
  flex: 0 0 600px;
  width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 40px;
  background: var(--bg-card);
}
@media (max-height: 900px) { .st-auth__side { padding-block: 32px; } }
@media (max-height: 800px) { .st-auth__side { padding-block: 24px; } }
@media (max-height: 740px) { .st-auth__side { padding-block: 18px; } }

.st-auth__col { width: 100%; max-width: var(--auth-col); }

/* Entrada em stagger (so CSS: a coluna do formulario nao depende de JS para
   aparecer). `backwards` segura o estado inicial durante o atraso; sem ele o
   campo pisca cheio antes de comecar. O formulario nao anima como bloco: quem
   anima sao os campos, um a um. */
.st-auth__col > *:not(.st-auth__form),
.st-auth__form > * {
  animation: st-auth-rise .62s cubic-bezier(.16, 1, .3, 1) backwards;
}
.st-auth__col > *:nth-child(1) { animation-delay: .04s; }
.st-auth__col > *:nth-child(2) { animation-delay: .10s; }
.st-auth__col > *:nth-child(3) { animation-delay: .14s; }
.st-auth__col > *:nth-child(4) { animation-delay: .18s; }
.st-auth__col > *:nth-child(5) { animation-delay: .46s; }
.st-auth__col > *:nth-child(6) { animation-delay: .50s; }
.st-auth__col > *:nth-child(7) { animation-delay: .54s; }
.st-auth__col > *:nth-child(8) { animation-delay: .58s; }
.st-auth__col > *:nth-child(9) { animation-delay: .62s; }
.st-auth__col > *:nth-child(n+10) { animation-delay: .66s; }

.st-auth__form > *:nth-child(1) { animation-delay: .20s; }
.st-auth__form > *:nth-child(2) { animation-delay: .25s; }
.st-auth__form > *:nth-child(3) { animation-delay: .30s; }
.st-auth__form > *:nth-child(4) { animation-delay: .35s; }
.st-auth__form > *:nth-child(5) { animation-delay: .40s; }
.st-auth__form > *:nth-child(n+6) { animation-delay: .45s; }

@keyframes st-auth-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── 3. Coluna do formulario ──────────────────────────────────────────── */
/* A logo e um flex de nivel de BLOCO (nao inline-flex): o pill do portal que
   vem depois dela precisa comecar em outra linha. Com inline-flex os dois
   ficavam lado a lado e o pill comia o respiro do titulo. */
.st-auth__brand { display: flex; width: fit-content; }
.st-auth__brand + .st-auth__title { margin-top: 18px; }
.st-auth__brand + .st-auth__badge { margin-top: 16px; }
.st-auth__logo { height: 24px; width: auto; object-fit: contain; }

.st-auth__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-bottom: 10px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.st-auth__title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-1);
}

.st-auth__sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--auth-sub);
}

.st-auth__form { margin-top: 16px; }

.st-auth__alert,
.st-auth__ok {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 19px;
}
.st-auth__alert { border: 1px solid #f3c3c3; background: #fdf3f3; color: #a32020; }
.st-auth__ok { border: 1px solid #bfe3cb; background: #f2fbf5; color: #1a6b3c; }
.st-auth__alert-ico { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; stroke-width: 1.8; }

/* ── 4. Campos ────────────────────────────────────────────────────────── */
.st-auth__field { margin-top: var(--auth-gap); }
.st-auth__field:first-child { margin-top: 0; }

/* Dupla de campos curtos lado a lado (senha e confirmacao). Nao e enfeite: e o
   que devolve 74px de altura ao cadastro e deixa o resto respirar em vez de
   encolher rotulo e campo ate o limite. Vira coluna unica quando a coluna do
   formulario fica estreita demais para dois campos. */
.st-auth__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--auth-gap);
  margin-top: var(--auth-gap);
}
.st-auth__pair .st-auth__field { margin-top: 0; }

.st-auth__label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  color: var(--text-1);
}
.st-auth__req { color: #c02626; font-weight: 500; }

.st-auth__input {
  display: block;
  width: 100%;
  height: var(--auth-input-h);
  padding: 0 12px;
  border: 1px solid var(--auth-field);
  border-radius: 8px;
  background: var(--auth-field-bg);
  font-family: inherit;
  font-size: var(--auth-input-fs);
  line-height: 20px;
  color: var(--text-1);
  transition: border-color .18s ease;
}
.st-auth__input::placeholder { color: var(--text-ghost); }
.st-auth__input:hover { border-color: var(--border-btn); }
/* Foco de 2px sem sombra e sem reflow: o contorno e desenhado PARA DENTRO
   (offset negativo), entao a borda de 1px nao muda de espessura e o campo nao
   pula 1px quando recebe foco. */
.st-auth__input:focus {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.st-auth__input.is-bad { border-color: #c02626; }

.st-auth__hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}
.st-auth__hint--bad { color: #c02626; }

/* Codigo de 2 fatores: digitos espacados, como todo campo de codigo. O campo
   de codigo e o unico que nao encolhe: ele existe para a pessoa conferir seis
   digitos, e 16px e o minimo para isso em qualquer tela. */
.st-auth__input--code {
  height: 46px;
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: .3em;
  text-align: center;
}

.st-auth__row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Campo de telefone: a biblioteca de DDI embrulha o input num .iti e desenha a
   bandeira em posicao absoluta na altura toda. Sem estas quatro linhas o input
   perde a largura e o texto digitado nasce por baixo do seletor de pais. */
.st-auth__field--phone .iti { display: block; width: 100%; }
.st-auth__field--phone .iti__tel-input { width: 100%; }
.st-auth__field--phone .iti--separate-dial-code .iti__tel-input { padding-left: 88px; }
.st-auth__field--phone .iti__selected-country { border-radius: 8px 0 0 8px; }
/* A lista de paises tem rolagem propria: no Chrome ela ja pega a barra do site
   (site.css, secao 3b, que vale para qualquer area rolavel), mas no Firefox as
   propriedades padrao nao herdam e precisam ser escritas no elemento que rola. */
@supports not selector(::-webkit-scrollbar) {
  .iti__country-list { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* ── 5. Botoes ────────────────────────────────────────────────────────── */
/* Texto SEMPRE branco no botao primario (anexo 05 item 6): --primary-on e
   calculado pelo contraste e devolve #111 nas marcas claras, o que o dono
   recusou. O calculo continua valendo para texto pequeno sobre a cor. */
.st-auth__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--auth-btn-h);
  margin-top: 16px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .18s ease;
}
.st-auth__btn:hover { background: var(--primary-hover); }
.st-auth__btn:active { background: var(--primary-active); }
.st-auth__btn svg { width: 16px; height: 16px; stroke-width: 1.8; }

/* Light sweep: um feixe branco atravessa o botao no hover (anexo 02 §4 item
   13). So transform anima, e o feixe nasce e morre fora do botao. */
.st-auth__btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
}
.st-auth__btn:hover::after { animation: st-auth-sweep .62s ease-out; }

@keyframes st-auth-sweep {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 1; transform: translateX(530%); }
}

.st-auth__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--auth-btn-h);
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: var(--bg-card);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-1);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
/* Secundario levanta 1px no hover (anexo 05 item 9). */
.st-auth__google:hover { background: var(--bg-alt); border-color: var(--border-btn); transform: translateY(-1px); }
.st-auth__google svg { flex: 0 0 18px; }

.st-auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}
.st-auth__or::before,
.st-auth__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.st-auth__link {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--primary-ink);
}
.st-auth__link:hover { text-decoration: underline; }

/* "Testar gratis" leva o icone sparkles (anexo 05 item 7). inline-flex com
   baseline para o link continuar deitado na frase que o antecede. */
.st-auth__link--cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: text-bottom;
}
.st-auth__link--cta svg { width: 14px; height: 14px; stroke-width: 1.9; }

.st-auth__ghost {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--primary-ink);
  cursor: pointer;
}
.st-auth__ghost:hover { text-decoration: underline; }

.st-auth__foot {
  margin-top: 14px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--text-muted);
}
.st-auth__foot .st-auth__foot { margin-top: 6px; }

/* ── 6. Avisos e rodape legal ─────────────────────────────────────────── */
.st-auth__legal {
  margin-top: 10px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: var(--text-muted);
}
.st-auth__legal a { color: var(--text-link); text-decoration: underline; }
.st-auth__legal a:hover { color: var(--text-1); }
.st-auth__legal span { margin: 0 4px; color: var(--text-ghost); }

.st-auth__note {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--auth-note-bg);
  font-size: 12px;
  line-height: 17px;
  color: var(--text-muted);
}
.st-auth__note-ico { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; stroke-width: 1.7; }

/* Pill de identificacao (tela do telefone: quem esta logado). */
.st-auth__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-lead);
}
.st-auth__who-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-on);
  font-size: 13px;
  font-weight: 600;
}
.st-auth__who-mail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 7. Painel da direita: a cena ─────────────────────────────────────── */
/* Base CLARA (anexo 05 item 12): o degrade escuro saiu inteiro. A separacao da
   coluna do formulario e 1px, como toda troca de superficie do site, nunca
   sombra. A vida vem de tres camadas de gradiente da marca a 7-13% andando
   devagar, da fita de linhas que ONDULA SEM PARAR (o site-auth.js reescreve o
   d de cada linha a cada quadro) e dos quatro slides que se revezam, cada um
   com titulo, frase e tres mini-cartoes entrando e saindo em stagger. */
.st-auth__panel {
  position: sticky;
  top: 0;
  flex: 1 1 auto;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--auth-panel-bg);
}

/* Malha em movimento: 3 blobs radiais da marca, cada um com sua orbita e sua
   duracao (numeros primos entre si, para o laco nunca "bater" e virar pulso).
   A opacidade mora na COR (color-mix com transparent): assim o pico do blob
   fica nos 13% do contrato e a borda dissolve sozinha.
   So transform anima; nada de background-position. */
.st-auth__mesh {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.st-auth__mesh--a {
  top: -34%;
  right: -20%;
  width: 86%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--auth-mesh-1), transparent 70%);
  animation: st-auth-orb-a 29s ease-in-out infinite alternate;
}
.st-auth__mesh--b {
  bottom: -36%;
  left: -24%;
  width: 92%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--auth-mesh-2), transparent 68%);
  animation: st-auth-orb-b 37s ease-in-out infinite alternate;
}
.st-auth__mesh--c {
  top: 22%;
  left: 20%;
  width: 66%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--auth-mesh-3), transparent 72%);
  animation: st-auth-orb-c 23s ease-in-out infinite alternate;
}

@keyframes st-auth-orb-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-11%, 14%, 0) scale(1.14); }
}
@keyframes st-auth-orb-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(16%, -12%, 0) scale(.92); }
}
@keyframes st-auth-orb-c {
  from { transform: translate3d(-8%, 6%, 0) scale(.9); }
  to   { transform: translate3d(10%, -9%, 0) scale(1.18); }
}

.st-auth__show {
  position: relative;
  width: 100%;
  max-width: 620px;
  /* Altura da ilustracao num token so: os mini-cartoes vivem numa camada irma
     e precisam da mesma caixa. */
  --art-h: 344px;
}

.st-auth__scene { position: relative; height: var(--art-h); }

/* A fita TRANSBORDA a caixa do slide e atravessa o painel inteiro: e ela que
   faz a tela respirar, e nao um desenho preso num quadradinho. O painel tem
   overflow hidden, entao o que sobra some na borda.
   Ela ainda desliza poucos pixels atras do cursor (--mx/--my chegam do
   site-auth.js, -1 a 1). O movimento continuo NAO mora aqui: quem ondula e o
   requestAnimationFrame reescrevendo o "d", senao um transform daqui brigaria
   com o outro.
   A mascara dissolve a fita nas duas pontas: sem ela as linhas terminavam
   todas no mesmo x e o desenho ganhava uma borda reta no meio do painel. */
.st-auth__art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 240px);
  height: 148%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translate(-50%, -50%) translate3d(calc(var(--mx, 0) * 9px), calc(var(--my, 0) * 7px), 0);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

/* Fita: cada linha se desenha (stroke-dashoffset, a excecao que o contrato
   permite) e, dai em diante, ONDULA PARA SEMPRE. Quem faz a ondulacao de
   verdade e o site-auth.js, que reescreve o "d" de cada linha a cada quadro:
   a onda e uma funcao do tempo, entao ela caminha pela fita em vez de a linha
   inteira subir e descer. O que mora aqui e o plano B (sem JS): o mesmo
   movimento em transform, mais pobre, mas nunca parado.
   pathLength="1" no HTML normaliza o comprimento, e por isso a tracada e 1 em
   todas, independentemente do tamanho da curva. */
.st-auth__line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .55;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation:
    st-auth-draw 1.15s cubic-bezier(.4, 0, .2, 1) backwards,
    st-auth-wave 9s ease-in-out infinite alternate;
}
/* Uma linha em cada duas na versao clara da marca: a fita ganha volume sem
   precisar de mais linhas. */
.st-auth__line--2,
.st-auth__line--4,
.st-auth__line--6 { stroke: var(--mk-line); opacity: .95; }

/* As seis fases: a linha vizinha entra logo depois e, no plano B, ondula um
   pouco atras. O primeiro valor e o atraso do traco, o segundo e a fase da
   onda de reserva (negativo = comeca no meio do ciclo). */
.st-auth__line--1 { animation-delay: 0s,    0s; }
.st-auth__line--2 { animation-delay: .05s, -1.5s; }
.st-auth__line--3 { animation-delay: .10s, -3s; }
.st-auth__line--4 { animation-delay: .15s, -4.5s; }
.st-auth__line--5 { animation-delay: .20s, -6s; }
.st-auth__line--6 { animation-delay: .25s, -7.5s; }

/* Com JS na pagina, a ondulacao de reserva sai de cena antes de aparecer: quem
   vai ondular e o requestAnimationFrame. Sobra so o traco entrando. */
.st-auth__art.is-js .st-auth__line { animation-name: st-auth-draw; }

/* Traco terminado: o JS assume. A tracada some junto (com stroke-dasharray
   ligado, cada troca do "d" obrigaria o navegador a remedir o comprimento das
   20 curvas a cada quadro). */
.st-auth__art.is-vivo .st-auth__line {
  animation: none;
  stroke-dasharray: none;
}

@keyframes st-auth-draw {
  from { stroke-dashoffset: 1; }
}
@keyframes st-auth-wave {
  from { transform: translateY(-3px); }
  to   { transform: translateY(3px); }
}

/* Curvas longas cruzando por tras: profundidade sem sombra. */
.st-auth__cross path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1;
  opacity: .17;
}
.st-auth__cross { animation: st-auth-drift 26s ease-in-out infinite alternate; }

/* Dois aneis no canto que a fita deixa vazio: eco geometrico, quase no limite
   do visivel. O tracejado gira tao devagar que so se percebe olhando de
   proposito. transform-box: a origem tem de ser a caixa da elipse, nao o canto
   do SVG. */
.st-auth__ring ellipse {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1;
  opacity: .2;
}
.st-auth__ring-dash {
  stroke-dasharray: 3 10;
  opacity: .32;
  transform-box: fill-box;
  transform-origin: center;
  animation: st-auth-turn 120s linear infinite;
}

@keyframes st-auth-drift {
  from { transform: translate3d(-10px, 6px, 0); }
  to   { transform: translate3d(10px, -6px, 0); }
}
@keyframes st-auth-turn {
  to { transform: rotate(360deg); }
}

/* Mini-cartoes do slide, flutuando sobre a fita. Tres camadas de transform
   aninhadas, porque uma cancelaria a outra:
     .st-auth__chip     posicao na cena + deslize do mouse (--mx/--my)
     .st-auth__chip-in  entrada e saida do slide (o stagger da troca)
     .st-auth__chip-fl  a flutuacao lenta e continua
   Os baralhos ficam empilhados na mesma caixa: durante a troca o que sai ainda
   esta descendo enquanto o que entra ja esta subindo. */
.st-auth__chips {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--art-h);
  pointer-events: none;
}
.st-auth__deck {
  position: absolute;
  inset: 0;
}

.st-auth__chip {
  position: absolute;
  transform: translate3d(calc(var(--mx, 0) * var(--d, 10) * 1px), calc(var(--my, 0) * var(--d, 10) * 1px), 0);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.st-auth__chip--1 { top: -1%;    left: -5%;  --d: 16; }
.st-auth__chip--2 { top: 54%;    right: -7%; --d: 24; }
.st-auth__chip--3 { bottom: 1%;  left: 2%;   --d: 20; }

/* Estado de fora: afundado e invisivel. E tambem para ca que o cartao do slide
   que esta saindo volta, entao a saida desce e a entrada sobe. */
.st-auth__chip-in {
  display: block;
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.96);
  transition: opacity .35s ease, transform .35s cubic-bezier(.4, 0, .6, 1);
}
.st-auth__chip--1 .st-auth__chip-in { transition-delay: 0s; }
.st-auth__chip--2 .st-auth__chip-in { transition-delay: .05s; }
.st-auth__chip--3 .st-auth__chip-in { transition-delay: .1s; }

/* Estado de dentro: entra depois que o baralho anterior ja saiu, mais devagar
   e com desaceleracao longa (o "power3.out" do contrato). */
.st-auth__deck.is-on .st-auth__chip-in {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.st-auth__deck.is-on .st-auth__chip--1 .st-auth__chip-in { transition-delay: .26s; }
.st-auth__deck.is-on .st-auth__chip--2 .st-auth__chip-in { transition-delay: .35s; }
.st-auth__deck.is-on .st-auth__chip--3 .st-auth__chip-in { transition-delay: .44s; }

.st-auth__chip-fl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.st-auth__chip--1 .st-auth__chip-fl { animation: st-auth-orbit-1 17s ease-in-out infinite alternate; }
.st-auth__chip--2 .st-auth__chip-fl { animation: st-auth-orbit-2 21s ease-in-out infinite alternate; }
.st-auth__chip--3 .st-auth__chip-fl { animation: st-auth-orbit-3 19s ease-in-out infinite alternate; }

.st-auth__chip-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 7px;
  background: var(--bg-tile);
}
/* Icone na cor da marca JA corrigida para texto (--primary-text): a primaria
   pura em 15px sobre fundo claro cai abaixo do AA nas marcas claras. */
.st-auth__chip-ico { width: 15px; height: 15px; stroke-width: 1.8; color: var(--primary-text); }

.st-auth__chip-txt { display: block; min-width: 0; }
.st-auth__chip-lbl {
  display: block;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--text-1);
}
.st-auth__chip-note {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  color: var(--text-muted);
}

@keyframes st-auth-orbit-1 {
  from { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(11px, -8px, 0); }
  to   { transform: translate3d(3px, 10px, 0); }
}
@keyframes st-auth-orbit-2 {
  from { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-9px, 11px, 0); }
  to   { transform: translate3d(-12px, -5px, 0); }
}
@keyframes st-auth-orbit-3 {
  from { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(8px, 9px, 0); }
  to   { transform: translate3d(-5px, -11px, 0); }
}

/* Titulo e frase do slide. Fundo claro, entao texto escuro: so a palavra-chave
   sai na cor da marca, em Playfair italico. Os dois sobem em tempos
   diferentes, e por isso a troca tem camada em vez de virar bloco. */
.st-auth__claims {
  position: relative;
  min-height: 116px;
  margin-top: 38px;
}
/* A frase que sai apaga rapido e a que entra so comeca depois: com os dois
   fades do mesmo tamanho, as duas ficavam meio visiveis ao mesmo tempo no meio
   da troca e o texto virava borrao. */
.st-auth__claim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transition: opacity .25s ease;
}
.st-auth__claim.is-on { opacity: 1; transition: opacity .45s ease .28s; }

.st-auth__claim-t,
.st-auth__claim-d {
  transform: translate3d(0, 14px, 0);
  transition: transform .3s cubic-bezier(.4, 0, .6, 1);
}
.st-auth__claim.is-on .st-auth__claim-t { transform: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1) .28s; }
.st-auth__claim.is-on .st-auth__claim-d { transform: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1) .36s; }

.st-auth__claim-t {
  font-size: 30px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text-1);
}
.st-auth__claim-d {
  margin-top: 10px;
  max-width: 470px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-lead);
}
.st-auth__key {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--primary-text);
}

.st-auth__dots {
  display: flex;
  gap: 7px;
  margin-top: 26px;
}
/* Clicavel (troca o slide e reinicia o relogio) mas NAO focavel: a cena toda e
   decorativa e vive dentro de um aria-hidden. O ::after so aumenta a area de
   clique, que em 8px seria pequena demais. */
.st-auth__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary-line);
  cursor: pointer;
  transition: width .4s cubic-bezier(.16, 1, .3, 1), background-color .3s ease;
}
.st-auth__dot::after {
  content: '';
  position: absolute;
  inset: -10px -4px;
}
.st-auth__dot:hover { background: var(--primary-text); }
.st-auth__dot.is-on { width: 24px; background: var(--primary); }

/* Aba em segundo plano: o JS marca o painel e tudo congela (item 9 do anexo
   05: tudo pausa fora da tela). A fita para pelo proprio JS, que solta o
   requestAnimationFrame. */
.st-auth__panel.is-parado .st-auth__mesh,
.st-auth__panel.is-parado .st-auth__line,
.st-auth__panel.is-parado .st-auth__cross,
.st-auth__panel.is-parado .st-auth__ring-dash,
.st-auth__panel.is-parado .st-auth__chip-fl { animation-play-state: paused; }

/* ── 8. Responsivo ────────────────────────────────────────────────────── */
/* Janela baixa: a ilustracao encolhe em vez de estourar os 100vh do painel. */
@media (max-height: 820px) {
  .st-auth__show { --art-h: 292px; }
  .st-auth__claim-t { font-size: 26px; line-height: 34px; }
  .st-auth__claims { margin-top: 30px; min-height: 106px; }
}
@media (max-height: 680px) {
  .st-auth__show { --art-h: 238px; }
  .st-auth__panel { padding: 32px 40px; }
  .st-auth__claims { margin-top: 24px; }
}

@media (max-width: 1280px) {
  .st-auth__panel { padding: 44px 40px; }
  .st-auth__show { max-width: 540px; --art-h: 312px; }
}

@media (max-width: 1140px) {
  .st-auth__side { flex: 0 0 540px; width: 540px; padding-inline: 32px; }
  .st-auth__panel { padding: 40px 30px; }
  .st-auth__show { max-width: 430px; --art-h: 260px; }
  .st-auth__claim-t { font-size: 24px; line-height: 31px; }
  .st-auth__claim-d { margin-top: 8px; font-size: 15px; line-height: 22px; }
  .st-auth__claims { margin-top: 26px; min-height: 98px; }
  .st-auth__chip-fl { gap: 8px; padding: 7px 11px 7px 8px; }
  .st-auth__chip-tile { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px; }
  .st-auth__chip-ico { width: 13px; height: 13px; }
  .st-auth__chip-lbl { font-size: 12px; line-height: 16px; }
  .st-auth__chip-note { font-size: 10px; line-height: 14px; }
  .st-auth__chip--1 { left: -3%; }
  .st-auth__chip--3 { left: 3%; }
}

/* O painel some antes de ficar estreito demais para a ilustracao: abaixo disso
   a tela vira so o formulario, centralizado em 424px (contrato, secao 5). */
@media (max-width: 940px) {
  .st-auth__panel { display: none; }
  .st-auth__side { flex: 1 1 auto; width: 100%; padding-inline: 24px; }
}

/* TOQUE. Daqui para baixo a densidade do desktop nao vale: a fonte do campo
   volta para 16px porque o iOS aplica zoom sozinho ao focar um input com
   fonte menor, e campo e botao voltam para 44px de alvo de toque. Como o
   celular rola de qualquer jeito, esses pixels a mais nao custam nada aqui. */
@media (max-width: 768px) {
  .st-auth {
    --auth-input-h: 44px;
    --auth-input-fs: 16px;
    --auth-btn-h: 48px;
    --auth-gap: 14px;
  }
  .st-auth__label { font-size: 14px; line-height: 18px; margin-bottom: 6px; }
  .st-auth__input { padding-inline: 14px; }
  .st-auth__input--code { height: 52px; font-size: 22px; }
  .st-auth__google { font-size: 15px; }
}

/* A dupla de campos vira coluna: em 424px cada metade ainda cabe, mas daqui
   para baixo a coluna acompanha a janela e dois campos nao cabem lado a lado
   sem cortar o proprio rotulo. */
@media (max-width: 560px) {
  .st-auth__side { padding: 28px 16px 40px; align-items: flex-start; }
  .st-auth__title { font-size: 23px; line-height: 29px; }
  .st-auth__brand { margin-bottom: 20px; }
  .st-auth__pair { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion: ESTADO FINAL, sem laco nenhum. A fita continua inteira (as
   linhas nascem desenhadas, que e o estado base delas, e o JS nem liga o
   requestAnimationFrame); o primeiro slide fica na tela, parado, com os tres
   mini-cartoes no lugar. O que some e o que se repete: malha, onda, deriva,
   giro do anel, flutuacao dos cartoes e a entrada do formulario. */
@media (prefers-reduced-motion: reduce) {
  /* .st-auth__chip precisa aparecer aqui: a flutuacao e declarada em
     `.st-auth__chip--1 .st-auth__chip-fl` e empataria com um seletor de uma
     classe so. */
  .st-auth__mesh,
  .st-auth__line,
  .st-auth__cross,
  .st-auth__ring-dash,
  .st-auth__chip .st-auth__chip-fl { animation: none; }
  .st-auth__btn:hover::after { animation: none; }
  .st-auth__col > *:not(.st-auth__form),
  .st-auth__form > * { animation: none; }
  .st-auth__art,
  .st-auth__chip,
  .st-auth__chip-in,
  .st-auth__claim,
  .st-auth__claim-t,
  .st-auth__claim-d,
  .st-auth__dot,
  .st-auth__google { transition: none; }
  .st-auth__claim-t,
  .st-auth__claim-d { transform: none; }
}