/* ==========================================================================
   CARTÕES 3D — prefixo crt-
   Seis cartões num tambor que gira em torno do eixo horizontal. O da frente
   de pé; os vizinhos inclinados, recuando e escurecendo, como as câmaras de
   um tambor de revólver visto de lado. Tocar no da frente o vira.

   Tokens usados:
     --display --sans         tipografia
     --ease                   curva do giro e do virar
     --dark --dark-2          acabamentos escuros, sombra e véu de fundo
     --light --light-2        acabamentos claros e tinta dos escuros
     --accent --accent-2      acabamento "da casa", filete e chip
     --fg --fg-2 --fg-muted   rótulo e contador
     --rule --rule-2          pontos
     --accent-ink             ponto ativo e contador sobre o escopo
     --radius-pill            pontos
     --nav-h                  topo do modo por rolagem

   TRÊS DECISÕES QUE EXPLICAM O ARQUIVO:

   1. A POSE É UMA CONTA SOBRE UM NÚMERO. Cada cartão recebe do script
      --crt-d, a distância (com fração) até a frente: 0 é o da frente, 1 o
      de baixo, -1 o de cima. O CSS faz o resto: gira --crt-passo por casa em
      torno do eixo do tambor. Sem script, --crt-d cai no --i do markup e o
      tambor aparece parado no primeiro cartão.

   2. NENHUM GRUPO NO CAMINHO DO 3D. opacity, filter e overflow num elemento
      preserve-3d o achatam (grouping property) — e o cartão precisa de 3D
      por dentro para virar. Por isso o escurecer dos vizinhos mora nas
      FACES, que são folhas, e o recorte mora na seção, fora da perspectiva.

   3. CADA CARTÃO TEM A SUA PERSPECTIVA, e o tambor é plano. Num contexto
      3D só, dois cartões vizinhos se ATRAVESSAM no meio do giro — as bordas
      de um cortam a face do outro por uns vinte quadros. Com perspective()
      dentro do transform de cada um (todos partem do mesmo centro, então a
      projeção é a mesma) e o tambor achatado, quem decide quem cobre quem é
      o z-index, que o script escreve pela distância até a frente. A troca
      acontece no meio do caminho, num quadro só.

   4. O CARTÃO É UMA ILHA, NÃO UM ESCOPO. O acabamento escolhe fundo e tinta
      com --dark/--light direto, como texto sobre foto. Ele não lê --fg,
      porque um cartão marfim numa dobra escura continua marfim.
   ========================================================================== */

.crt{
  --crt-w:clamp(260px,30vw,420px);          /* largura do cartão */
  --crt-h:calc(var(--crt-w) / 1.586);       /* proporção ISO 7810 */
  --crt-dy:calc(var(--crt-h) * .58);       /* o vizinho: quanto sobe ou desce */
  --crt-dy2:calc(var(--crt-h) * .3);        /* dali em diante, por casa */
  --crt-dz:calc(var(--crt-h) * .55);        /* quanto recua por casa */
  --crt-a:50deg;                            /* o vizinho: quanto deita */
  --crt-a2:20deg;                           /* dali em diante, por casa */
  --crt-persp:1300px;                       /* distância do olho */
  --crt-inclina:-7deg;                      /* o tambor todo, no plano */
  --crt-guinada:-16deg;                     /* o tambor todo, de lado */
  --crt-dur:.8s;                            /* o virar */
  /* O tambor sangra para cima e para baixo; quem corta é a seção. clip e
     não hidden: hidden faria da seção um contêiner de rolagem, e o modo por
     rolagem precisa do sticky preso à janela. */
  overflow:clip;
}

.crt-grade{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}

/* ---------------------------------------------------------------- texto */
.crt-texto{display:grid;justify-items:start;gap:18px}
.crt-texto .sec-lead{max-inline-size:40ch}
.crt-cta{margin-top:6px}
.crt-cta svg{flex:none}

.crt-rotulo{
  margin-top:clamp(20px,4vh,40px);padding-top:18px;
  border-top:1px solid var(--rule);min-inline-size:min(100%,320px);
}
.crt-conta{
  font-size:11px;letter-spacing:.16em;color:var(--accent-ink,var(--accent));
  font-variant-numeric:tabular-nums;
}
.crt-nome{
  margin-top:8px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,1.8vw,26px);letter-spacing:.04em;color:var(--fg);
}
.crt-desc{margin-top:4px;font-size:14px;color:var(--fg-2)}
.crt-dica{font-size:12.5px;line-height:1.5;color:var(--fg-muted);max-inline-size:36ch}
.crt-dica[hidden]{display:none}

/* ---------------------------------------------------------------- palco */
/* O data-rv mora no slot, e não no palco: o filtro do reveal é grouping
   property e achataria a perspectiva se estivesse no mesmo nó. */
