Baralho de cards que se empilham sobre foto pinada

Etapas de um método apresentadas como cards de vidro que sobem com a página e grudam no topo em alturas escalonadas — cada um deixando aparecer uma faixa de 14px do anterior. Conforme é coberto, o card de baixo encolhe e apaga, o que dá profundidade real à pilha. Tudo isso sobre uma foto que fica pinada por exatamente uma tela.

É o componente mais elaborado da biblioteca. Duas camadas de sticky operando ao mesmo tempo.

Quando usar

• Método, processo ou jornada com 4 a 6 etapas que precisam ser lidas em ordem.
• Quando a ordem importa de verdade: o formato força a sequência, o visitante não pula.
• Página que já ganhou a atenção — é uma seção que custa altura de rolagem.

Quando não usar

• Menos de 4 etapas: não há pilha suficiente para o efeito aparecer.
• Mais de 6: a seção fica alta demais e o visitante desiste no meio.
• Itens sem ordem (serviços, benefícios). Aqui a forma promete sequência — se não houver, ela mente.
• Quando a página inteira já tem outro efeito preso ao scroll. Dois competem.

Padrão editorial

Comprimento parecido é estrutural. O --deck-peek é fixo em 14px: se um card tem o dobro da altura do outro, a faixa que sobra fica desproporcional e a pilha desanda.

Especificação da imagem

• Paisagem, mínimo 2400×1600. Ela ocupa uma tela cheia.
• Até 400 KB.
• Composição com o assunto à direita: os cards ficam à esquerda, e o gradiente de 105° escurece esse lado.
• Foto de horizonte, mar, montanha, estrada — algo que sustente a metáfora do lead. Interior de escritório não funciona pinado por uma tela inteira.

Como usar

<link rel="stylesheet" href="componentes/listas/baralho-sticky/estilo.css">
<script src="componentes/listas/baralho-sticky/script.js"></script>

Cada card declara sua posição na pilha por variável, a partir de 0 e em sequência:

<article class="glass deck-card" style="--deck-i:0;--deck-z:1">
<article class="glass deck-card" style="--deck-i:1;--deck-z:2">

Variações

• Sem foto de fundo — apague .deck-stage. Os cards empilham sobre o fundo da seção. Perde muito, mas funciona.
• Cards à direita — margin-left:auto na .deck-list e inverta o gradiente diagonal do .deck-bg::after.

Gotchas

• margin-bottom:calc(-100vh) no palco não é gambiarra. O palco é sticky com height:100vh; o margin negativo puxa o .wrap de volta para cima, sobrepondo os dois. Sem isso a seção teria uma tela vazia antes dos cards.
• O overflow:hidden mora no .deck-stage, nunca na seção. Na seção ele quebraria o position:sticky dos cards, que ficam fora do palco. Esse é o erro mais fácil de cometer aqui.
• O top de cada card é --deck-top + --deck-i * --deck-peek. Numeração fora de sequência ou repetida quebra o escalonamento — dois cards com o mesmo --deck-i grudam na mesma altura.
• --deck-z precisa crescer junto com --deck-i. É o que faz o card novo cobrir os antigos. Invertido, a pilha aparece ao contrário.
• O script não empilha nada — o empilhamento é CSS puro. Ele só mede o quanto cada card já foi coberto e escreve --deck-p. Se o script falhar, a pilha continua funcionando, só perde a profundidade.
• A conta de --deck-p usa offsetHeight, não getBoundingClientRect().height. O card está sob transform:scale, e o rect já vem escalado — usar o rect realimentaria o próprio efeito.
• O título da seção leva max-width:none. O 22ch padrão do h2.sec-title quebraria a linha centralizada em três pedaços.
• No mobile tudo é desligado. Cards viram lista comum e o palco vira bloco de proporção fixa no fluxo. Empilhar em tela pequena esconderia o conteúdo em vez de organizá-lo.

Histórico

Normalizações aplicadas na extração: prefixo único deck- (a origem usava jrn- e j- misturados); variáveis genéricas --i/--z/--p → --deck-i/--deck-z/--deck-p, que colidiriam com qualquer outro componente que usasse nomes curtos; h4 → .deck-title; o vidro virou a primitiva .glass, com --glass-bg local para o preto translúcido; id → [data-deck]; o script passou a assinar LIB.onScroll em vez de registrar listener próprio.

No catálogo original esta seção aparecia duas vezes — como listas/trilha-vertical e como listas/baralho-empilhado. São a mesma coisa: o comentário do CSS chamava de "baralho que se recolhe" e o do HTML, de "trilha vertical". Ficou um componente só.