/* ==========================================================
   A JANELA DE ENTRAR (#452)
   ==========================================================
   "Um box maior com um vídeo lateral e fundo de pattern quadriculado igual
   do site, o logo do Linealt em cima e os botões em baixo. Deixar o campo
   de e-mail aberto e o botão de continue." A referência foi a janela de
   entrar do higgsfield.ai: duas colunas, a cena à esquerda e a conversa à
   direita.

   Escura, como a página de vendas, e com o quadriculado do site no fundo.
   O clean.css pintava esta janela sempre clara, inclusive com regras de
   `body.noite` que cravam a cor; as daqui são mais específicas (o id, a
   classe da janela e a da coluna) e passam por cima delas. */
#entrar.entrar, #entrar.entrar * {
  --ink: #f7f7f8;
  --ink-soft: #c9ccd1;
  --paper: #121417;
  --fundo: #1a1c1f;
  --linha: rgba(255, 255, 255, .06);
  --linha-forte: rgba(255, 255, 255, .1);
  --suave: #9aa0a8;
  --borda: rgba(255, 255, 255, .12);
  --red: #ff0a2b;
  --red-fundo: color-mix(in srgb, #ff0a2b 60%, #000);
}
#entrar.entrar .modal__fundo { background: rgba(5, 6, 9, .74); }
#entrar.entrar .modal__caixa.entrar__caixa {
  width: min(62rem, 94vw); max-height: 94vh; padding: .75rem; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem;
  background-color: #121417; color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
  position: relative;
}
/* A MALHA ACENDE EM VOLTA DO PONTEIRO, como na capa e no fim da página
   de vendas: "no background de login add o mesmo efeito do background
   do início do site, onde passa o mouse deixa o rastro vermelho".

   A caixa já tinha o quadriculado; o que entra é uma segunda camada,
   mais acesa e puxada para o vermelho, recortada num círculo em volta
   do ponteiro. O js/projetos.js escreve onde ele está (--mx, --my);
   sem ponteiro em cima, ela some.

   `z-index: 0` nos dois painéis para eles ficarem ACIMA desta camada:
   sem isso, o brilho passaria por cima do formulário. */
#entrar.entrar .modal__caixa.entrar__caixa::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background-image:
    radial-gradient(circle 240px at var(--mx, 50%) var(--my, 40%), rgba(255, 10, 43, .14), transparent 70%),
    linear-gradient(rgba(255, 90, 110, .4) 1px, transparent 0),
    linear-gradient(90deg, rgba(255, 90, 110, .4) 1px, transparent 0);
  background-size: 100% 100%, 28px 28px, 28px 28px;
  -webkit-mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 40%), #000 0, transparent 75%);
          mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 40%), #000 0, transparent 75%);
}
#entrar.entrar .modal__caixa.entrar__caixa:hover::after { opacity: 1; }
#entrar.entrar .entrar__video, #entrar.entrar .entrar__lado { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #entrar.entrar .modal__caixa.entrar__caixa::after { transition: none; }
}
.entrar__fechar {
  position: absolute; right: .9rem; top: .9rem; z-index: 2;
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(10, 11, 14, .55); color: #fff;
}
.entrar__fechar svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.entrar__fechar:hover { background: rgba(255, 255, 255, .1); }
.entrar__fechar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- a coluna da conversa ---------- */
#entrar.entrar .entrar__lado {
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.4rem clamp(1.2rem, 3vw, 2.6rem) 1.6rem; overflow: auto; min-width: 0;
}
#entrar.entrar .entrar__lado .entrar__marca { align-self: center; font-size: 2rem; color: #fff; margin-bottom: 1.1rem; }
#entrar.entrar .entrar__lado .modal__titulo {
  margin: 0 0 .5rem; text-align: center; color: #fff;
  font: 700 clamp(1.4rem, 2.4vw, 1.85rem)/1.12 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.03em;
}
#entrar.entrar .entrar__lado .modal__nota { color: var(--suave); text-align: center; }
#entrar.entrar .entrar__lado .modal__nota--topo { margin: 0 0 1.6rem; font-size: .95rem; }
#entrar.entrar .entrar__lado .entrar__vaga { min-height: 44px; margin-bottom: .6rem; }
/* O QUADRADO BRANCO ATRÁS DO GOOGLE NO TEMA ESCURO (#489). O botão dele
   é um iframe de esquema claro, e o body.noite pede color-scheme: dark
   (css/clean.css). Quando o esquema do iframe e o de quem o contém não
   batem, o navegador pinta um fundo opaco atrás do iframe — o quadrado
   em volta da pílula. A vaga volta ao claro, como o tocador de áudio
   (.obj--audio), e o fundo do iframe volta a ser transparente. MEDIDO
   com um iframe claro de pílula arredondada no tema escuro: com dark na
   vaga, o retângulo branco; com light, só a pílula. */
#entrar-google-gis { color-scheme: light; }
#entrar.entrar .entrar__lado .entrar__vaga.carregando { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); }
/* a rede de segurança do Google, quando o script dele não vem */
#entrar.entrar .entrar__lado .modal__google {
  width: 100%; justify-content: center; border-radius: 12px;
  background: #1a1c1f; color: #fff; border: 1px solid rgba(255, 255, 255, .16);
}
#entrar.entrar .entrar__lado .modal__google:hover { background: #23262a; }
#entrar.entrar .entrar__lado .entrar__ou {
  display: flex; align-items: center; gap: .8rem; margin: .9rem 0 .2rem;
  color: var(--suave); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
#entrar.entrar .entrar__lado .entrar__ou::before,
#entrar.entrar .entrar__lado .entrar__ou::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
/* sem o Google ligado (nem o botão dele nem a rede de segurança), o "ou" não separa nada */
#entrar.entrar .entrar__pane:has(#entrar-google-gis[hidden]):has(#entrar-google[hidden]) .entrar__ou { display: none; }
#entrar.entrar .entrar__lado .modal__rotulo { color: var(--suave); margin: 1rem 0 .45rem; }
#entrar.entrar .entrar__lado .modal__campo {
  box-sizing: border-box; width: 100%; padding: .85rem 1rem; border-radius: 12px;
  background: #0f1113; color: #fff; border: 1px solid rgba(255, 255, 255, .14); font-size: 1rem;
}
#entrar.entrar .entrar__lado .modal__campo::placeholder { color: #6b7280; }
/* O VERMELHO É SÓ PARA O ERRO (#472): "no campo para digitar o email o
   box acende vermelho [...] o vermelho parece que tem algo errado". O
   foco fica claro — continua à vista para quem anda pelo teclado — e o
   campo só acende vermelho quando o que está nele não serve: o js marca
   `aria-invalid`, e tira assim que a pessoa volta a digitar. */
#entrar.entrar .entrar__lado .modal__campo:focus { outline: none; border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
#entrar.entrar .entrar__lado .modal__campo[aria-invalid="true"] { border-color: #ff0a2b; }
#entrar.entrar .entrar__lado .modal__campo[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #ff0a2b 25%, transparent); }
/* o Continuar e o Entrar: o vermelho da marca, com a borda de baixo em vermelho escuro */
#entrar.entrar .entrar__lado .entrar__continuar,
#entrar.entrar .entrar__lado .modal__ok {
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--red); color: #fff; font: inherit; font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--red-fundo);
}
#entrar.entrar .entrar__lado .entrar__continuar { width: 100%; margin-top: .9rem; padding: .9rem 1rem; font-size: 1rem; }
#entrar.entrar .entrar__lado .entrar__continuar:hover,
#entrar.entrar .entrar__lado .modal__ok:hover { filter: brightness(1.06); }
#entrar.entrar .entrar__lado .entrar__continuar:focus-visible,
#entrar.entrar .entrar__lado .modal__ok:focus-visible,
#entrar.entrar .entrar__lado .modal__cancelar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#entrar.entrar .entrar__lado .modal__cancelar {
  border-radius: 12px; background: #1a1c1f; color: #fff; border: 1px solid rgba(255, 255, 255, .16);
}
#entrar.entrar .entrar__lado .modal__acoes { margin-top: 1rem; }
#entrar.entrar .entrar__lado .modal__elo,
#entrar.entrar .entrar__lado .modal__voltar { color: var(--suave); }
#entrar.entrar .entrar__lado .modal__elo:hover,
#entrar.entrar .entrar__lado .modal__voltar:hover { color: #fff; }
#entrar.entrar .entrar__lado .modal__recado { margin: .8rem 0 0; }
/* embaixo da senha, o aviso à esquerda e o "Esqueci minha senha" à
   direita, os dois começando na mesma altura: a mesma folga em cima e a
   mesma altura de linha */
