/* =========================================================
CPPEM · DUAS LIVES — Praça PMPE 08/09 e Distintivo PCPE 10/09
-----------------------------------------------------
Sistema visual herdado de ../unificados: Oxanium + Rajdhani,
ouro #AF9256 sobre preto #0A0A0B, fios de 1px em ouro
translúcido, cantos chanfrados de operação, grão de
impressão, brasas subindo pela viewport.
A peça que sustenta a hero é o BRASÃO FUNDIDO (.fusao), aqui
na variante de TRÊS (.fusao--trio): a PMPE numa cunha, a PCPE
na outra e o leão do CPPEM na do meio, partidos por duas
costuras de ouro — as duas corporações e quem prepara para
elas, no mesmo medalhão.
Na entrada o leão desce e assenta no centro; então as duas
corporações vêm dos lados e batem nele, no mesmo instante em
que os dois nomes de operação travam no divisor da manchete.
Toda a marcação de tempo dessa cena mora na .hero.
O que é novo em relação ao unificados é o bloco de
INSCRIÇÃO (.inscricao): as duas datas com contagem regressiva
para a próxima à esquerda e formulário à direita. O unificados
é página de venda direta e não tem formulário nenhum.
========================================================= */
/* ─── RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── TOKENS ───────────────────────────────────────────── */
:root {
--gold: #AF9256;
--gold-light: #C9AE7A;
--gold-pale: #F0DCB0;
--gold-dark: #8A7040;
--gold-deep: #5E4B29;
--bg: #0A0A0B;
--bg-2: #111115;
--bg-3: #18181E;
--bg-4: #1F1F28;
--border: rgba(175,146,86,.18);
--border-soft: rgba(175,146,86,.10);
--border-active: rgba(175,146,86,.55);
--text: #E8E4D9;
--text-dim: #ADA99B;
--text-mute: #87847A;
--danger: #C25B52;
/* Assinatura quente da página. É de SUSSURRO: entra em halos e clarões,
nunca em texto corrido ou botão. O sistema continua sendo o ouro. */
--ember: #C4703F;
--font-title: 'Oxanium', system-ui, sans-serif;
--font-ui: 'Rajdhani', system-ui, sans-serif;
--nav-h: 76px;
--ease: cubic-bezier(.4,0,.2,1);
--t: .28s var(--ease);
--maxw: 1180px;
}
/* ─── BASE ─────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 16px);
-webkit-text-size-adjust: 100%;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 17px;
font-weight: 500;
line-height: 1.65;
overflow-x: hidden;
position: relative;
}
/* grão fino: dá peso de impressão ao preto chapado. Fica acima do conteúdo
(z-index 210) e abaixo de navbar/dock/float — de dentro de uma camada
z-index 1 o grão sumiria sob as seções. */
body::before {
content: ''; position: fixed; inset: 0; z-index: 210; pointer-events: none;
opacity: .13; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* height:auto é obrigatório: os carregam width/height para reservar
espaço e evitar layout shift, e sem isto o atributo height venceria e
esticaria a imagem verticalmente. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
strong, b { font-weight: 700; color: var(--text); }
::selection { background: var(--gold); color: #0B0A08; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0d0d0f; }
::-webkit-scrollbar-thumb { background: #2a2618; border: 2px solid #0d0d0f; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* ─── LAYOUT ───────────────────────────────────────────── */
.container { width: min(100% - 44px, var(--maxw)); margin-inline: auto; }
.center { text-align: center; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Os dois clarões diagonais existem contra o "preto chapado": sem eles cada
seção era um retângulo de #0A0A0B liso, e a página inteira lia seca entre
um bloco e outro. São largos e fracos de propósito — não se enxerga o
degradê, enxerga-se que o fundo tem profundidade. */
.section {
position: relative; padding: 106px 0; z-index: 2;
background:
radial-gradient(900px 460px at 80% 6%, rgba(196,112,63,.055), transparent 68%),
radial-gradient(780px 420px at 14% 94%, rgba(175,146,86,.045), transparent 70%);
}
.section--alt { background: linear-gradient(180deg, #0C0C0E, #0F0F13 50%, #0C0C0E); }
/* ─── MARCAS D'ÁGUA ────────────────────────────────────────
O brasão da PMPE entra pela direita nas seções planas e o leão do CPPEM
pela esquerda nas alternadas. É o que dá profundidade ao preto chapado sem
virar papel de parede. A máscara vertical apaga a marca perto das emendas
para uma seção não "costurar" na outra. */
.section::before, .section--alt::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* marca-pmpe, e NÃO brasao-pmpe: o brasão oficial é colorido e, mesmo a 6% de
opacidade, jogava manchas de cor na direita da seção — a única coisa fora
da paleta na página inteira. O arquivo marca-* é o mesmo desenho remapeado
para a rampa de ouro, e some no preto como as outras texturas. */
/* Agora são dois concursos, então são duas marcas: a PMPE pela direita e a
PCPE pela esquerda, uma de cada lado da seção. A da PCPE entra menor porque
o desenho dela é mais fechado e, do mesmo tamanho, virava mancha. */
.section::before {
background:
url('public/marca-pmpe.webp') calc(100% + 190px) 50% / auto 580px no-repeat,
url('public/marca-pcpe.webp') -215px 50% / auto 500px no-repeat;
opacity: .06;
}
/* O leão é um desenho grande e de traço grosso: na mesma opacidade da marca
da PMPE ele dominava as seções mais vazias. Mais recuado e mais apagado,
volta a ser textura. */
.section--alt::before {
background: url('public/emblema-leao.webp') -290px 50% / auto 620px no-repeat;
opacity: .032;
}
/* fios de ouro nas duas emendas, num único pseudo */
.section--alt::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(90deg, transparent, var(--border-active), transparent) top / 100% 1px no-repeat,
linear-gradient(90deg, transparent, var(--border-active), transparent) bottom / 100% 1px no-repeat;
}
.section > .container { position: relative; z-index: 2; }
/* ─── TIPOGRAFIA DE SEÇÃO ──────────────────────────────── */
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-size: 11px; font-weight: 700; letter-spacing: 5px;
text-transform: uppercase; color: var(--gold);
}
.eyebrow::before, .eyebrow::after {
content: ''; width: 34px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }
.section__head { text-align: center; max-width: 920px; margin: 0 auto 56px; }
.section__title {
font-family: var(--font-title);
font-size: clamp(30px, 4.6vw, 52px);
font-weight: 800; line-height: 1.04; letter-spacing: 1px;
text-transform: uppercase; color: var(--text); margin: 16px 0 0;
}
.section__title::after {
content: ''; display: block; width: 78px; height: 2px; margin: 22px auto 0;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* na coluna do professor o título é de bloco, não de seção centralizada */
.section__title--left { font-size: clamp(26px, 3.4vw, 40px); }
.section__title--left::after { margin-inline: 0; }
.section__lead {
max-width: 740px; margin: 22px auto 0; color: var(--text-dim);
font-size: 17px; line-height: 1.7;
}
.section__lead strong { color: var(--gold-light); }
.gold {
background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ─── BRILHO (shine) ───────────────────────────────────── */
@keyframes shine-sweep {
0% { transform: translateX(-160%) skewX(-22deg); }
55% { transform: translateX(320%) skewX(-22deg); }
100% { transform: translateX(320%) skewX(-22deg); }
}
.shine { position: relative; overflow: hidden; }
.shine::after {
content: ''; position: absolute; top: -60%; left: 0;
width: 42%; height: 220%; z-index: 3; pointer-events: none;
background: linear-gradient(90deg,
transparent 0%, rgba(255,255,255,.10) 35%,
rgba(255,255,255,.55) 50%, rgba(255,255,255,.10) 65%, transparent 100%);
animation: shine-sweep 4.6s var(--ease) infinite;
}
.shine--slow::after { animation-duration: 6.5s; width: 34%; }
/* ─── BOTÕES ───────────────────────────────────────────── */
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
gap: 12px; height: 52px; padding: 0 30px;
font-size: 13.5px; font-weight: 700; letter-spacing: 2.4px;
text-transform: uppercase; white-space: nowrap; text-align: center;
border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
transition: transform var(--t), filter var(--t), background var(--t), color var(--t);
}
.btn > span { position: relative; z-index: 2; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled { cursor: progress; filter: grayscale(.35) brightness(.9); }
.btn--gold {
color: #0B0A08;
background: linear-gradient(168deg, var(--gold-pale) 0%, var(--gold-light) 22%, var(--gold) 55%, var(--gold-dark) 100%);
filter: drop-shadow(0 10px 24px rgba(175,146,86,.30));
}
.btn--gold::before {
content: ''; position: absolute; inset: 1px; z-index: 1;
background: linear-gradient(180deg, rgba(255,255,255,.42), transparent 45%);
clip-path: inherit; pointer-events: none;
}
.btn--gold:hover:not(:disabled) {
transform: translateY(-2px);
filter: drop-shadow(0 16px 32px rgba(175,146,86,.52)) brightness(1.06);
}
.btn--ghost {
color: var(--gold-light);
background: rgba(175,146,86,.05);
box-shadow: inset 0 0 0 1px var(--border-active);
}
.btn--ghost:hover {
color: #0B0A08;
background: linear-gradient(168deg, var(--gold-light), var(--gold-dark));
transform: translateY(-2px);
}
.btn--lg { height: 62px; padding: 0 44px; font-size: 15px; letter-spacing: 3px; }
.btn--block { width: 100%; }
/* =========================================================
NAVBAR
========================================================= */
.progress {
position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 320;
background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-pale));
box-shadow: 0 0 12px rgba(175,146,86,.7);
}
.header {
position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 300;
display: flex; align-items: center;
background: linear-gradient(180deg, rgba(10,10,11,.72), rgba(10,10,11,.30));
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
transition: height var(--t), background var(--t), box-shadow var(--t);
}
.header::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--border-active) 20%, var(--border-active) 80%, transparent);
opacity: .55; transition: opacity var(--t);
}
.header.is-stuck {
height: 66px; background: rgba(9,9,10,.94);
box-shadow: 0 14px 40px -18px rgba(0,0,0,.95);
}
.header.is-stuck::after { opacity: 1; }
.header__inner {
display: flex; align-items: center; gap: 26px;
width: min(100% - 36px, 1320px); margin-inline: auto;
}
/* A marca é o LEÃO + o nome em Oxanium. O PNG antigo da logo saiu do projeto:
o emblema é a marca atual, e um wordmark tipográfico ao lado dele resolve a
leitura do nome sem trazer o arquivo obsoleto de volta.
O unificados mascarava a caixa da marca com a própria logo para o brilho
varrer só o desenho. Aqui NÃO dá: `mask-image` com origem .webp não pinta
no Chrome (testado — a caixa fica vazia), e o emblema só existe em .webp.
Como o arquivo já vem com alfa, o desenho recortado é o próprio , e no
lugar do brilho entra um halo de ouro no hover. */
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand__leao {
position: relative; display: block; width: 42px;
transition: width var(--t);
}
.brand__leao img {
width: 100%;
filter: drop-shadow(0 2px 8px rgba(175,146,86,.28));
transition: filter var(--t);
}
.brand:hover .brand__leao img { filter: drop-shadow(0 2px 14px rgba(175,146,86,.65)); }
.header.is-stuck .brand__leao { width: 36px; }
.brand__nome {
display: flex; flex-direction: column; line-height: 1;
font-family: var(--font-title); font-size: 19px; font-weight: 800;
letter-spacing: 3px; text-transform: uppercase; color: var(--text);
}
.brand__nome i {
margin-top: 4px; font-family: var(--font-ui); font-style: normal;
font-size: 9.5px; font-weight: 700; letter-spacing: 2.6px; color: var(--gold);
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
position: relative; padding: 10px 14px;
font-size: 12.5px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--text-dim); transition: color var(--t);
}
.nav a::after {
content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
background: var(--gold); transform: scaleX(0); transform-origin: left;
transition: transform var(--t);
}
.nav a:hover { color: var(--gold-light); }
.nav a:hover::after { transform: scaleX(1); }
.nav-count {
display: inline-flex; align-items: center; gap: 9px;
height: 40px; padding: 0 16px; margin-left: 8px;
background: rgba(175,146,86,.07);
box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
font-size: 12px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
}
.nav-count b { font-family: var(--font-title); color: var(--gold-light); font-size: 14px; letter-spacing: 1px; }
.nav-count i {
width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
box-shadow: 0 0 0 4px rgba(175,146,86,.16); animation: pulse 2.2s infinite;
}
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 4px rgba(175,146,86,.16); }
50% { box-shadow: 0 0 0 8px rgba(175,146,86,.03); }
}
/* =========================================================
HERO
========================================================= */
.hero {
/* ─── A MARCAÇÃO DE TEMPO DA COLISÃO ───────────────────
Vale para o medalhão (.fusao--hero) E para a manchete (.op), que entram
juntos e batem no mesmo instante. Mora aqui, no ancestral comum, porque
são dois ramos diferentes da árvore: com uma cópia em cada um, bastava
ajustar um lado para os dois saírem de sincronia.
O script.js lê o --impacto daqui (por herança) para soltar os estilhaços.
A ordem da cena: o leão do CPPEM desce e assenta no centro (--centro +
--pousa = .95s), e é exatamente aí que PMPE e PCPE começam a vir dos dois
lados para bater nele. Os dois números têm que fechar em --vem, senão as
corporações chegam antes de existir centro para acertar. */
--centro: .35s; /* quando o CPPEM começa a descer */
--pousa: .6s; /* quanto tempo leva para assentar no meio */
--vem: .95s; /* quando as duas corporações começam a vir */
--bate: .55s; /* quanto tempo levam para chegar */
--impacto: 1.5s; /* --vem + --bate: o instante da batida */
position: relative; z-index: 2;
min-height: 100svh; display: flex; align-items: center;
padding: calc(var(--nav-h) + 48px) 0 72px;
overflow: hidden; text-align: center;
}
.hero__bg { position: absolute; inset: -6% 0 0; will-change: transform; }
.hero__bg i {
position: absolute; inset: 0; display: block;
background: url('public/bgatirador.webp') center 30% / cover no-repeat;
transform: scale(1.04);
opacity: .30;
filter: grayscale(.55) contrast(1.06) brightness(.86);
}
/* Véu vertical, e não lateral: a hero é centralizada, então escurecer só um
dos lados jogaria o texto para fora do eixo de leitura. */
.hero__veil {
position: absolute; inset: 0;
background:
radial-gradient(120% 90% at 50% 42%, rgba(10,10,11,.36) 0%, rgba(10,10,11,.86) 58%, rgba(10,10,11,.97) 100%),
linear-gradient(180deg, rgba(10,10,11,.92) 0%, transparent 24%, transparent 62%, var(--bg) 100%);
}
.hero__dawn {
position: absolute; left: 50%; bottom: -32%; transform: translateX(-50%);
width: 130%; height: 60%; pointer-events: none;
background: radial-gradient(ellipse at 50% 100%, rgba(175,146,86,.28), rgba(175,146,86,.06) 42%, transparent 70%);
}
.hero__grid {
position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
linear-gradient(rgba(175,146,86,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(175,146,86,.055) 1px, transparent 1px);
background-size: 74px 74px;
mask-image: radial-gradient(ellipse at 50% 45%, #000 8%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 8%, transparent 70%);
}
.hero__scan {
position: absolute; inset: 0; pointer-events: none; opacity: .2;
background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
.hero__inner { position: relative; z-index: 4; }
.tag {
display: inline-flex; align-items: center; gap: 11px;
height: 38px; padding: 0 18px; margin-bottom: 24px;
background: rgba(175,146,86,.08);
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px;
text-transform: uppercase; color: var(--gold-light);
}
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; }
.hero__title {
font-family: var(--font-title);
font-weight: 800; line-height: 1;
text-transform: uppercase; color: var(--text);
text-shadow: 0 8px 40px rgba(0,0,0,.75);
}
/* ─── AS DUAS OPERAÇÕES ────────────────────────────────────
São duas lives, e os dois nomes são a manchete. Eles não competem: entram
um de cada lado e travam no divisor central, no mesmo instante em que os
três brasões se fundem lá embaixo. É por isso que a marcação de tempo mora
na .hero — ela é o ancestral comum dos dois ramos, e com uma cópia em cada
um bastava ajustar um lado para tudo sair de sincronia.
Cada bloco é uma coluna de largura igual (flex: 1 1 0): assim os dois nomes
ficam simétricos em torno do divisor mesmo tendo contagens de letra
diferentes ("Praça PMPE" contra "Distintivo PCPE"). */
.ops {
display: flex; align-items: stretch; justify-content: center;
gap: clamp(12px, 2.6vw, 38px);
max-width: 1000px; margin-inline: auto;
}
.op {
display: flex; flex-direction: column; align-items: center; gap: 7px;
flex: 1 1 0; min-width: 0;
}
/* O easing é de freada, não de mola: chega rápido e trava seco, como o
medalhão. Um overshoot faria os nomes quicarem, e quicar é o oposto de
bater. */
.op--a { animation: meia-esq var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards; }
.op--b { animation: meia-dir var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards; }
@keyframes meia-esq {
0% { transform: translateX(-118%); opacity: 0; filter: blur(7px); }
55% { opacity: 1; }
100% { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes meia-dir {
0% { transform: translateX(118%); opacity: 0; filter: blur(7px); }
55% { opacity: 1; }
100% { transform: translateX(0); opacity: 1; filter: blur(0); }
}
/* "OPERAÇÃO" é a designação, não a manchete: entra pequena e muito espaçada
por cima do nome, como um código de operação.
O text-indent não é decorativo. O letter-spacing também sai DEPOIS do
último caractere, e essa sobra empurra o texto centralizado para a
esquerda; o indent de mesmo valor devolve a palavra ao eixo. */
.op__desig {
display: block; position: relative;
padding-top: clamp(12px, 1.8vw, 20px);
font-family: var(--font-ui);
font-size: clamp(10px, 1.15vw, 14px); font-weight: 700;
letter-spacing: clamp(5px, 1.1vw, 12px);
text-indent: clamp(5px, 1.1vw, 12px);
color: var(--gold); text-shadow: 0 0 24px rgba(175,146,86,.5);
}
.op__desig::before {
content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: clamp(34px, 5vw, 68px); height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.op__nome {
display: block;
font-size: clamp(25px, 4.3vw, 52px);
line-height: 1.02; letter-spacing: -.5px;
/* quebra "Distintivo PCPE" no espaço em vez de vazar da coluna */
text-wrap: balance;
/* ─── O BRILHO ───────────────────────────────────────────
São DUAS camadas de fundo recortadas no texto pelo background-clip: a de
baixo é a rampa de ouro parada, a de cima é a lâmina de luz que anda.
É por isso que não vira um retângulo. A varredura de `.shine` (a dos
botões) é um pseudo-elemento branco por cima da caixa — no botão, que tem
fundo sólido, ele lê como reflexo; sobre letras vazadas leria como um
quadrado claro passando por trás delas. Aqui a luz É o preenchimento do
texto: fora do desenho das letras não existe pixel nenhum para pintar.
A camada da luz é mais estreita que a caixa (55%) de propósito: assim a
posição em % se comporta de forma previsível (0% encosta à esquerda, 100%
à direita) e dá para mandá-la para fora dos dois lados com -80% e 180%. */
background-image:
linear-gradient(104deg,
transparent 34%,
rgba(255,253,246,.35) 43%,
rgba(255,253,246,.95) 50%,
rgba(255,253,246,.35) 57%,
transparent 66%),
linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
background-size: 55% 100%, 100% 100%;
background-position: -80% 0, 0 0;
background-repeat: no-repeat;
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* As duas animações não brigam: a entrada mexe em transform/opacity/filter (e
mora no .op, o pai), o brilho mexe só em background-position.
O brilho começa DEPOIS do impacto (+.5s) — antes disso os nomes ainda estão
viajando, e uma luz varrendo algo em movimento não lê como brilho, lê como
falha de render.
O atraso do segundo nome é 1.13s, e o número é calculado, não estimado: a
lâmina viaja 260% da caixa (de -80% a 180%) durante os 38% de varredura de
um ciclo de 5s, e está DENTRO do nome em 155% desse percurso (os 100% da
caixa mais os 55% da própria lâmina) — ou seja, 5 × .38 × 155/260 = 1.13s.
É quanto a luz leva para atravessar "PRAÇA PMPE", e é exatamente quando ela
deve entrar em "DISTINTIVO PCPE". Uma luz só, cruzando os dois nomes. */
.op--a .op__nome { animation: brilho-letras 5s var(--ease) calc(var(--impacto) + .5s) infinite; }
.op--b .op__nome { animation: brilho-letras 5s var(--ease) calc(var(--impacto) + 1.63s) infinite; }
/* A varredura ocupa pouco mais de um terço do ciclo; o resto é espera. Sem a
pausa os nomes ficariam piscando sem parar e a luz viraria ruído. */
@keyframes brilho-letras {
0% { background-position: -80% 0, 0 0; }
38% { background-position: 180% 0, 0 0; }
100% { background-position: 180% 0, 0 0; }
}
/* A data de cada operação vive DENTRO da manchete porque é o que separa uma da
outra: sem ela, dois nomes de mesmo peso lado a lado viram um borrão. */
.op__quando {
display: block; margin-top: 2px;
font-family: var(--font-ui);
font-size: clamp(11px, 1.25vw, 14px); font-weight: 700;
letter-spacing: 2.4px; text-transform: uppercase;
color: var(--text-mute);
opacity: 0;
animation: entra-apos-impacto .5s var(--ease) calc(var(--impacto) + .18s) forwards;
}
/* ─── O DIVISOR ────────────────────────────────────────────
O ponto onde os dois nomes se encontram. Acende no impacto, pelo mesmo
motivo das costuras do medalhão: antes da batida não há encontro nenhum
para marcar. */
.ops__x {
position: relative; flex: 0 0 auto; width: 1px; align-self: stretch;
background: linear-gradient(180deg, transparent, var(--border-active) 22%, var(--gold) 50%, var(--border-active) 78%, transparent);
opacity: 0;
animation: costura-acende .55s var(--ease) var(--impacto) forwards;
}
.ops__x i {
position: absolute; left: 50%; top: 50%;
width: 9px; height: 9px;
transform: translate(-50%,-50%) rotate(45deg);
background: linear-gradient(140deg, #FFFDF6, var(--gold-light));
box-shadow: 0 0 14px 2px rgba(240,220,176,.7);
animation: faisca 3.2s var(--ease) infinite;
}
/* O baque da manchete. Bem mais contido que o do medalhão: o peso do impacto é
daquela peça, e um texto grande dando um pulo do mesmo tamanho roubaria a
cena dela e ainda borraria as letras. */
.ops { animation: recuo-nome .42s var(--ease) var(--impacto) backwards; }
@keyframes recuo-nome {
0% { transform: scale(1); }
22% { transform: scale(1.028); }
55% { transform: scale(.994); }
100% { transform: scale(1); }
}
/* O respiro é maior do que era: o subtítulo saiu de baixo da manchete (onde
24px bastavam, porque os dois são texto) para baixo da placa do medalhão, e
colado ali ele lia como legenda da peça em vez de parágrafo da dobra. */
.hero__sub {
margin: 38px auto 0; max-width: 62ch;
font-size: 18.5px; line-height: 1.68; color: var(--text-dim);
}
.hero__sub strong { color: var(--gold-light); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }
/* ─── A CASCATA DEPOIS DA BATIDA ───────────────────────────
Tudo daqui para baixo entra SÓ quando a colisão termina. É o que faz a
entrada na página ter um foco: primeiro o nome da operação, depois os dois
brasões se chocando, e só então a explicação, o botão e os números.
Antes, o subtítulo ficava entre a manchete e o medalhão e entrava aos .32s,
junto com o resto da dobra — três blocos de texto disputando a atenção
enquanto a peça principal ainda nem tinha se montado.
Os atrasos saem todos do --impacto (que mora na .hero): mudar a marcação da
colisão reajusta a cascata inteira junto, sem nenhum número solto.
⚠️ O CTA principal só aparece em --impacto + .42s ≈ 1,9s. É a troca que essa
coreografia pede. Para encurtar, mexa nos quatro delays abaixo — ou baixe o
--impacto, que puxa tudo junto. */
.hero__sub,
.hero__cta,
.hero__nota,
.ficha {
opacity: 0;
animation: entra-apos-impacto .55s var(--ease) forwards;
}
.hero__sub { animation-delay: calc(var(--impacto) + .28s); }
.hero__cta { animation-delay: calc(var(--impacto) + .42s); }
.hero__nota { animation-delay: calc(var(--impacto) + .54s); }
.ficha { animation-delay: calc(var(--impacto) + .66s); }
.hero__nota {
display: block; margin-top: 18px;
font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--text-mute);
}
/* =========================================================
BRASÃO FUNDIDO — a peça central da hero
---------------------------------------------------------
Um medalhão hexagonal partido por uma costura diagonal de ouro. De um lado
o brasão da PMPE, do outro o leão do CPPEM: a corporação e quem prepara
para ela, dentro do mesmo aro.
Como o corte funciona: o .fusao__core tem clip-path hexagonal e clip-path
RECORTA TAMBÉM OS DESCENDENTES. Então cada .fusao__lado pode usar o seu
próprio clip-path diagonal sem precisar de máscara composta — o hexágono do
pai apara o que sobrar.
Os dois lados ocupam a LARGURA INTEIRA do núcleo, não metade. É o que faz o
desenho da esquerda mostrar a sua metade esquerda (e não a imagem inteira
espremida), porque a diagonal corta uma imagem já centralizada.
========================================================= */
.fusoes {
display: flex; align-items: flex-start; justify-content: center;
gap: clamp(18px, 4vw, 54px); margin-top: 44px;
}
.fusao-wrap { display: flex; flex-direction: column; align-items: center; }
.fusao {
position: relative;
width: clamp(168px, 22vw, 244px); aspect-ratio: 1;
/* Hexágono de bico curto: os vértices laterais ficam em 18%/82%, e não nos
25%/75% de um hexágono regular. A faixa de largura cheia sobe de metade
para dois terços da altura, e é ela que decide o tamanho máximo do
desenho — com o bico longo, o topo caía na parte que afunila e a própria
moldura decepava o "POLÍCIA" do escudo. */
--hex: polygon(50% 0%, 93.3% 18%, 93.3% 82%, 50% 100%, 6.7% 82%, 6.7% 18%);
/* O medalhão aparece em dois tamanhos (hero e CTA final) e a sigla de
fallback precisa encolher junto. `cqw` resolve sem media query:
1cqw = 1% da largura DESTE medalhão. */
container-type: inline-size;
}
/* Na hero o medalhão é a peça que segura a dobra: bem maior que no unificados,
onde dois deles dividiam a mesma linha. Aqui é um só. */
.fusao--hero { width: clamp(224px, 30vw, 340px); }
/* halo quente atrás do medalhão */
.fusao::before {
content: ''; position: absolute; inset: -16%; z-index: 0; border-radius: 50%;
background: radial-gradient(circle, var(--halo, rgba(175,146,86,.30)), transparent 68%);
animation: halo-breathe 5.4s var(--ease) infinite;
}
@keyframes halo-breathe {
0%,100% { opacity: .75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
/* aro de ouro */
.fusao__aro {
position: absolute; inset: 0; z-index: 1; clip-path: var(--hex);
background: linear-gradient(155deg, var(--gold-pale), var(--gold) 26%, var(--gold-deep) 62%, var(--gold-dark));
filter: drop-shadow(0 16px 38px rgba(0,0,0,.8));
}
/* núcleo — deixa o aro aparecer com 3px e recorta os dois lados */
.fusao__core {
position: absolute; inset: 3px; z-index: 2; overflow: hidden;
clip-path: var(--hex);
background:
radial-gradient(120% 90% at 50% 6%, rgba(175,146,86,.20), transparent 58%),
linear-gradient(180deg, #1B1B23, #0A0A0D);
}
.fusao__lado {
position: absolute; inset: 0;
display: grid; place-items: center;
transition: filter var(--t), transform var(--t);
}
/* A diagonal vai de 54% no topo a 46% na base: uma inclinação de sabre, não
um corte vertical de tabela. */
.fusao__lado--a { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.fusao__lado--b { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); }
/* Cada desenho é ANCORADO na sua cunha por left/right, não empurrado por
transform: em transform a porcentagem é da largura do PRÓPRIO elemento, e
como brasão e emblema têm proporções diferentes o mesmo valor daria
deslocamento diferente em cada um.
A caixa quadrada com object-fit:contain equaliza as proporções: sobra em
torno de 60% de cada desenho visível de um lado da costura — o bastante
para reconhecer, e ainda assim claramente cortado, que é o efeito de fusão
que se quer.
62% é o teto: a caixa vai de 19% a 81% da altura, e é o que cabe dentro da
faixa de largura cheia do hexágono (18%–82%). Subir daqui volta a encostar
no bico e a decepar o desenho.
Os 13% de recuo mantêm uma faixa do núcleo escuro e do aro de ouro à mostra
em volta do desenho. Sem ela o medalhão deixa de parecer um medalhão. */
.fusao__lado img {
position: absolute; top: 50%; transform: translateY(-50%);
width: 62%; height: 62%; object-fit: contain;
filter: drop-shadow(0 4px 14px rgba(0,0,0,.7));
}
.fusao__lado--a img { left: 13%; }
.fusao__lado--b img { right: 13%; }
/* Recurso de segurança: se a imagem não carregar, o lado mostra a sigla no
mesmo lugar e com o mesmo peso. O JS troca a classe no onerror do
(script.js, bloco "brasões ausentes"), então a página nunca exibe o ícone
de imagem quebrada. */
.fusao__sigla {
display: none;
font-family: var(--font-title); font-weight: 800;
font-size: 9cqw; letter-spacing: .5px; line-height: 1; text-align: center;
background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: 0 0 30px rgba(175,146,86,.35);
}
/* A sigla é ANCORADA na cunha por left/right pelo mesmo motivo das imagens.
O recorte é na meia-altura, onde o hexágono é mais largo e a costura passa
exatamente em 50% — é a única faixa em que cabe a sigla inteira. */
.fusao__lado--a .fusao__sigla,
.fusao__lado--b .fusao__sigla {
position: absolute; top: 50%; transform: translateY(-50%);
}
.fusao__lado--a .fusao__sigla { left: 7%; right: 49%; }
.fusao__lado--b .fusao__sigla { left: 49%; right: 7%; }
.fusao__lado.is-fallback img { display: none; }
.fusao__lado.is-fallback .fusao__sigla { display: block; }
/* ─── COSTURA ──────────────────────────────────────────────
O fio de luz que junta as duas metades. A inclinação bate com a diagonal
dos clip-paths: 8% de largura ao longo de 100% de altura num quadrado dá
~4.6°, e o topo cai à direita, então a rotação é positiva. */
.fusao__costura {
position: absolute; left: 50%; top: -6%; z-index: 3;
width: 2px; height: 112%;
transform: translateX(-50%) rotate(4.6deg);
background: linear-gradient(180deg, transparent, var(--gold-pale) 18%, #fff 50%, var(--gold-pale) 82%, transparent);
box-shadow: 0 0 16px 2px rgba(240,220,176,.6);
pointer-events: none;
}
/* faísca que respira no meio da costura. Miúda de propósito: grande, sobre
dois desenhos cheios, ela lia como borrão claro no meio da peça. */
.fusao__faisca {
position: absolute; left: 50%; top: 50%; z-index: 4;
width: 5cqw; height: 5cqw; /* escala com o medalhão, como a sigla */
transform: translate(-50%, -50%) rotate(45deg);
background: linear-gradient(140deg, #FFFDF6, var(--gold-light));
box-shadow: 0 0 14px 2px rgba(240,220,176,.75);
animation: faisca 3.2s var(--ease) infinite;
pointer-events: none;
}
@keyframes faisca {
0%,100% { transform: translate(-50%,-50%) rotate(45deg) scale(1); opacity: .9; }
50% { transform: translate(-50%,-50%) rotate(45deg) scale(1.3); opacity: 1; }
}
.fusao:hover .fusao__lado--a { transform: translateX(-4px); }
.fusao:hover .fusao__lado--b { transform: translateX(4px); }
/* =========================================================
MEDALHÃO DE TRÊS — PMPE · CPPEM · PCPE
---------------------------------------------------------
São duas lives e dois concursos, então a peça central da página passou de
duas cunhas para três: a PMPE numa ponta, a PCPE na outra, e o leão do
CPPEM no meio das duas. A leitura é literal — quem prepara está entre as
duas corporações, e não ao lado de uma.
Só a geometria muda aqui. Aro, núcleo, halo, siglas de emergência e placa
continuam sendo os do .fusao — este bloco é um recorte diferente da mesma
peça, não uma peça nova.
========================================================= */
.fusao--trio {
/* Mais largo que alto. Três desenhos dentro de um hexágono quadrado saem do
tamanho de selo: sobra altura e falta largura. Esticado, o hexágono vira
brasão de esquadrão — que é exatamente o que a peça quer dizer. */
aspect-ratio: 1.14;
width: clamp(200px, 26vw, 290px);
}
.fusao--hero.fusao--trio { width: clamp(278px, 40vw, 470px); }
/* As duas costuras caem em 33% e 67%, e cada uma tem a MESMA inclinação de
sabre do medalhão de dois: 8% de deriva do topo à base. Os números dos
clip-paths saem daí — 37→29 na primeira, 71→63 na segunda. */
.fusao--trio .fusao__lado--a { clip-path: polygon(0 0, 37% 0, 29% 100%, 0 100%); }
.fusao--trio .fusao__lado--m { clip-path: polygon(37% 0, 71% 0, 63% 100%, 29% 100%); }
.fusao--trio .fusao__lado--b { clip-path: polygon(71% 0, 100% 0, 100% 100%, 63% 100%); }
/* Cada desenho é ANCORADO no centro da sua cunha por left/right, pelo mesmo
motivo do medalhão de dois: em transform a porcentagem é da largura do
PRÓPRIO elemento, e brasão, emblema e leão têm proporções diferentes.
As laterais mostram o lado de FORA do seu desenho (a PMPE, a metade
esquerda; a PCPE, a direita) e o leão aparece inteiro no meio. É o que
mantém as três peças reconhecíveis mesmo cortadas — que é a diferença
entre fusão e picotagem. */
.fusao--trio .fusao__lado img { width: 39%; height: 60%; }
/* Os 7% de recuo não são estéticos: o vértice lateral do hexágono fica em
6.7%, e colado na borda o próprio aro decepava a primeira letra do brasão.
Um corte na costura lê como fusão; um corte na moldura lê como erro. */
.fusao--trio .fusao__lado--a img { left: 7%; right: auto; }
.fusao--trio .fusao__lado--b img { right: 7%; left: auto; }
/* O leão entra menor que os brasões porque o desenho dele preenche a caixa
inteira, enquanto os dois brasões têm moldura e ar em volta. No mesmo
tamanho de caixa ele apareceria com o dobro do peso visual e a peça
deixaria de ser um trio para virar um leão ladeado por dois adereços. */
.fusao--trio .fusao__lado--m img {
left: 50%; right: auto; width: 32%;
transform: translate(-50%, -50%);
}
/* siglas de emergência: três não cabem no tamanho de duas */
.fusao--trio .fusao__sigla { font-size: 6cqw; }
.fusao--trio .fusao__lado--a .fusao__sigla { left: 3%; right: 66%; }
.fusao--trio .fusao__lado--b .fusao__sigla { left: 66%; right: 3%; }
.fusao--trio .fusao__lado--m .fusao__sigla {
position: absolute; top: 50%; transform: translateY(-50%);
left: 33%; right: 33%; font-size: 4.6cqw;
}
/* menores que no medalhão de dois: aqui elas caem em cima dos desenhos, e no
tamanho cheio viravam dois borrões claros no meio da peça */
.fusao--trio .fusao__faisca { width: 3.6cqw; height: 3.6cqw; }
.fusao--trio .fusao__costura--a { left: 33%; }
.fusao--trio .fusao__costura--b { left: 67%; }
.fusao--trio .fusao__faisca--a { left: 33%; }
.fusao--trio .fusao__faisca--b { left: 67%; }
/* no hover as corporações se afastam e o centro respira: a fusão "abre" */
.fusao--trio:hover .fusao__lado--m { transform: scale(1.04); }
/* =========================================================
A COLISÃO — só o medalhão da hero
---------------------------------------------------------
No carregamento o medalhão aparece VAZIO: aro de ouro e núcleo escuro, sem
nada dentro. Aí as duas metades entram cada uma do seu lado, se chocam no
meio e param. É do choque que saem a costura, o clarão, a onda e os
estilhaços — nada disso existe antes.
A marcação de tempo (--vem, --bate, --impacto) mora na .hero, que é o
ancestral comum deste medalhão e da manchete — os dois batem no mesmo
instante. `--impacto` é `--vem + --bate` calculado à mão de propósito: usar
calc() aqui obrigaria a repetir a soma em cada delay e a conta ficaria
escondida em meia dúzia de lugares.
O medalhão do CTA final NÃO entra nisto (o seletor é .fusao--hero): ele
nasce montado, porque quem chega lá já viu a colisão lá em cima. */
/* As metades entram de FORA do medalhão. O overflow do núcleo as esconde até
cruzarem a borda, então elas não aparecem flutuando sobre a hero — surgem
já dentro do aro, como se o medalhão as tivesse capturado.
O easing é de freada, não de mola: chega rápido e trava seco. Um
cubic-bezier com overshoot faria as metades quicarem, e quicar é o oposto
de bater. */
.fusao--hero .fusao__lado--a {
animation: bate-esq var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards;
}
.fusao--hero .fusao__lado--b {
animation: bate-dir var(--bate) cubic-bezier(.2,.7,.25,1) var(--vem) backwards;
}
@keyframes bate-esq {
0% { transform: translateX(-155%); filter: blur(3px); opacity: .25; }
70% { opacity: 1; }
100% { transform: translateX(0); filter: blur(0); opacity: 1; }
}
@keyframes bate-dir {
0% { transform: translateX(155%); filter: blur(3px); opacity: .25; }
70% { opacity: 1; }
100% { transform: translateX(0); filter: blur(0); opacity: 1; }
}
/* ─── O CENTRO CHEGA PRIMEIRO ──────────────────────────────
O leão desce de cima e assenta ANTES das duas corporações: é nele que elas
vêm bater. Fazê-lo entrar pelo lado, como as outras duas cunhas, o
igualaria a elas — e o que a peça diz é que o CPPEM está no meio das duas,
não em fila com elas.
Ele pousa em --centro + --pousa = .95s, que é exatamente o --vem: no frame
em que o centro trava, os flancos partem. */
.fusao--hero.fusao--trio .fusao__lado--m {
animation: entra-centro var(--pousa) cubic-bezier(.2,.8,.25,1) var(--centro) backwards;
}
@keyframes entra-centro {
0% { transform: translateY(-135%) scale(1.22); filter: blur(6px); opacity: 0; }
62% { opacity: 1; }
100% { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
}
/* a costura só existe depois que as duas metades se encontram */
.fusao--hero .fusao__costura {
opacity: 0;
animation: costura-acende .55s var(--ease) var(--impacto) forwards;
}
@keyframes costura-acende {
0% { opacity: 0; transform: translateX(-50%) rotate(4.6deg) scaleY(.2); filter: brightness(3); }
35% { opacity: 1; transform: translateX(-50%) rotate(4.6deg) scaleY(1.1); }
100% { opacity: 1; transform: translateX(-50%) rotate(4.6deg) scaleY(1); filter: brightness(1); }
}
/* a faísca acende no impacto e só então assume o pulso perpétuo. São duas
animações porque `faisca` é infinita e não pode carregar a entrada: a última
da lista vence enquanto roda, e o `forwards` da primeira segura o opacity
no intervalo entre uma e outra. */
.fusao--hero .fusao__faisca {
opacity: 0;
animation:
faisca-acende .25s var(--ease) var(--impacto) forwards,
faisca 3.2s var(--ease) calc(var(--impacto) + .25s) infinite;
}
/* A segunda costura acende um respiro depois da primeira. São 60ms — não dá
para contar, mas é o que separa "duas batidas" de "um estalo duplo". */
.fusao--hero .fusao__costura--b { animation-delay: calc(var(--impacto) + .06s); }
.fusao--hero .fusao__faisca--b {
animation-delay: calc(var(--impacto) + .06s), calc(var(--impacto) + .31s);
}
@keyframes faisca-acende {
0% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(3.4); }
100% { opacity: .9; transform: translate(-50%,-50%) rotate(45deg) scale(1); }
}
/* recuo do medalhão inteiro: um golpe curto, sem balanço.
Fica no .fusao (e não no núcleo) para o aro e o halo sacudirem junto — se
só o miolo tremesse, a moldura pareceria solta. */
.fusao--hero { animation: recuo .42s var(--ease) var(--impacto) backwards; }
@keyframes recuo {
0% { transform: scale(1); }
18% { transform: scale(1.055); }
42% { transform: scale(.984) translateX(2px); }
68% { transform: scale(1.012) translateX(-1px); }
100% { transform: scale(1) translateX(0); }
}
/* ─── CLARÃO ───────────────────────────────────────────────
O estouro de luz do encontro. Fica FORA do núcleo, para não ser recortado
pelo hexágono: o clarão tem que vazar por cima da moldura. */
.fusao__clarao {
position: absolute; left: 50%; top: 50%; z-index: 5;
width: 62%; height: 62%; border-radius: 50%;
transform: translate(-50%,-50%) scale(0); opacity: 0;
background: radial-gradient(circle, #FFFDF6 0%, var(--gold-pale) 26%, rgba(196,112,63,.5) 52%, transparent 72%);
mix-blend-mode: screen; pointer-events: none;
animation: clarao .5s ease-out var(--impacto) backwards;
}
@keyframes clarao {
0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
12% { opacity: .95; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); }
}
/* ─── ONDA DE CHOQUE ───────────────────────────────────────
Um anel de ouro que sai do centro e passa por cima do aro. É o que dá
escala ao impacto: sem ele o choque acontece só dentro do medalhão e some. */
.fusao__onda {
position: absolute; left: 50%; top: 50%; z-index: 5;
width: 100%; height: 100%; border-radius: 50%;
border: 2px solid var(--gold-pale);
transform: translate(-50%,-50%) scale(.2); opacity: 0;
pointer-events: none;
animation: onda .85s cubic-bezier(.15,.75,.3,1) var(--impacto) backwards;
}
@keyframes onda {
0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); border-width: 6px; }
10% { opacity: .85; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.85); border-width: 1px; }
}
/* ─── ESTILHAÇOS ───────────────────────────────────────────
Os cacos que saltam do choque. O script.js cria os e escreve o ângulo e
a distância de cada um em variáveis CSS; a animação toda mora aqui, e mexe
só em transform e opacity. Sem JS o medalhão continua batendo — só não
solta faísca, e ninguém sente falta do que nunca viu. */
/* container-type torna esta camada a régua do `cqw` usado no --dist dos cacos:
ela é `inset: 0` dentro do medalhão, então 1cqw = 1% da largura do medalhão.
Sem isso a distância cairia na largura do próprio caco — ver o comentário no
script.js. */
.fusao__estilhacos {
position: absolute; inset: 0; z-index: 6; pointer-events: none;
container-type: inline-size;
}
/* --ox é a costura de onde ESTE caco saiu. Com duas costuras, cacos todos
nascendo em 50% sairiam do vão entre elas — o único ponto do medalhão onde
nada bateu. O script.js reparte os cacos entre as duas. */
.estilhaco {
position: absolute; left: var(--ox, 50%); top: 50%;
width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
background: radial-gradient(circle at 38% 32%, #FFFDF6, var(--cor, var(--gold-light)) 55%, transparent 76%);
box-shadow: 0 0 10px 2px var(--cor, var(--gold-light));
opacity: 0;
animation: estilhaco var(--dur, .9s) cubic-bezier(.1,.7,.3,1) var(--atraso, 0s) backwards;
}
/* A rotação vem primeiro e o deslocamento depois: assim o `translateX` anda no
eixo já girado, e um ângulo por caco basta para espalhar em círculo. */
@keyframes estilhaco {
0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--ang)) translateX(0); }
12% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--ang)) translateX(var(--dist)) scale(.3); }
}
/* a placa só entra depois da batida — antes dela, não há o que nomear.
Keyframe próprio, e não o `rise` da hero: aquele só declara o passo final, e
um `backwards` sobre ele congelaria a placa no estado JÁ VISÍVEL durante o
atraso, que é exatamente o que não se quer aqui. */
.fusao--hero ~ .fusao__placa {
opacity: 0;
animation: entra-apos-impacto .5s var(--ease) calc(var(--impacto) + .22s) forwards;
}
@keyframes entra-apos-impacto {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* ─── PLACA SOB O MEDALHÃO ─────────────────────────────── */
.fusao__placa {
margin-top: 18px; padding: 12px 22px 11px; text-align: center;
background: linear-gradient(180deg, rgba(24,24,30,.85), rgba(12,12,15,.9));
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
transition: box-shadow var(--t);
}
.fusao-wrap:hover .fusao__placa { box-shadow: inset 0 0 0 1px var(--border-active); }
.fusao__placa b {
display: block; font-family: var(--font-title); font-size: 14px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light);
}
.fusao__placa span {
display: block; margin-top: 3px;
font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--text-mute);
}
/* ─── FICHA (números da hero) ──────────────────────────── */
.ficha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 52px; }
.ficha__item {
position: relative; padding: 18px 16px 16px; text-align: center;
background: linear-gradient(180deg, rgba(24,24,30,.78), rgba(12,12,15,.86));
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.ficha__item:hover {
transform: translateY(-4px);
box-shadow: inset 0 0 0 1px var(--border-active);
background: linear-gradient(180deg, rgba(31,31,40,.9), rgba(14,14,18,.92));
}
.ficha__item b {
display: block; font-family: var(--font-title);
font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; line-height: 1;
letter-spacing: .5px; font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ficha__item span {
display: block; margin-top: 8px;
font-size: 10px; font-weight: 700; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--text-mute); line-height: 1.5;
}
.scroller {
position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
width: 22px; height: 36px; border: 1px solid var(--border-active); border-radius: 12px; z-index: 4;
}
.scroller i {
position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
background: var(--gold); transform: translateX(-50%); animation: scrolldot 1.9s infinite;
}
@keyframes scrolldot { 0%{opacity:0;top:7px} 40%{opacity:1} 80%{opacity:0;top:20px} 100%{opacity:0} }
/* =========================================================
FAIXA CORRIDA
========================================================= */
.strip {
position: relative; z-index: 2; overflow: hidden;
background: linear-gradient(180deg, #0e0e11, #131317);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 15px 0;
}
.strip__track { display: flex; gap: 46px; width: max-content; animation: marquee 38s linear infinite; }
.strip__track span {
display: inline-flex; align-items: center; gap: 46px;
font-family: var(--font-title); font-size: 12.5px; font-weight: 700;
letter-spacing: 5px; text-transform: uppercase; color: var(--gold-dark);
white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* =========================================================
INSCRIÇÃO — painel de data + formulário
---------------------------------------------------------
É o bloco que o unificados não tem: aquela é uma página de venda direta,
sem captura. As duas colunas dividem a mesma moldura chanfrada, com um fio
de ouro entre elas, para lerem como uma peça só e não como dois cards.
========================================================= */
.inscricao {
display: grid; grid-template-columns: .85fr 1.15fr;
max-width: 1000px; margin-inline: auto;
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
/* ─── painel esquerdo ─── */
.painel {
position: relative; padding: 40px 34px;
background:
radial-gradient(420px 260px at 20% 0%, rgba(196,112,63,.12), transparent 70%),
linear-gradient(180deg, rgba(24,24,30,.9), rgba(12,12,15,.92));
border-right: 1px solid var(--border);
}
/* ─── as duas datas ───────────────────────────────────────
Cada live é um cartão com a sua data e o seu nome. O script.js marca a
próxima que ainda não passou com .is-proxima e aponta a contagem para ela —
depois da noite do dia 8, a PCPE assume sozinha, sem ninguém mexer no
arquivo. */
.lives { display: grid; gap: 12px; }
.live {
display: flex; align-items: center; gap: 16px; padding: 12px 14px;
background: linear-gradient(180deg, rgba(10,10,11,.5), rgba(10,10,11,.25));
box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
transition: box-shadow var(--t), background var(--t);
}
.live.is-proxima {
box-shadow: inset 0 0 0 1px var(--border-active);
background: linear-gradient(180deg, rgba(175,146,86,.12), rgba(10,10,11,.3));
}
/* a que já passou não some — some o destaque dela */
.live.is-passada { opacity: .42; }
.live__quando {
flex: 0 0 auto; width: 68px; text-align: center; overflow: hidden;
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.live__dia {
display: block; padding: 5px 0 1px;
font-family: var(--font-title); font-size: 32px; font-weight: 800; line-height: 1;
background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.live__mes {
display: block; padding: 3px 0 4px;
background: linear-gradient(168deg, var(--gold-light), var(--gold-dark));
font-size: 10px; font-weight: 700; letter-spacing: 3px; color: #0B0A08;
}
/* A PCPE é a corporação civil: o azul da paleta de ../unificados separa as
duas noites de relance, antes de o olho chegar no nome. */
.live__quando--civil { box-shadow: inset 0 0 0 1px rgba(91,140,184,.55); }
.live__quando--civil .live__mes { background: linear-gradient(168deg, #7FA6C9, #3F6285); color: #06090C; }
.live__meta { min-width: 0; }
.live__meta b {
display: block; font-family: var(--font-title); font-size: 14px; font-weight: 800;
letter-spacing: .6px; text-transform: uppercase; color: var(--text);
}
.live__meta span {
display: block; margin-top: 4px;
font-size: 12.5px; letter-spacing: 1px; color: var(--text-mute);
}
.painel__lista { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.painel__lista li {
position: relative; padding-left: 34px;
font-size: 15px; line-height: 1.55; color: var(--text-dim);
}
.painel__lista li::before {
content: '✓'; position: absolute; left: 0; top: 1px;
width: 22px; height: 22px; display: grid; place-items: center;
font-family: var(--font-title); font-size: 12px; font-weight: 800; color: var(--gold);
background: rgba(175,146,86,.14);
box-shadow: inset 0 0 0 1px rgba(175,146,86,.4);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* ─── contagem regressiva ─── */
/* O rótulo existe porque a contagem agora aponta para uma das duas lives, e
sem dizer qual ela vira um número solto. */
.cdown__rotulo {
display: block; margin-top: 26px;
font-size: 10.5px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: var(--text-mute);
}
.cdown__rotulo b { color: var(--gold-light); font-weight: 700; }
.cdown {
display: flex; align-items: center; justify-content: space-between;
gap: clamp(4px, 1.6vw, 14px); margin-top: 10px; padding: 18px 14px;
background: linear-gradient(180deg, rgba(10,10,11,.7), rgba(10,10,11,.4));
box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.cdown__unit { flex: 1; text-align: center; }
.cdown__unit b {
display: block; font-family: var(--font-title);
font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1;
letter-spacing: 1px; font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: 0 0 44px rgba(175,146,86,.22);
}
.cdown__unit span {
display: block; margin-top: 7px;
font-size: 9.5px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: var(--text-mute);
}
.cdown__sep { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; }
.cdown__sep::before, .cdown__sep::after {
content: ''; width: 4px; height: 4px; background: var(--gold-deep);
}
.cdown.is-over .cdown__unit b {
background: linear-gradient(180deg, #8f8f8f, #4b4b4b);
-webkit-background-clip: text; background-clip: text;
}
/* ─── formulário ─── */
.cadastro { padding: 40px 38px; }
.cadastro__eyebrow {
display: inline-block;
font-size: 10.5px; font-weight: 700; letter-spacing: 4px;
text-transform: uppercase; color: var(--gold);
}
.cadastro__titulo {
margin: 10px 0 26px;
font-family: var(--font-title); font-size: clamp(22px, 2.6vw, 28px); font-weight: 800;
letter-spacing: 1.4px; text-transform: uppercase; color: var(--text);
}
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label {
font-size: 10.5px; font-weight: 700; letter-spacing: 2.6px;
text-transform: uppercase; color: var(--text-mute);
}
/* Chanfro no input também: um retângulo de cantos retos no meio de uma página
inteira de cantos cortados denuncia o componente emprestado. */
.field input {
height: 54px; padding: 0 18px;
font-family: var(--font-ui); font-size: 16px; font-weight: 600;
color: var(--text); background: rgba(10,10,11,.6);
border: 0; box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
transition: box-shadow var(--t), background var(--t);
}
.field input::placeholder { color: #6C6A62; font-weight: 500; }
.field input:focus {
outline: none; background: rgba(10,10,11,.85);
box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(175,146,86,.14);
}
.field input.is-invalid { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px rgba(194,91,82,.14); }
.error {
display: block; min-height: 1em;
font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: #D08F88;
}
.note {
text-align: center; font-size: 12px; font-weight: 600;
letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-mute);
}
.success {
padding: 14px 16px; text-align: center;
font-size: 14.5px; font-weight: 600; color: var(--gold-pale);
background: rgba(175,146,86,.12);
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
/* ─── ESCOLHA DA LIVE ──────────────────────────────────────
Botões de rádio de verdade por baixo (teclado, leitor de tela e o `required`
do navegador continuam funcionando) e cartões por cima. O input fica com
opacity 0 em cima do cartão em vez de display:none: escondido de verdade
ele sai da ordem de foco, e a escolha viraria um campo que só o mouse
alcança.
Duas colunas, uma para cada live, e nada mais: a escolha é sempre de uma
só. Uma terceira opção ("as duas") terminaria numa tela com dois links de
grupo para o inscrito decidir — e o fim do formulário é justamente onde
não deve sobrar decisão nenhuma. */
/* display:block, e não o grid do .field: