/* * Transição entre a loja e o painel. * * São dois momentos, e os dois precisam existir. Sem o segundo, a saída é * suave e a chegada é um soco: a página nova aparece pronta, de uma vez. * * 1. SAÍDA — a cortina cobre a tela atual (elemento .cortina, com marca * e roda girando). * 2. CHEGADA — a página nova nasce coberta pelo mesmo gradiente e o * dissolve (pseudo-elemento em , classe .chegando). * * A chegada é pseudo-elemento, e não elemento: ela precisa pintar antes de o * corpo existir, senão a página pisca antes de ser coberta. Um script minúsculo * no põe a classe; o resto é animação de CSS. * * Duas regras de segurança que não são negociáveis, e a razão está logo abaixo. */ /* ========================================================= SAÍDA ========================================================= */ .cortina { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(140deg, #e4007c 0%, #ff5c39 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; transition: opacity .3s ease; } .cortina.visivel { opacity: 1; } /* * Sem estas duas, a cortina cobre a tela inteira o tempo todo — invisível por * causa do opacity — e engole todo clique do site. * * O navegador esconde o atributo `hidden` por um seletor de atributo, que * perde em especificidade para o `.cortina { display: flex }` acima. E a * segunda garante que, mesmo exibida sem estar ativa, o clique atravesse. */ .cortina[hidden] { display: none; } .cortina:not(.visivel) { pointer-events: none; } .cortina-marca { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #fff; animation: cortina-pulsar 1.6s ease-in-out infinite; } .cortina-roda { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: cortina-girar .7s linear infinite; } .cortina-texto { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .92); margin: 0; } @keyframes cortina-girar { to { transform: rotate(360deg); } } @keyframes cortina-pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(.985); } } /* ========================================================= CHEGADA ========================================================= */ /* * `pointer-events: none` desde o primeiro quadro: este véu nunca chega perto * de interceptar um clique, aconteça o que acontecer com o JavaScript. * * E some por animação de CSS, não por JavaScript. Se o script falhar depois de * pôr a classe, o véu ainda se dissolve sozinho — em vez de deixar a tela * coberta para sempre. */ html.chegando::before { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: linear-gradient(140deg, #e4007c 0%, #ff5c39 100%); animation: cortina-revelar .55s cubic-bezier(.4, 0, .2, 1) .08s forwards; } @keyframes cortina-revelar { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } /* O conteúdo sobe um pouco enquanto o véu se dissolve. É o que dá a sensação de a página estar chegando, e não de o véu estar simplesmente sumindo. */ html.chegando body > * { animation: cortina-subir .5s cubic-bezier(.2, .7, .3, 1) .12s backwards; } @keyframes cortina-subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ========================================================= MENOS MOVIMENTO ========================================================= */ /* Quem pede menos animação no sistema não recebe nem a espera nem o movimento. O JavaScript já pula a saída; isto cobre a chegada. */ @media (prefers-reduced-motion: reduce) { .cortina { transition: none; } .cortina-roda, .cortina-marca { animation: none; } html.chegando::before { animation-duration: .01s; } html.chegando body > * { animation: none; } }