.crt-palco-slot{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(12px,2vw,28px);
}
.crt-palco{
  position:relative;height:calc(var(--crt-h) * 2.1);
  touch-action:pan-y;                       /* a página ainda rola no dedo */
  cursor:grab;user-select:none;-webkit-user-select:none;
  border-radius:24px;outline:none;
}
.crt-palco:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.crt-palco.is-arrastando{cursor:grabbing}

.crt-tambor{position:absolute;inset:0}

.crt-cartao{
  --crt-d:var(--i,0);
  --crt-p:var(--i,0);
  /* A curva por trechos: a primeira casa anda --crt-dy e deita --crt-a; as
     seguintes, só --crt-dy2 e --crt-a2. É o que junta os de trás num maço
     em vez de espalhá-los pela tela. */
  --crt-d1:clamp(-1,var(--crt-d),1);
  --crt-dr:calc(var(--crt-d) - var(--crt-d1));
  position:absolute;left:calc(50% - var(--crt-w) / 2);top:calc(50% - var(--crt-h) / 2);
  width:var(--crt-w);height:var(--crt-h);
  z-index:calc(10 - var(--i,0));           /* o script reescreve pela distância */
  transform-style:preserve-3d;
  transform:
    perspective(var(--crt-persp))
    rotateZ(var(--crt-inclina))
    rotateY(var(--crt-guinada))
    translateY(calc(var(--crt-d1) * var(--crt-dy) + var(--crt-dr) * var(--crt-dy2)))
    translateZ(calc(var(--crt-p) * var(--crt-dz) * -1))
    rotateX(calc((var(--crt-d1) * var(--crt-a) + var(--crt-dr) * var(--crt-a2)) * -1));
}
/* Sem script o tambor não dobra a volta: do quarto em diante os cartões
   ficariam de costas, atrás do da frente. Com script, quem some é o que
   passou de duas casas e meia (.is-longe). */
.crt:not(.is-vivo) .crt-cartao:nth-child(n+4),
.crt-cartao.is-longe{visibility:hidden}

.crt-giro{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform var(--crt-dur) var(--ease);
}
.crt-cartao.is-virado .crt-giro{transform:rotateY(180deg)}

/* ---------------------------------------------------------------- faces */
.crt-face{
  --crt-fundo:var(--dark-2);
  --crt-tinta:var(--light);
  position:absolute;inset:0;overflow:hidden;
  border-radius:calc(var(--crt-w) * .045);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--crt-fundo);color:var(--crt-tinta);
  font-family:var(--sans);font-size:calc(var(--crt-w) * .036);
  box-shadow:
    0 calc(var(--crt-w) * .05) calc(var(--crt-w) * .1) color-mix(in srgb,var(--dark) 55%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--light) 14%,transparent);
}
/* O brilho: uma faixa diagonal fixa na face, que gira junto com o cartão.
   É o giro que a faz passar pela luz, e não o cursor (CLAUDE.md §6). */
.crt-face::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--light) 16%,transparent) 46%,transparent 60%),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--light) 3%,transparent) 0 1px,transparent 1px 3px);
}
/* O véu dos vizinhos: escurece conforme recuam. Véu opaco por cima, e não
   opacity na face — face translúcida deixaria ver o cartão de trás através
   do da frente no meio do giro. E na face, não no cartão (decisão 2). */
.crt-face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--dark);opacity:calc(var(--crt-p) * .3);
}
.crt-verso{transform:rotateY(180deg)}

/* Frente: marca no alto, chip e aproximação à esquerda, número e titular
   embaixo. Tudo em proporção da largura, para o cartão escalar inteiro. */
.crt-frente{
  display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto 1fr auto auto;
  column-gap:calc(var(--crt-w) * .03);
  padding:calc(var(--crt-w) * .065) calc(var(--crt-w) * .07);
}
.crt-marca{
  grid-column:1 / -1;
  font-family:var(--display);font-weight:600;letter-spacing:.02em;
  font-size:calc(var(--crt-w) * .048);
}
.crt-marca b{font-weight:400;opacity:.7}
.crt-chip{
  grid-row:2;align-self:center;
  width:calc(var(--crt-w) * .12);height:calc(var(--crt-w) * .09);
  border-radius:calc(var(--crt-w) * .016);
  background:
    linear-gradient(90deg,transparent 32%,color-mix(in srgb,var(--dark) 22%,transparent) 32% 34%,transparent 34% 66%,color-mix(in srgb,var(--dark) 22%,transparent) 66% 68%,transparent 68%),
    linear-gradient(0deg,transparent 46%,color-mix(in srgb,var(--dark) 22%,transparent) 46% 54%,transparent 54%),
    linear-gradient(135deg,color-mix(in srgb,var(--light-2) 70%,var(--accent)),color-mix(in srgb,var(--light-2) 40%,var(--accent-2)));
}
.crt-onda{grid-row:2;align-self:center;width:calc(var(--crt-w) * .06);height:auto;opacity:.75}
.crt-numero{
  grid-column:1 / -1;
  font-size:calc(var(--crt-w) * .05);letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}
.crt-titular{
  grid-column:1 / -1;margin-top:calc(var(--crt-w) * .02);
  font-size:calc(var(--crt-w) * .03);letter-spacing:.16em;text-transform:uppercase;opacity:.75;
}

