/* Cortina de transição entre páginas. * * Faixas verticais que sobem escalonadas para cobrir a tela, a navegação * acontece por baixo, e na página seguinte elas continuam subindo e saem. O * efeito é de uma coisa só atravessando as duas páginas. * * O estado padrão é INVISÍVEL e sem captura de clique. Quem liga a cortina é o * JS; se ele não rodar, a navegação é a de sempre e nada disso existe. Cortina * que depende de script para SUMIR é como se tranca a própria página. */ .capa-transicao { position: fixed; inset: 0; z-index: 9999; display: grid; grid-template-columns: repeat(var(--faixas, 5), 1fr); pointer-events: none; } .capa-transicao i { display: block; height: 100%; background: #0F172A; transform: translateY(100%); will-change: transform; } /* --- cobrindo: as faixas sobem de baixo ---------------------------------- */ .capa-transicao.cobrindo i { animation: faixa-sobe var(--dur) cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: var(--atraso); } @keyframes faixa-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } } /* --- descobrindo: continuam subindo e saem por cima ---------------------- */ .capa-transicao.descobrindo i { transform: translateY(0); animation: faixa-sai var(--dur) cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: var(--atraso); } @keyframes faixa-sai { from { transform: translateY(0); } to { transform: translateY(-100%); } } /* Nada de travar a rolagem do corpo aqui. * * `overflow: hidden` no quebra `position: sticky` em QUALQUER * descendente, e a lateral do console é sticky. O ganho era estético e * invisível (a cortina cobre a tela inteira; ninguém vê o que rola por baixo), * e o custo era a lateral descer junto com a página. */ @media (prefers-reduced-motion: reduce) { .capa-transicao { display: none; } }