/** * SPLASH · BG Mídia * Abertura em linguagem de cinema: a sala escurece, a tela abre atrás das * tarjas, a marca entra em foco, a frase sobe palavra por palavra e no fim a * cortina levanta com a borda curva. * * A DURAÇÃO É DECISÃO DO CLIENTE, tomada em 13/08 e revista para 6s. Registro * que o CONSELHO do mesmo dia classificou abertura longa como risco de * conversão para tráfego pago, e por isso a quarta condição de exclusão * abaixo existe: quem chega por anúncio entra direto no conteúdo. * * OS 6s SÃO PISO, NÃO RELÓGIO. Quem decide a saída é o script de controle no * fim do body: ele espera o maior valor entre o piso e o conteúdo pronto, e * aplica .is-leaving. Antes a saída era uma animação de atraso fixo aqui no * CSS, o que somava a abertura inteira em cima de um carregamento lento: * medido em 3G, o conteúdo ficava pronto aos 6,9s e a cortina só subia aos * 10,9s. Nenhum atraso de saída mora mais neste arquivo. * * TRAVA DE SEGURANÇA * Tudo aqui depende de [data-splash="on"] no , atributo escrito por um * script inline no APENAS quando as QUATRO condições passam: primeira * visita da sessão, sem movimento reduzido, sem âncora na URL e sem parâmetro * de campanha. Se o JavaScript falhar, o atributo nunca existe e a splash * simplesmente não aparece. O site abre direto. * * ZERO IMAGEM E ZERO BIBLIOTECA: halo e grade são gradientes, o vórtice é * Canvas 2D em JavaScript puro. O feixe do projetor e o brilho pulsante * saíram: com o vórtice de volta eram três coisas dizendo "algo irradia do * centro" ao mesmo tempo, e num piso de 6s a soma delas cansava antes da * metade. Ficou a grade, que é o produto, o halo, que é a marca acendendo, e * o vórtice, que é o que atravessa a pausa. A decisão travada nº 3 vale. * * DESATIVAR: remover o deste arquivo, o bloco .splash do HTML e o * script inline do . */ /* --------------------------------------------------------------------------- LINHA DO TEMPO · piso de 6,00s 0,00 a 5,72 a matriz de LED esquenta numa rampa só, do breu ao brilho 0,00 a 0,90 o campo de luz nasce e começa a espiralar 0,12 a 1,02 as tarjas recuam e a tela abre 0,32 a 0,88 a marca entra com overshoot 0,60 a 1,50 o halo acende por trás dela 1,10 a 2,26 "Sua marca onde a" sobe palavra por palavra 2,26 a 4,30 a pausa antes do fecho. O vórtice converge e a barra mede 4,30 a 5,24 "cidade passa" fecha a frase, com o campo já assentado 5,72 a 6,00 a cortina levanta com a borda curva aplainando POR QUE A PAUSA NO MEIO É PROPOSITAL. A coreografia inteira cabia em 2,6s e o piso é 6s: ou as peças se espalham, ou sobram 3,4s de figura congelada. Espalhar não é esticar cada peça, que deixa tudo lerdo; é separar a frase em duas partes e deixar o fecho chegar junto com a cortina. Quem atravessa o vão é o vórtice, que nesse trecho está no ponto mais denso da convergência, com a rampa da grade por baixo. --------------------------------------------------------------------------- */ /* Trava a rolagem enquanto a abertura está no ar. Quem tira o atributo é o script de controle no fim do body, e um segundo temporizador registrado pelo próprio script do que o escreveu, com teto de 9s. São duas rotas independentes de propósito: se o fim do body não chegar (HTML truncado numa conexão que cai), a antiga trava ficava para sempre e a pessoa via o site inteiro sem conseguir rolar. */ html[data-splash="on"] { overflow: hidden; } html[data-splash="on"] body { overflow: hidden; } .splash { /* A CORTINA. Mais escura que a superfície do site: a sala de cinema é mais escura que a rua. Fixa e não derivada de --color-surface, porque ela precisa estar pintada antes de qualquer JS de tema rodar, senão a primeira coisa que a pessoa vê é um lampejo branco. Token local e não do :root: a splash é uma camada removível, e um valor que só existe aqui não tem por que ocupar espaço na paleta global. */ --cortina: #050506; /* ORDEM INTERNA DA ABERTURA. Não entra na régua global de z-index: aquela governa camadas da página, e a splash inteira já ocupa um degrau dela (--z-splash). Isto aqui é a pilha DENTRO de um contexto de empilhamento só, e nomeá-la é a diferença entre "4" e "o botão de pular fica acima de tudo, inclusive das tarjas". */ --z-vortice: 1; --z-tarja: 2; --z-marca: 3; --z-pular: 4; position: fixed; inset: 0; overflow: hidden; /* o feixe é maior que a tela de propósito. Sem isto os dois dependeriam só do lock no lá em cima, e trava de camada única é trava que um dia alguém remove sem saber. */ z-index: var(--z-splash, 3000); /* topo da escala fechada em styles.css § era 2147483000, o maior inteiro do navegador, o que não deixava nada entrar acima nem no meio */ display: grid; place-items: center; padding: var(--space-6); background: var(--cortina); } html:not([data-splash="on"]) .splash { display: none; } /* --- 1 · MATRIZ DE LED DO FUNDO ------------------------------------------ Continua sendo a assinatura do produto, mas agora em segundo plano: quem manda na cena é a luz, não a grade. */ .splash__grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 13%, transparent) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 13%, transparent) 0 1px, transparent 1px 5px); /* Máscara radial: a grade só existe onde a luz chega, então ela parece revelada pelo feixe em vez de desenhada por cima de tudo. */ -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 72%); opacity: 0; /* Rampa única do começo ao levantar da cortina. Sobe rápido no primeiro quinto e depois continua subindo devagar: é o que dá vida ao vão entre a primeira e a segunda metade da frase sem nada piscar nem pulsar. */ animation: splash-grid 5.72s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* --- 2 · VÓRTICE DE LUZ (canvas) --------------------------------------- Só o enquadramento. Opacidade e ritmo são do script: um dono só para o brilho do campo, senão o envelope do JS e uma animação de CSS disputam a mesma propriedade e o resultado depende de quem termina por último. */ .splash__vortex { position: absolute; inset: 0; z-index: var(--z-vortice); display: block; width: 100%; height: 100%; pointer-events: none; } /* --- 5 · TARJAS DE CINEMA ------------------------------------------------- Cobrem a tela inteira no primeiro frame e recuam até virar a moldura larga. É o gesto de "as luzes baixaram e a tela abriu", e resolve de graça o problema de a splash começar com tudo aparecendo ao mesmo tempo. */ .splash__mask { position: absolute; inset-inline: 0; height: 50%; background: var(--cortina); z-index: var(--z-tarja); pointer-events: none; } .splash__mask--top { top: 0; animation: splash-mask-top 900ms cubic-bezier(0.76, 0, 0.24, 1) 0.12s forwards; } .splash__mask--bottom { bottom: 0; animation: splash-mask-bottom 900ms cubic-bezier(0.76, 0, 0.24, 1) 0.12s forwards; } /* --- 6 · CONTEÚDO ---------------------------------------------------------- */ .splash__inner { position: relative; z-index: var(--z-marca); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; } /* Halo por trás da marca. Separado do logo para poder pulsar sozinho. */ .splash__halo { position: absolute; top: clamp(38px, 8.5vw, 54px); left: 50%; width: clamp(190px, 42vw, 280px); aspect-ratio: 1; translate: -50% -50%; border-radius: var(--radius-full); background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 42%, transparent) 0%, transparent 66%); opacity: 0; animation: splash-halo 900ms cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards; } .splash__logo { position: relative; width: clamp(76px, 17vw, 108px); height: auto; border-radius: var(--radius-full); opacity: 0; scale: 0.78; filter: blur(6px); animation: splash-logo 560ms cubic-bezier(0.34, 1.56, 0.64, 1) 0.32s forwards; } /* --- 7 · A FRASE, PALAVRA POR PALAVRA ------------------------------------- */ .splash__line { display: flex; flex-wrap: wrap; justify-content: center; /* EXCEÇÃO DOCUMENTADA: o vão entre palavras é em `em` e não na escala de espaçamento, porque ele precisa crescer junto com o corpo do tipo. Vão fixo numa frase que vai de 22px a 28px abre demais no tamanho pequeno. */ gap: 0 0.34em; max-width: 22ch; margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: var(--text-xl); font-weight: 800; line-height: 1.2; letter-spacing: var(--tracking-title, -0.02em); color: var(--color-text); /* 19,5:1 sobre a cortina */ } .splash__w { display: inline-block; overflow: hidden; /* EXCEÇÃO DOCUMENTADA: compensa o corte de descendentes (g, p, q, y) pelo overflow. Em `em` porque a descendente é proporcional ao corpo do tipo. */ padding-bottom: var(--descida); margin-bottom: calc(var(--descida) * -1); } .splash__w i { display: inline-block; font-style: normal; translate: 0 110%; filter: blur(8px); opacity: 0; animation: splash-word 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .splash__w--em i { color: var(--color-primary); } /* 6,33:1 sobre a cortina */ /* Dois tempos, não seis atrasos seguidos. A primeira metade da frase entra logo depois da marca; as duas palavras de ênfase chegam no fim, e o fecho acontece com a cortina já começando a subir. */ .splash__w:nth-child(1) i { animation-delay: 1.10s; } .splash__w:nth-child(2) i { animation-delay: 1.28s; } .splash__w:nth-child(3) i { animation-delay: 1.46s; } .splash__w:nth-child(4) i { animation-delay: 1.64s; } .splash__w:nth-child(5) i { animation-delay: 4.30s; } .splash__w:nth-child(6) i { animation-delay: 4.62s; } /* --- 8 · BARRA ------------------------------------------------------------ Mede a espera de verdade. A largura vem do script de controle, quadro a quadro, sobre o tempo que falta para a cortina subir; antes era uma animação de 2,6s que não media nada e terminava um segundo antes da saída. Enquanto o conteúdo ainda carrega ela para em 92%, porque o total ainda não é conhecido e barra que anda sem saber para onde é a mesma mentira em outra escala. */ .splash__bar { position: relative; width: min(220px, 56vw); height: 2px; overflow: hidden; border-radius: var(--radius-full, 999px); background: color-mix(in srgb, var(--color-text) 10%, transparent); opacity: 0; animation: splash-fade 500ms ease 0.9s forwards; } .splash__bar span { position: absolute; inset: 0; transform-origin: left center; scale: 0 1; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover)); box-shadow: var(--glow-primary-soft); } /* --- 9 · PULAR ------------------------------------------------------------ */ .splash__skip { position: absolute; z-index: var(--z-pular); right: var(--space-6); bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-5); /* 40% e não 28%: a borda é o único contorno do botão, então precisa dos 3:1 do SC 1.4.11. Em 28% dava 2,41:1 e reprovava. Em 40% do texto da marca dá 3,60:1. */ border: 1px solid color-mix(in srgb, var(--color-text) 40%, transparent); border-radius: var(--radius-full, 999px); background: transparent; /* Era #C9C9CE, cinza frio: o único resquício da paleta anterior à correção de matiz de 15/08, num botão que fica sozinho num canto escuro e por isso ninguém comparava com nada. 7,94:1 sobre a cortina. */ color: var(--color-text-muted); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; opacity: 0; animation: splash-fade 400ms ease 0.9s forwards; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .splash__skip:hover { color: var(--color-text); border-color: var(--color-primary); background: var(--color-primary-soft); } } .splash__skip:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } /* A SAÍDA, ÚNICA E MAIS RÁPIDA QUE A ENTRADA. Um caminho só, aplicado pelo script tanto no fim natural quanto no Pular: antes eram dois, de 620ms e 260ms, e o de 620ms disparava por atraso fixo no CSS. 280ms contra os 900ms de abertura das tarjas, porque saída lenta faz o site parecer travado, e o conteúdo atrás já está pintado quando ela começa. `border-radius` num elemento superdimensionado dá a borda curva que aplaina enquanto sobe, sem SVG e sem JS. O script espera getAnimations() terminar antes de remover o nó, com teto: nada é cortado no meio nem fica pendurado. */ .splash.is-leaving { animation: splash-out 280ms cubic-bezier(0.76, 0, 0.24, 1) forwards; } /* --- KEYFRAMES ------------------------------------------------------------ */ @keyframes splash-grid { from { opacity: 0; } 18% { opacity: 0.62; } to { opacity: 1; } } @keyframes splash-fade { to { opacity: 1; } } @keyframes splash-mask-top { to { transform: translateY(-100%); } } @keyframes splash-mask-bottom { to { transform: translateY(100%); } } @keyframes splash-halo { to { opacity: 1; scale: 1.06; } } @keyframes splash-logo { to { opacity: 1; scale: 1; filter: blur(0); } } @keyframes splash-word { to { opacity: 1; translate: 0 0; filter: blur(0); } } /* A cortina. Sobe inteira enquanto a borda de baixo, que começa curva, vai aplainando. Curva que aplaina é o que faz a camada parecer um material sendo puxado, e não um retângulo escorregando. */ @keyframes splash-out { from { transform: translateY(0); border-end-start-radius: 0; border-end-end-radius: 0; } to { transform: translateY(-101%); border-end-start-radius: 52% 34%; border-end-end-radius: 52% 34%; visibility: hidden; } } /* --- MOVIMENTO REDUZIDO --------------------------------------------------- Redundância proposital: o script do já não liga a splash quando a preferência está ativa. Esta regra cobre quem muda a preferência com a página aberta. */ @media (prefers-reduced-motion: reduce) { .splash { display: none !important; } html[data-splash="on"], html[data-splash="on"] body { overflow: auto; } }