.crt-verso{display:grid;grid-template-rows:auto auto 1fr;align-content:start;padding-block:calc(var(--crt-w) * .07)}
.crt-tarja{height:calc(var(--crt-w) * .13);background:color-mix(in srgb,var(--dark) 86%,transparent)}
.crt-assina{
  margin:calc(var(--crt-w) * .05) calc(var(--crt-w) * .07) 0;
  padding:calc(var(--crt-w) * .012) calc(var(--crt-w) * .025);
  justify-self:start;min-inline-size:55%;
  font-size:calc(var(--crt-w) * .03);letter-spacing:.2em;text-align:end;
  background:color-mix(in srgb,var(--crt-tinta) 12%,transparent);
}
.crt-legal{
  align-self:end;margin-inline:calc(var(--crt-w) * .07);
  font-size:calc(var(--crt-w) * .024);line-height:1.5;opacity:.6;max-inline-size:36ch;
}

/* ---------------------------------------------------------------- acabamentos */
.crt-acab--grafite .crt-face{
  --crt-fundo:linear-gradient(140deg,color-mix(in srgb,var(--dark-2) 78%,var(--light)),var(--dark) 70%);
}
.crt-acab--marfim .crt-face{
  --crt-fundo:linear-gradient(140deg,var(--light),color-mix(in srgb,var(--light-2) 88%,var(--dark)));
  --crt-tinta:var(--dark);
}
.crt-acab--casa .crt-face{
  --crt-fundo:linear-gradient(140deg,var(--accent),var(--accent-2));
  --crt-tinta:var(--dark);
}
.crt-acab--areia .crt-face{
  --crt-fundo:linear-gradient(140deg,color-mix(in srgb,var(--light-2) 78%,var(--accent)),color-mix(in srgb,var(--light-2) 58%,var(--accent-2)));
  --crt-tinta:var(--dark);
}
.crt-acab--noite .crt-face{
  --crt-fundo:var(--dark);
  box-shadow:
    0 calc(var(--crt-w) * .05) calc(var(--crt-w) * .1) color-mix(in srgb,var(--dark) 55%,transparent),
    inset 0 0 0 1px var(--accent);
}
.crt-acab--noite .crt-marca b{color:var(--accent);opacity:1}
.crt-acab--prata .crt-face{
  --crt-fundo:linear-gradient(120deg,color-mix(in srgb,var(--light-2) 70%,var(--dark)),var(--light) 45%,color-mix(in srgb,var(--light-2) 76%,var(--dark)));
  --crt-tinta:var(--dark);
}

/* ---------------------------------------------------------------- controles */
.crt-controles{display:grid;justify-items:center;gap:14px}
.crt-controles[hidden]{display:none}
.crt-pontos{display:grid;justify-items:center;gap:4px}
/* O alvo é o botão inteiro (24px); o ponto que se vê é o ::before. */
.crt-ponto{
  display:grid;place-items:center;width:24px;height:24px;padding:0;
  background:none;border:0;cursor:pointer;
}
.crt-ponto::before{
  content:"";width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--rule-2);
  transition:width .4s var(--ease),height .4s var(--ease),background-color .4s var(--ease);
}
.crt-ponto[aria-current="true"]::before{height:18px;background:var(--accent-ink,var(--accent))}
.crt-ponto:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-pill)}

/* ---------------------------------------------------------------- modo por rolagem
   Variação data-crt-rolagem: a seção fica alta e a grade gruda; a rolagem da
   página gira o tambor. Só em tela larga e sem "reduzir movimento" — quem o
   script não liga (.is-pinada) é a versão de sempre, com controles. */
.crt.is-pinada{height:calc(100svh + (var(--crt-n,6) - 1) * var(--crt-trecho,42svh))}
.crt.is-pinada .crt-grade{position:sticky;top:var(--nav-h);min-height:calc(100svh - var(--nav-h))}
.crt.is-pinada .crt-palco{cursor:default}

@media(max-width:860px){
  .crt{--crt-w:min(78vw,360px);--crt-guinada:-8deg;--crt-inclina:-5deg}
  /* No celular o rótulo desce para BAIXO do tambor: em cima, ele ficaria
     uma tela acima do cartão que ele nomeia. display:contents solta os
     filhos do bloco de texto na grade, e a ordem os rearruma. */
  .crt-grade{grid-template-columns:1fr;gap:18px;justify-items:start}
  .crt-texto{display:contents}
  .crt-palco-slot{order:1;justify-self:stretch;grid-template-columns:1fr;margin-top:8px}
  .crt-rotulo,.crt-dica{order:2}
  .crt-rotulo{margin-top:0}
  .crt-palco{height:calc(var(--crt-h) * 2.2)}
  .crt-controles{grid-auto-flow:column;align-items:center}
  .crt-pontos{grid-auto-flow:column}
  .crt-ponto[aria-current="true"]::before{height:6px;width:18px}
}