#entrar.entrar .entrar__lado .entrar__sob-senha { display: flex; align-items: flex-start; gap: .8rem; margin: .35rem 0 .6rem; }
#entrar.entrar .entrar__lado .entrar__sob-senha .modal__recado { flex: 1; min-width: 0; margin: 0; padding: .4vh 0; line-height: 1.4; }
#entrar.entrar .entrar__lado .entrar__sob-senha .modal__elo { flex: none; margin: 0 0 0 auto; line-height: 1.4; }
#entrar.entrar .entrar__lado .modal__legal { margin-top: 1.2rem; text-align: center; color: var(--suave); }
#entrar.entrar .entrar__lado .modal__legal a { color: #c9ccd1; }
#entrar.entrar .entrar__lado .modal__nota:last-child { margin: .8rem 0 0; font-size: .78rem; line-height: 1.5; }

/* ---------- a cena ao lado: quatro tópicos ---------- */
/* O FIO BRANCO NOS DOIS CANTOS DE BAIXO. Cada coisa pintada dentro da
   caixa é recortada na curva POR SI, e no antisserrilhado da borda a
   de cima não cobre inteira a de baixo: sobrava um pouco do claro — o
   fundo da caixa e o papel da cena — por baixo da legenda escura.
   Então embaixo só fica escuro: o fundo da caixa é o da legenda, a
   legenda é opaca no pé, e o desenho para antes do canto (ele estava
   escondido atrás da legenda ali, de qualquer jeito). */
.entrar__video {
  position: relative; overflow: hidden; min-height: 34rem; border-radius: 16px;
  background: #08090c;
}
/* as quatro cenas moram uma por cima da outra, e só uma aparece */
.ec__cena { position: absolute; inset: 0; }
.ec__cena[hidden] { display: none; }
.ec__arte { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; clip-path: inset(0 0 20px 0); }

