Cartões 3D em tambor

Seis cartões num tambor que gira em torno do eixo horizontal. O da frente fica de pé, levemente inclinado, com o nome, o chip e a numeração; os vizinhos deitam, recuam e escurecem acima e abaixo dele, e os de trás viram uma fresta — o maço inteiro lido de lado. Ao lado, o contador (02 — 06), o nome do acabamento e uma linha de material. Arrastar, apertar as setas, clicar num ponto ou num cartão vizinho gira o tambor; tocar no cartão da frente o vira e mostra o verso.

O problema que ela resolve: cartão é objeto, e foto de cartão numa grade o transforma em miniatura de catálogo. Numa campanha institucional — o lançamento de um cartão, os níveis de um relacionamento, uma linha com acabamentos — a pessoa precisa pegar o produto. O tambor dá a ela o gesto: escolher girando, e virar para ver o outro lado.

Os cartões são desenhados em CSS, com os tokens do tema. Nenhuma imagem, nenhuma marca de bandeira, e trocar o tema troca os acabamentos.

Quando usar

• Lançamento de cartão ou de produto que tem "cara de objeto" e variantes de acabamento.
• Níveis de relacionamento (Private, Prime, Select) quando cada nível tem um cartão.
• Três a oito variantes. Com duas, é um antes-e-depois; com mais de oito, a coluna de pontos fica longa e ninguém percorre tudo.

Quando não usar

• Comparar condições (anuidade, limite, benefícios). A pessoa precisa ver as colunas lado a lado — conversao/planos-honorarios ou listas/lista-honorarios.
• Casos, fotos, portfólio — midia/carrossel-anel-3d, que é o mesmo gesto para imagens.
• Página que já tem outra peça 3D na mesma rolagem. Duas brigam pelo olho.

Padrão editorial

O que mantém a peça: o nome é do acabamento, não do plano. Se cada cartão for um nível com preço, a pessoa quer comparar, e o tambor esconde cinco de seis. Aí o nível vai numa tabela e o tambor mostra só a família.

O cartão é fictício de propósito. Número mascarado (•••• 6769), titular de exemplo e, no verso, a frase "Cartão de demonstração". Não ponha número completo, bandeira real nem logotipo de emissor — o primeiro confunde, os outros dois têm dono.

Especificação dos assets

Nenhum. Cartão, chip, brilho e textura escovada são CSS.

Como usar

<link rel="stylesheet" href="componentes/midia/cartoes-3d/estilo.css">
<script src="componentes/midia/cartoes-3d/script.js"></script>

Cada cartão declara a casa, o nome e a descrição, e veste um acabamento:

<div class="crt-cartao crt-acab--marfim" style="--i:1" data-nome="Marfim" data-desc="Cerâmica clara, toque acetinado" role="group" aria-roledescription="slide" aria-label="2 de 6: Marfim">

Acabamentos

Acabamento novo: uma regra .crt-acab--nome .crt-face{--crt-fundo:…;--crt-tinta:…}. Só tokens.

Ganchos

Parafusos (na seção)

Variações

• Por rolagem (experimental) — data-crt-rolagem na <section>. A seção fica alta, a grade gruda sob o menu e a rolagem da página gira do primeiro ao último, sem ciclo. As setas e os pontos rolam a página até o cartão. Só acima de 860px e sem movimento reduzido; fora disso, o modo de sempre.
• Três a oito cartões — acrescente ou tire .crt-cartao, renumere --i e o aria-label. A geometria não depende de n.
• Tambor mais reto — --crt-inclina:0deg;--crt-guinada:0deg. Mais sóbrio, perde o gesto de objeto.
• Sobre papel — .sec-paper no lugar de .sec-dark. Os cartões são ilha e não mudam.

Gotchas

• Cada cartão tem a própria perspectiva, e o tambor é plano. Com todos num contexto 3D só, dois vizinhos se atravessavam no meio do giro — a borda de um cortava a face do outro por uns vinte quadros. perspective() dentro do transform de cada cartão dá a mesma projeção (todos partem do mesmo centro) e deixa o z-index decidir quem cobre quem.
• Nada de opacity, filter ou overflow no .crt-cartao. São grouping properties: achatam o 3D de dentro, e o cartão para de virar. O escurecer dos vizinhos é um véu na face (::after), e opaco — face translúcida deixava ver o cartão de trás através do da frente.
• O data-rv mora no .crt-palco-slot, nunca no palco ou no cartão: o [data-rv].in{transform:none} do core apagaria o transform (CLAUDE.md §5).
• A seção corta com overflow:clip, não hidden. hidden faria dela um contêiner de rolagem, e a grade da variação por rolagem deixaria de grudar na janela.
• No dedo, o arrasto é horizontal. O vertical é da página (touch-action:pan-y); roubá-lo prenderia quem só está rolando pelo celular. No mouse, vale o eixo que a mão escolher nos primeiros 6px.
• O ciclo pega o caminho curto. Do último para o primeiro é um passo para a frente, não cinco para trás. O salto da dobra acontece atrás, com o cartão invisível (.is-longe).
• Sem script, o primeiro cartão aparece de frente com dois abaixo, e os controles e a dica não aparecem.

Movimento reduzido / toque

Nada anda sozinho — não há giro automático, e por isso não há .btn-play. Com reduce, o giro que a pessoa pede continua (é gesto dela), mas o encaixe resolve em poucos quadros e o arrasto não arremessa ao soltar; a variação por rolagem não liga e a seção fica no modo de sempre. O virar mantém a transição curta do --crt-dur, porque é resposta a um toque.

Nada reage ao cursor (CLAUDE.md §6). O brilho é uma faixa fixa na face, que passa pela luz porque o cartão gira — não porque o mouse passou.

No celular o rótulo desce para baixo do tambor, junto dos controles: em cima ele ficaria uma tela acima do cartão que nomeia.

Histórico

O que veio da referência: o tambor de cartões no eixo horizontal, o da frente inclinado, os vizinhos achatados em perspectiva, o contador com nome e descrição do acabamento, a dica de gesto. O que mudou: cartões em CSS com os tokens (sem WebGL, sem imagem, sem marca); a roda do mouse não é sequestrada — a rolagem só gira o tambor na variação, com a grade grudada; arrasto horizontal no dedo; o verso ao tocar; pontos e setas como botões, região viva e teclado; nada segue o cursor. O Cardwall, do mesmo catálogo, ficou de fora por mover os cartões com o cursor. Registro consolidado em projetos/referencias-externas.md.