/* =========================================================================== ABERTURA CINEMATOGRÁFICA + TOPO VIVO — camada opcional e REVERSÍVEL. Para desligar tudo isto: apagar abertura.css e abertura.js, as linhas de include nos HTML (link + script "abertura") e o mini-script "com-abertura" no do index.html. Nada aqui altera o estilo.css. Sem JS, com reduced-motion ou se algo falhar, o site nasce inteiro como sempre — a abertura só prende a cena por no máximo 4,5 s (rede de segurança no próprio snippet do ). =========================================================================== */ /* --- 1. Abertura: o site segura a respiração enquanto o logo entra --- */ html.com-abertura body { overflow: hidden; } html.com-abertura .hero-fio, html.com-abertura .hero .sobrelinha, html.com-abertura .hero h1, html.com-abertura .hero-apoio, html.com-abertura .hero-acoes, html.com-abertura .hero-selo { animation-play-state: paused; } /* o logo verdadeiro espera o clone chegar no lugar dele */ html.com-abertura .hero-logo { opacity: 0; animation: none; } html.abertura-solta .hero-logo { opacity: 1; animation: none; } /* o véu: o próprio site, desfocado, atrás do logo. É um pseudo do body ligado pela classe que o põe de forma SÍNCRONA — assim ele já existe no primeiro frame e o site nunca pisca nítido antes da abertura (o div criado pelo JS chegava tarde: o JS é defer, no fim do body). */ html.com-abertura body::before, html.abertura-saindo body::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(27, 3, 8, .46); -webkit-backdrop-filter: blur(26px) saturate(.92); backdrop-filter: blur(26px) saturate(.92); transition: opacity .95s ease; } html.abertura-saindo body::before { opacity: 0; pointer-events: none; } .abertura-logo { position: fixed; left: 50%; top: 50%; z-index: 91; width: min(52vw, 400px); height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .5)); animation: logo-nascer 1s cubic-bezier(.22, .8, .3, 1) both; } @keyframes logo-nascer { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* --- 2. Topo vivo: SEMPRE transparente; desvanece ao rolar a página --- */ /* a barra deixa de empurrar o conteúdo: o herói (bordô) desliza por baixo dela, senão "transparente" mostraria o fundo marfim do body e o texto da barra sumiria. --topo-altura é medida pelo abertura.js. */ html.tem-js .topo { margin-bottom: calc(var(--topo-altura, 76px) * -1); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity .5s ease, transform .5s ease; } html.tem-js body.topo-oculto .topo { opacity: 0; transform: translateY(-10px); pointer-events: none; }