/* ============================================================================= ENTRADA DAS DUAS PORTAS — /entrar e / (criar conta) FOLHA SEPARADA, E A SEPARACAO TEM DOIS MOTIVOS. O primeiro e o mesmo de `app-motion.css`: coreografia de UMA tela nao paga bytes em todas. `_theme.php` so pede este arquivo quando `pagina-acesso` esta no , entao ele nao existe no /app, no /admin nem nas outras telas de autenticacao. O segundo e de convivencia: em 26/08/2026 as duas portas estavam sendo reescritas (`acesso.php` e os quatro parciais `_acesso-*`), e escrever esta coreografia dentro do `style.css` — ou dentro daqueles arquivos — era pedir para uma das duas mudancas apagar a outra. Uma folha nova nao colide com ninguem. ----------------------------------------------------------------------------- O QUE ESTA COREOGRAFIA E, E O QUE ELA NAO PODE VIRAR ----------------------------------------------------------------------------- A referencia que o dono trouxe e uma tela de ABERTURA: fundo escuro, marca nascendo dentro de um anel, tipografia gigante, um botao para pular. Aquilo funciona onde o unico trabalho da tela e impressionar. AQUI O TRABALHO E OUTRO: alguem precisa criar conta ou entrar. Uma abertura de verdade — com "pular apresentacao" — poria uma porta na frente da porta, e o formulario e a razao de a pagina existir. Entao o que se importou foi o VOCABULARIO (a marca que se apresenta, a tipografia que chega com intencao, o ritmo), e nao o formato. TRES REGRAS QUE ESTA FOLHA NAO QUEBRA: 1. NADA ATRASA O FORMULARIO. Toda a sequencia cabe em ~900ms e os campos sao clicaveis desde o primeiro quadro — a animacao e de opacidade e transform, que nao bloqueiam interacao. Quem chega decidido digita por cima da entrada; 2. NADA DESLOCA LAYOUT. Nenhum keyframe mexe em largura, altura, margem ou posicao no fluxo — so `opacity`, `transform`, `filter` e `clip-path`. Sem CLS, e sem o campo fugindo do dedo; 3. TUDO MORRE COM `prefers-reduced-motion`. O arquivo inteiro vive dentro de `no-preference`; quem pediu menos movimento recebe a tela pronta, que e o estado final de todas as regras (por isso `both`, e por isso os `from` sem `to`). ============================================================================= */ @media (prefers-reduced-motion: no-preference) { /* --- o vocabulario ------------------------------------------------------ Um gesto so, reusado com atrasos diferentes. `home_sobe` (style.css) fazia isto na home com 28px e blur(6px); aqui a distancia e menor porque a tela e mais densa e o olho tem menos caminho a percorrer antes de encontrar o campo de e-mail. */ @keyframes acesso_sobe { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } } /* A tipografia NAO sobe: ela e REVELADA, de baixo para cima, como se a linha estivesse sendo composta. `clip-path` corta sem tirar o elemento do fluxo — a caixa do

ocupa o espaco final desde o primeiro quadro, que e o que impede o texto abaixo de pular. / @keyframes acesso_compoe { from { opacity: 0; clip-path: inset(0 0 105% 0); transform: translateY(10px); } to { opacity: 1; clip-path: inset(0 0 -5% 0); transform: none; } } / O selo de topo chega com o espacamento ABERTO e fecha ate o valor final. E o unico gesto puramente tipografico da tela, e ele diz "isto e um rotulo, nao uma frase" antes de a pessoa ler as palavras. `letter-spacing` nao desloca nada porque o elemento e `display: block` numa linha propria. / @keyframes acesso_selo { from { opacity: 0; letter-spacing: .42em; } to { opacity: 1; letter-spacing: .14em; } } / --- a marca ------------------------------------------------------------ O ANEL E A CITACAO DA REFERENCIA, e e a unica coisa dela que veio inteira: um circulo que nasce apertado em volta do simbolo, abre e some. Ele mora num pseudo-elemento do , porque as duas logos sao e imagem nao tem ::before. `pointer-events: none` porque o e clicavel e o anel passa por cima dele; sem isso o primeiro clique na logo, nos primeiros 900ms, cairia no enfeite. / .pagina-acesso .marca { position: relative; } .pagina-acesso .marca::before { content: ""; position: absolute; left: 18px; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1.5px solid var(--fss-acao); border-radius: 50%; pointer-events: none; animation: acesso_anel 1100ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 120ms both; } @keyframes acesso_anel { from { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } to { opacity: 0; transform: scale(9); } } / A logo em si: entra do jeito mais discreto possivel, porque o anel ja chamou atencao. Escala de 0.86 e nao de 0 — logo que nasce do nada parece carregamento com problema, e esta e a marca da casa recebendo alguem. / .pagina-acesso .marca_logo, .pagina-acesso .marca_nome { animation: acesso_marca 620ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) both; } .pagina-acesso .marca_nome { animation-delay: 120ms; } @keyframes acesso_marca { from { opacity: 0; transform: scale(.86); } } / --- o painel de marca, na ordem em que se le --------------------------- Selo -> promessa -> o que voce leva -> os selos de confianca. Os atrasos sao curtos e crescentes: a leitura acompanha, mas nao espera. / .pagina-acesso .autenticar_marca .caps { animation: acesso_selo 720ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 90ms both; } .pagina-acesso .autenticar_marca h1 { animation: acesso_compoe 760ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 150ms both; } / AS DUAS PALAVRAS VERMELHAS CHEGAM DEPOIS DA FRASE, e este e o unico lugar onde o atraso carrega significado em vez de ritmo: a promessa se compoe ("Descubra onde sua operacao comercial esta…") e so entao o diagnostico cai ("perdendo receita"). E a mesma frase, dita na ordem em que ela dói. / .pagina-acesso .autenticar_marca .destaque { display: inline-block; / transform nao vale em caixa inline / animation: acesso_sobe 620ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 560ms both; } .pagina-acesso .autenticar_marca .sub { animation: acesso_sobe 620ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 380ms both; } / Os tres selos em cascata curta (70ms). Mais que isso e o terceiro chega depois de a pessoa ja ter olhado para o formulario. / .pagina-acesso .confianca li { animation: acesso_sobe 560ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) both; } .pagina-acesso .confianca li:nth-child(1) { animation-delay: 470ms; } .pagina-acesso .confianca li:nth-child(2) { animation-delay: 540ms; } .pagina-acesso .confianca li:nth-child(3) { animation-delay: 610ms; } / --- o cartao ----------------------------------------------------------- ELE ENTRA CEDO, MAS NAO PRIMEIRO — e a diferenca foi MEDIDA. A primeira versao trazia o cartao a 180ms e a coluna da esquerda a partir de 240ms. Fotografada a 220ms, a tela tinha o formulario inteiro montado ao lado de METADE ESQUERDA VAZIA: por um terco de segundo, aquilo nao lia como coreografia, lia como pagina que carregou pela metade. Agora a marca e a promessa lideram (90ms e 150ms) e o cartao entra logo atras, a 200ms. Ele continua chegando cedo — quem ja tem conta vem direto para ele e nao pode esperar —, mas depois de a esquerda existir. ------------------------------------------------------------------------- QUEM ANIMA E O CARTAO, E NAO O FORMULARIO DENTRO DELE (01/09/2026) ------------------------------------------------------------------------- ATE ESTA ONDA O ALVO ERA `.autenticar_form`, e o cartao que o contem animava em OUTRA folha, com OUTRO relogio: style.css:3729 .autenticar_painel auth_entra 420ms, delay 0 esta folha .autenticar_form acesso_chega 700ms, delay 260ms Ou seja: o cartao existia 260ms antes do proprio conteudo. Fotografado a 120ms (`evidencias/w81/film-antes-120.png`), o resultado era um cartao aceso, na altura final, com titulo, subtitulo e rodape — e ~520px de BURACO no meio, onde moram os sete campos. E o mesmo defeito do paragrafo acima virado do avesso: consertou-se a ordem ENTRE as colunas e abriu-se um vazio DENTRO do cartao. Agora o gesto e um so. O cartao carrega o deslocamento (e por isso a regra abaixo tem de vencer a de `style.css`: `.pagina-acesso` na frente resolve, sem `!important`), e o conteudo apenas RESOLVE a opacidade atras dele — duas batidas na mesma pancada, nao duas pancadas. / .pagina-acesso .autenticar_painel { animation: acesso_chega 640ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 200ms both; } @keyframes acesso_chega { from { opacity: 0; transform: translateY(20px) scale(.99); } } / AS TRES BATIDAS DE DENTRO — e nenhuma delas desloca nada. O escalonamento e por CLASSE, nunca por `nth-child`: os primeiros filhos do formulario sao o token CSRF e ate seis campos ocultos de atribuicao (RF01), que existem ou nao conforme a query string da campanha. Contar posicao aqui faria o mesmo anuncio entrar com um ritmo em `?utm_source=x` e com outro sem — coreografia que muda com a origem do lead. So `opacity`: o cartao ja se move por todos. Conteudo que desliza dentro de uma caixa que tambem desliza e o que produzia o efeito de duas camadas escorregando uma sobre a outra — e e o que poe campo debaixo do cursor de quem chegou decidido. / @keyframes acesso_surge { from { opacity: 0; } } / 1. o corpo do formulario. O CAMINHO DO ERRO NAO PRECISA DE GUARDA NESTAS TRES REGRAS. A primeira versao desta onda escrevia `:not(:has(.acesso_falhas))` em cada uma delas E mantinha o bloco de silencio no fim do arquivo: duas maquinas decidindo a mesma coisa, com a segunda ja cobrindo a primeira — inclusive o cartao, que a primeira nem alcancava. Quem for mexer no comportamento do 422 mexe num lugar so: o bloco "A TELA NAO SE APRESENTA DUAS VEZES", la embaixo. / .pagina-acesso .autenticar_form { animation: acesso_surge 340ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 240ms both; } / 2. o botao, DEPOIS dos campos que ele envia. A ordem tem sentido de leitura: primeiro o que se preenche, entao o que se aperta. / .pagina-acesso .autenticar_form .btn { animation: acesso_surge 320ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 360ms both; } / 3. a saida para a outra porta, por ultimo. Ela e a alternativa a acao principal e chega quando a acao principal ja esta lida. / .pagina-acesso .autenticar_pe { animation: acesso_surge 320ms var(--curva-suave, cubic-bezier(.2,.8,.2,1)) 430ms both; } / --- o que NAO se anima ------------------------------------------------- Campo, botao e mensagem de erro ficam de fora de proposito. Erro: quando o formulario volta com "e-mail ou senha invalidos", a pagina recarrega e a coreografia inteira roda DE NOVO. Animar o aviso o faria chegar 700ms depois do resto, na segunda vez que a pessoa erra a senha — exatamente quando ela esta procurando por ele. O aviso tem de estar la no primeiro quadro. Campo com foco: quem chega por Tab ou volta de um erro pode estar com o cursor dentro de um campo antes de a animacao acabar. Mover a caixa debaixo do cursor e o tipo de gentileza que atrapalha. / .pagina-acesso .msg, .pagina-acesso .message, .pagina-acesso [role="alert"], .pagina-acesso .field-error { animation: none !important; } / --- A TELA NAO SE APRESENTA DUAS VEZES --------------------------------- MEDIDO EM 01/09/2026 (`evidencias/w81/erro-422.txt`). Toda resposta 422 — senha curta, e-mail malformado, termos nao aceitos — e uma CARGA NOVA do mesmo documento, e a coreografia inteira rodava de novo: o anel na logo, a promessa se compondo, os selos em cascata, o cartao subindo. Novecentos milissegundos de apresentacao para quem ja esta na tela ha um minuto e acabou de errar um campo. O preco nao e so de paciencia. O resumo de erros nasce DENTRO do cartao, e o cartao chegava com 200ms de atraso: a unica coisa que a pessoa esta procurando aparecia depois de tudo. `autofocus` ja tinha movido o foco para uma caixa ainda invisivel. ENTAO: quando existe `.acesso_falhas` no documento, nada se apresenta. A tela ja foi apresentada — o que ela tem a dizer agora e onde esta o erro, e isso se diz no primeiro quadro. POR QUE `` E NAO UMA LISTA DE SELETORES. Lista envelhece calada: quem acrescentar um gesto novo la em cima nao vai lembrar de exclui-lo aqui, e o defeito volta sem ninguem decidir isso. Com ``, o padrao e o silencio e a EXCECAO e que precisa ser escrita — e ha exatamente uma. O `` E ANCORADO EM `.marca` E `.autenticar`, E NAO NO . Sao os dois territorios que ESTA FOLHA anima, e sao os dois unicos que ela pode calar. A primeira versao ancorava em `.pagina-acesso` direto — e com isso alcancava `.cena`, o fundo compartilhado por dezesseis telas (`themes/portal/_cena.php`), congelando a deriva de `.cena_glow` numa camada que nao e nossa. Silenciar o que a folha nao acendeu e mexer na casa dos outros; a regra vale so onde a coreografia mora. (Se `:has()` faltar no navegador, a lista inteira e descartada e a tela volta a se apresentar no 422. Degradacao para o comportamento anterior, nunca para tela quebrada.) / .pagina-acesso:has(.acesso_falhas) .marca, .pagina-acesso:has(.acesso_falhas) .marca::before, .pagina-acesso:has(.acesso_falhas) .marca , .pagina-acesso:has(.acesso_falhas) .autenticar, .pagina-acesso:has(.acesso_falhas) .autenticar , .pagina-acesso:has(.acesso_falhas) .autenticar ::before, .pagina-acesso:has(.acesso_falhas) .autenticar ::after { animation-name: none; } /* A EXCECAO: o disco do envio. Ele nao apresenta nada — ele diz que o POST esta em curso, AGORA, depois de a pessoa clicar em corrigir e reenviar. E o unico retorno que existe entre o clique e a troca de pagina (o envio e sincrono, sem JavaScript no caminho do formulario), e congela-lo aqui deixaria o segundo envio tao mudo quanto o primeiro era antes da onda 15. */ .pagina-acesso:has(.acesso_falhas) .btn[data-pendente]::before { animation-name: btn_gira; } }