/* ============================================================
     1 · MURAL INFINITO

     Quatro camadas, cada uma o DOBRO da anterior, todas encolhendo no
     mesmo passo — 16 vezes por volta, que são quatro dobras. Ao fim de
     uma volta cada camada está onde a QUARTA seguinte estava: é isso
     que deixa alternar dois desenhos, A e B, sem emenda.
     ============================================================ */
  .ec__camada {
    transform-box: view-box; transform-origin: 240px 274px;
    animation: ec-afastar 16s linear infinite;
    filter: drop-shadow(5px 8px 9px rgba(23, 28, 42, .22));
  }
  .ec__camada:nth-of-type(2) { animation-delay: -4s; }
  .ec__camada:nth-of-type(3) { animation-delay: -8s; }
  .ec__camada:nth-of-type(4) { animation-delay: -12s; }
  @keyframes ec-afastar {
    0%    { transform: scale(4.000); opacity: 0; }
    8%    { opacity: 1; }
    12.5% { transform: scale(2.828); }
    25%   { transform: scale(2.000); }
    37.5% { transform: scale(1.414); }
    50%   { transform: scale(1.000); }
    62.5% { transform: scale(0.707); }
    75%   { transform: scale(0.500); }
    87.5% { transform: scale(0.354); }
    92%   { opacity: 1; }
    100%  { transform: scale(0.250); opacity: 0; }
  }

  /* ============================================================
     2 · APRESENTE, ENQUANTO A CENA APARECE

     A câmera salta de peça em peça e o borrão entra com ela: sem ele o
     salto parece corte; com ele, parece câmera.

     CADA PARADA CENTRA A PEÇA, e não o mundo: a conta é
     translate(240 - px·k, 250 - py·k). O 250, e não 300, porque a
     legenda come a parte de baixo — centrar no meio geométrico deixa
     a peça baixa demais.
     ============================================================ */
  .ec__voo {
    transform-box: view-box; transform-origin: 0 0;
    animation: ec-saltar 16.5s linear infinite, ec-borrar 16.5s linear infinite;
  }
  @keyframes ec-saltar {
    0%,   14% { transform: translate(15px, -5px) scale(1.5); }
    17%,  31% { transform: translate(-405px, 55px) scale(1.5); }
    34%,  48% { transform: translate(-510px, -425px) scale(1.5); }
    51%,  65% { transform: translate(-990px, -470px) scale(1.5); }
    68%,  82% { transform: translate(-690px, -950px) scale(1.5); }
    85%,  99% { transform: translate(-15px, -455px) scale(1.5); }
    100%      { transform: translate(15px, -5px) scale(1.5); }
  }
  @keyframes ec-borrar {
    0%, 14%  { filter: blur(0px); }  15.5% { filter: blur(7px); }
    17%, 31% { filter: blur(0px); }  32.5% { filter: blur(7px); }
    34%, 48% { filter: blur(0px); }  49.5% { filter: blur(7px); }
    51%, 65% { filter: blur(0px); }  66.5% { filter: blur(7px); }
    68%, 82% { filter: blur(0px); }  83.5% { filter: blur(7px); }
    85%, 99% { filter: blur(0px); }  99.5% { filter: blur(7px); }
    100%     { filter: blur(0px); }
  }
  .ec__voo-peca { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ec-surgir 16.5s ease-out infinite; }
  .ec__voo-peca:nth-of-type(1) { animation-delay: 0s; }
  .ec__voo-peca:nth-of-type(2) { animation-delay: -13.7s; }
  .ec__voo-peca:nth-of-type(3) { animation-delay: -10.9s; }
  .ec__voo-peca:nth-of-type(4) { animation-delay: -8.1s; }
  .ec__voo-peca:nth-of-type(5) { animation-delay: -5.3s; }
  .ec__voo-peca:nth-of-type(6) { animation-delay: -2.5s; }
  @keyframes ec-surgir {
    0%       { opacity: 0; transform: scale(.82) rotate(-2deg); }
    3%       { opacity: 1; transform: scale(1) rotate(0deg); }
    88%      { opacity: 1; transform: scale(1) rotate(0deg); }
    95%,100% { opacity: 0; transform: scale(1) rotate(0deg); }
  }
  .ec__voo-seta { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ec-ligar 16.5s ease-out infinite; }
  @keyframes ec-ligar {
    0%       { stroke-dashoffset: 1; }
    7%       { stroke-dashoffset: 0; }
    88%      { stroke-dashoffset: 0; }
    95%,100% { stroke-dashoffset: 1; }
  }
  /* A TRACEJADA NÃO PODE SE DESENHAR: desenhar um traço é justamente um
     `stroke-dasharray` de 1 com o `dashoffset` andando, e o pontilhado
     precisa do mesmo atributo. Um anula o outro — então ela chega por
     opacidade, e guarda o seu pontilhado. */
  .ec__voo-tracejada { stroke-dasharray: 11 9; opacity: 0; animation: ec-chegar 16.5s ease-out infinite; }
  @keyframes ec-chegar {
    0% { opacity: 0; } 7% { opacity: 1; } 88% { opacity: 1; } 95%, 100% { opacity: 0; }
  }
  .ec__pisca { animation: ec-pisca 1s steps(2, start) infinite; }
  @keyframes ec-pisca { to { visibility: hidden; } }

  /* ============================================================
     3 · ENSINE   e   4 · CONTE HISTÓRIAS

     Quadros que se montam na ordem em que se explica: primeiro o
     título, depois a peça, depois a seta que liga, e por fim o traço
     de caneta que marca o que importa.

     AS PEÇAS ENTRAM UMA A UMA E SAEM JUNTAS. Cada peça repetia a
     própria volta de 15 s contada do seu atraso, e por isso saía
     tantos segundos depois da primeira quantos tinha entrado: na
     segunda volta a caneta e as setas ainda estavam no quadro
     enquanto as peças se desmontavam e se remontavam — "os traços de
     caneta começam os rabiscos antes dos objetos entrarem". Agora
     cada peça entra UMA vez e fica; quem dá a volta é o quadro
     (`.ec__quadro`), que apaga tudo junto no fim. Ao recomeçar, o
     js/projetos.js zera as animações de dentro, e o quadro se monta de
     novo na ordem.

     A volta das peças continua de 15 s, a mesma do quadro: é dela que
     o js tira quanto o corpo da seta leva, para a ponta vir depois.
     ============================================================ */
  .ec__quadro { animation: ec-quadro 15s linear infinite; }
  @keyframes ec-quadro {
    0%, 86%   { opacity: 1; }
    93%, 100% { opacity: 0; }
  }
  .ec__passo { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ec-passo 15s ease-out both; }
  @keyframes ec-passo {
    0%       { opacity: 0; transform: translateY(10px) scale(.94); }
    4%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .ec__traco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ec-riscar 15s ease-out both; }
  @keyframes ec-riscar {
    0%       { stroke-dashoffset: 1; opacity: 0; }
    1%       { opacity: 1; }
    8%, 100% { stroke-dashoffset: 0; opacity: 1; }
  }
  .ec__tracejada { stroke-dasharray: 10 8; opacity: 0; animation: ec-surgindo 15s ease-out both; }
  @keyframes ec-surgindo {
    0% { opacity: 0; } 5%, 100% { opacity: 1; }
  }

  /* ---------- a legenda, com as quatro abas ---------- */
  .entrar__legenda {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 3rem 1.4rem 1.1rem;
    background: linear-gradient(to top, #08090c 52%, rgba(8, 9, 12, .55) 78%, transparent);
  }
  .entrar__chamada { margin: 0 0 1rem; }
  .entrar__chamada b {
    display: block; color: #fff; text-transform: uppercase;
    font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.05 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.04em;
  }
  .entrar__chamada span { display: block; margin-top: .4rem; color: rgba(255, 255, 255, .72); font-size: .9rem; }

  .entrar__passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .entrar__passos button {
    display: grid; gap: .45rem; width: 100%; padding: 0; text-align: left;
    background: none; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, .55); font: 600 .72rem/1.3 Inter, system-ui, sans-serif;
  }
  .entrar__passos button i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
  .entrar__passos button i::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
  .entrar__passos button:hover, .entrar__passos button:focus-visible { color: rgba(255, 255, 255, .85); outline: none; }
  .entrar__passos button:focus-visible i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
  .entrar__passos button[aria-selected="true"] { color: #fff; }
  /* A BARRINHA É O RELÓGIO (#476): "terminou 1 vídeo vai para o
     próximo". Ela enche durante UMA volta da cena aberta, e quando
     acaba o js/projetos.js abre o tópico seguinte. A volta (--volta) é
     lida da própria cena pelo js, e não escrita aqui de novo. Com o
     foco do teclado nas abas ela para: quem anda por elas não é
     arrastado para outro tópico no meio do caminho. */
  .entrar__passos button[aria-selected="true"] i::after { animation: ec-progresso var(--volta, 15s) linear forwards; }
  .entrar__passos:has(button:focus-visible) i::after { animation-play-state: paused; }
  @keyframes ec-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* no telefone, só a conversa */
@media (max-width: 760px) {
  #entrar.entrar .modal__caixa.entrar__caixa { grid-template-columns: 1fr; padding: .5rem; }
  .entrar__video { display: none; }
  #entrar.entrar .entrar__lado { padding: 2.6rem 1.2rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ec__camada, .ec__voo, .ec__voo-peca, .ec__voo-seta, .ec__voo-tracejada,
  .ec__pisca, .ec__quadro, .ec__passo, .ec__traco, .ec__tracejada { animation: none; }
  /* sem movimento, nada passa sozinho: o tópico aberto fica com a barra cheia */
  .entrar__passos button[aria-selected="true"] i::after { animation: none; transform: scaleX(1); }
  .ec__camada:nth-of-type(1) { transform: scale(2.8); opacity: .45; }
  .ec__camada:nth-of-type(2) { transform: scale(1.4); }
  .ec__camada:nth-of-type(3) { transform: scale(.7); }
  .ec__camada:nth-of-type(4) { transform: scale(.35); opacity: .5; }
  .ec__voo { transform: translate(15px, -5px) scale(1.5); }
  .ec__voo-peca, .ec__passo, .ec__voo-tracejada, .ec__tracejada { opacity: 1; }
  .ec__voo-seta, .ec__traco { stroke-dashoffset: 0; opacity: 1; }
}