/* ============================================================ ABERTURA — ident de entrada da aba Vídeos (ver assets/js/abertura.js) A folha aqui só monta o palco: tela preta, canvas, estouro de luz e o véu de grão. Todo o movimento é canvas, porque os feixes precisam nascer do desenho real das letras — coisa que CSS não alcança. O nasce com .abertura-ativa (script de boot no ), então o primeiro paint já é preto: nunca há um lampejo da página de vídeos antes da abertura começar. ============================================================ */ .abertura { position: fixed; inset: 0; z-index: 100000; background: #060403; overflow: hidden; opacity: 1; transition: opacity 440ms cubic-bezier(0.33, 0, 0.2, 1); contain: strict; } html.abertura-ativa, html.abertura-ativa body { overflow: hidden; } /* Sem JS a classe nunca entra e o overlay nunca aparece — a página de vídeos abre direto, sem abertura e sem tela preta presa. */ html:not(.abertura-ativa) .abertura { display: none; } .abertura.is-saindo { opacity: 0; } .abertura-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Brilho de fundo que acompanha o centro da luz. Fica atrás do canvas, dando corpo ao preto — sem ele o fundo é chapado demais pro volume de luz que passa por cima. */ .abertura-halo { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(215, 162, 83, 0.16) 0%, rgba(215, 162, 83, 0.05) 26%, transparent 58%); animation: abertura-halo var(--abertura-dur, 3860ms) cubic-bezier(0.3, 0, 0.2, 1) forwards; animation-play-state: paused; } @keyframes abertura-halo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 22% { opacity: 0.55; } 48% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 76% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.86); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } } /* Vinheta: fecha os cantos pra a luz do centro ter pra onde crescer. */ .abertura-vinheta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 82% 72% at 50% 50%, transparent 34%, rgba(4, 3, 2, 0.62) 78%, rgba(4, 3, 2, 0.92) 100%); } /* Grão. Mesmo ruído do resto do site: tira o aspecto digital chapado do preto e dá textura de projeção. */ .abertura-grao { position: absolute; inset: -50%; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); animation: abertura-grao 0.6s steps(3) infinite; } @keyframes abertura-grao { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } } /* Estouro de luz do fim. A opacidade é escrita pelo JS quadro a quadro: ela é o pico da explosão, não uma transição solta. */ .abertura-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 253, 248, 0.98) 0%, rgba(255, 240, 214, 0.9) 30%, rgba(231, 186, 112, 0.55) 58%, rgba(215, 162, 83, 0) 82%); } @media (prefers-reduced-motion: reduce) { .abertura-halo, .abertura-grao { animation: none; } .abertura-halo { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } .abertura { transition-duration: 380ms; } }