/* ----------------------------------------------------------------------------- Camada de movimento — revelação por rolagem. Este arquivo foi de 1754 linhas para estas. O que saiu, saiu porque MUDOU DE LUGAR, e não porque deixou de existir: tipografia Archivo agora vive em app.css, na camada de primitivos superfície escura agora é o padrão do sistema, não uma camada por cima a pista e a perspectiva a assinatura virou o facho, que é plano; ver app.css cabeçalho, cartões, viraram regra de componente em app.css botões, campos, rodapé Sobrou a revelação por rolagem, que é a única coisa aqui que depende de JavaScript e por isso não cabe na camada de componentes: ela precisa do par `sem-js`/`js` para nunca esconder conteúdo de quem não executa script. As três regras do pacote de identidade continuam valendo palavra por palavra: 1. NADA SAI DO DOMÍNIO. 2. TRANSFORM E OPACITY, SÓ — as duas propriedades que o navegador anima sem recalcular layout. 3. O MOVIMENTO É OPCIONAL. `prefers-reduced-motion: reduce` desliga tudo, e o desenho permanece. A cascata em templates/base.html não mudou: app.css -> movimento.css -> /brand.css -> {% block brand_css %} ----------------------------------------------------------------------------- */ /* ============================================================================= 1. REVELAÇÃO POR ROLAGEM ============================================================================= */ /* O estado escondido vale só quando o JavaScript está presente. `` vem no HTML e `movimento.js` troca por `js` na primeira linha, antes de o navegador pintar. Sem script, a classe `sem-js` permanece, nenhuma regra abaixo casa, e a página inteira aparece normalmente. Conteúdo nunca depende de script para existir. A revelação usa `translate` — a propriedade independente —, e NÃO `transform`. O motivo é concreto e custou um defeito: quando duas regras de especificidade diferente escrevem as duas em `transform`, uma anula a outra para sempre. Em propriedades separadas, elas compõem. O `rotate: x 7deg` que existia aqui saiu junto com a cena 3D. Ele dependia de `perspective` no elemento pai, que era a mesma perspectiva da pista; sem ela, a inclinação não gira, ACHATA — e um bloco de texto achatado durante meio segundo é pior que nenhum movimento. */ .js [data-revelar] { opacity: 0; translate: 0 28px; transition: opacity var(--mov-entrada) var(--ease-saida), translate var(--mov-entrada) var(--ease-saida); transition-delay: calc(var(--i, 0) * 80ms); } .js [data-revelar].em-cena { opacity: 1; translate: none; } /* ============================================================================= 2. CORTINA DO TÍTULO ============================================================================= */ /* Uma variante da revelação, para título de seção. `data-revelar="cortina"` não exige JavaScript novo: o observador já marca `.em-cena` em qualquer `[data-revelar]`, seja qual for o valor. O atributo aqui só escolhe a coreografia. O título é varrido da esquerda para a direita em vez de subir. Direção da leitura, e não deslocamento genérico — e agora casa com o facho, que também cruza a composição na diagonal em vez de subir. Sem inclinação nenhuma: um título grande deformado durante a transição fica borrado, e o texto é o conteúdo mais importante da seção. */ .js [data-revelar="cortina"] { clip-path: inset(0 100% -30% 0); opacity: 1; translate: none; transition: clip-path 760ms var(--ease-saida); transition-delay: calc(var(--i, 0) * 80ms); } .js [data-revelar="cortina"].em-cena { clip-path: inset(0 0 -30% 0); } /* ============================================================================= 3. MOVIMENTO REDUZIDO ============================================================================= */ /* Quem pede menos movimento recebe a mesma página, parada. Não é "animação mais curta": é animação NENHUMA. O layout, as cores, a hierarquia e toda a informação continuam idênticos — nada aqui vive dentro de uma animação. `!important` é justificado: estas regras precisam vencer qualquer declaração acima, inclusive o `--i` que o JavaScript escreve no elemento. O facho tem a sua própria regra de movimento reduzido, na camada de componentes: lá ele PARA sem sair da tela, porque é composição e removê-lo mudaria o layout de quem pediu menos movimento. */ @media (prefers-reduced-motion: reduce) { .js [data-revelar] { opacity: 1 !important; translate: none !important; transition: none !important; } /* A cortina esconde o título por RECORTE, e não por opacidade. Sem esta linha, quem pede menos movimento receberia a página com todos os títulos de seção recortados a zero — invisíveis e para sempre, porque a transição que os abriria acabou de ser desligada acima. */ .js [data-revelar="cortina"] { clip-path: none !important; } } /* ============================================================================= 4. IMPRESSÃO ============================================================================= */ /* No papel não há rolagem, então não há revelação: tudo precisa estar visível antes da primeira folha sair. */ @media print { .facho, .topo__sentinela { display: none; } .js [data-revelar] { opacity: 1; translate: none; } .js [data-revelar="cortina"] { clip-path: none; } }