/* objeto-3d.css · o objeto do negócio em camadas 3D (placas de metal escuro com luz, reflexo e espessura).
   HTML pronto em objeto-3d.html (3 faces: cartao, etiqueta, ficha). Só CSS; nada de imagem.
   Vai dentro de um .lap-heroi (ou de um elemento com data-lap-gatilho), que dispara o hover.
   Variáveis locais (mude no contêiner, se precisar): tamanho da placa, pose e afastamento da placa de trás. */

.lap-heroi:has(.lap-objeto3d) { container-type: inline-size; }
.lap-heroi .lap-heroi-texto { position: relative; z-index: 2; }

.lap-objeto3d {
  --lap-placa-l: 154px; --lap-placa-a: 97px;                       /* cartão: 1,586 : 1 */
  --lap-pose: rotateX(30deg) rotateY(-16deg) rotateZ(-13deg);
  --lap-pose-hover: rotateX(26deg) rotateY(-10deg) rotateZ(-11deg) translateY(-4px);
  --lap-tras: translate3d(64px, -30px, -34px) rotateZ(13deg);
  --lap-tras-hover: translate3d(66px, -24px, -44px) rotateZ(17deg);
  --lap-frente: translate3d(0, 0, 14px);
  --lap-frente-hover: translate3d(-8px, 8px, 30px);
  --lap-raio-placa: 11px;
  position: absolute; top: 0; right: 0; bottom: 0; width: 256px; z-index: 1;
  pointer-events: none; perspective: 700px; perspective-origin: 45% 25%;
}
.lap-cena { position: absolute; inset: 0; transform-style: preserve-3d; animation: lap-flutua 9s ease-in-out infinite; }
.lap-pilha {
  position: absolute; left: 26px; top: 40px; width: var(--lap-placa-l); height: var(--lap-placa-a);
  transform-style: preserve-3d; transform: var(--lap-pose);
  transition: transform .6s var(--lap-curva);
}
.lap-placa { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--lap-curva); }
.lap-placa--tras { transform: var(--lap-tras); animation: lap-entra-tras 1s .08s var(--lap-curva) both; }
.lap-placa--frente { transform: var(--lap-frente); animation: lap-entra-frente var(--lap-entrada) var(--lap-curva) both; }

/* a face: metal escuro em camadas (reflexo que corre, luz de cima, luz da marca no canto, sombra no canto, escovado, base) */
.lap-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--lap-raio-placa);
  background:
    linear-gradient(115deg, transparent 30%, var(--lap-luz-6) 36%, var(--lap-luz-24) 43%, var(--lap-luz-6) 47%, transparent 55%) 22% 0 / 260% 100% no-repeat,
    linear-gradient(170deg, var(--lap-luz-10), transparent 42%),
    radial-gradient(62% 85% at 100% 0%, color-mix(in oklch, var(--lap-marca-clara) 50%, transparent), color-mix(in oklch, var(--cor-marca) 12%, transparent) 48%, transparent 72%),
    radial-gradient(90% 70% at 0% 100%, var(--lap-breu-50), transparent 70%),
    repeating-linear-gradient(98deg, var(--lap-luz-2) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, var(--lap-metal-1) 0%, var(--lap-metal-2) 30%, var(--lap-metal-3) 66%, var(--lap-metal-4) 100%);
  box-shadow:
    inset 0 1px 0 var(--lap-luz-42),
    inset 1px 0 0 var(--lap-luz-10),
    inset -1px 0 0 color-mix(in oklch, var(--lap-marca-clara) 50%, transparent),
    inset 0 -1px 0 var(--lap-breu-70);
  transition: background-position 1.1s var(--lap-curva);
}
.lap-placa--tras .lap-face {
  background:
    linear-gradient(115deg, transparent 36%, var(--lap-luz-10) 46%, transparent 58%) 22% 0 / 260% 100% no-repeat,
    repeating-linear-gradient(98deg, var(--lap-luz-2) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, var(--lap-metal-2) 0%, var(--lap-metal-3) 45%, var(--lap-metal-4) 100%);
  box-shadow: inset 0 1px 0 var(--lap-luz-16), inset 0 0 0 1px var(--lap-luz-4), inset 0 -1px 0 var(--lap-breu-70);
}
/* a espessura: a borda da placa vista de lado, com a sombra física e a luz da marca embaixo (só na da frente) */
.lap-espessura {
  position: absolute; inset: 0; border-radius: var(--lap-raio-placa);
  background: linear-gradient(180deg, var(--lap-metal-1), var(--lap-metal-4) 60%);
  transform: translateZ(-2.5px);
  box-shadow: 0 2px 2px var(--lap-breu-50), 0 16px 26px -6px var(--lap-breu-70), 0 26px 46px -14px color-mix(in oklch, var(--cor-marca) 45%, transparent);
}
.lap-placa--tras .lap-espessura { box-shadow: 0 2px 2px var(--lap-breu-50), 0 14px 24px -6px var(--lap-breu-70); }
.lap-chao {   /* sombra no "chão", embaixo da pilha */
  position: absolute; left: 34px; top: 118px; width: 180px; height: 36px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lap-breu-70), transparent);
  filter: blur(6px); transform: rotateZ(-10deg);
}

/* ----- peças das faces (todas decorativas; dado de verdade não entra aqui) ----- */
.lap-face-tarja { position: absolute; left: 0; right: 0; top: 16px; height: 18px; background: linear-gradient(180deg, var(--lap-metal-4), var(--lap-metal-3)); }
.lap-face-simbolo {   /* o símbolo da marca do aluno (svg com stroke ou fill em currentColor) */
  position: absolute; right: 13px; top: 11px; width: 20px; height: 20px; color: var(--cor-texto); opacity: .9;
  filter: drop-shadow(0 0 6px var(--lap-marca-brilho));
}
.lap-face-simbolo svg { width: 100%; height: 100%; display: block; }
.lap-face-texto {   /* texto pequeno em mono, decorativo ("•••• 4821", "09/29") */
  position: absolute; font: 400 7.5px/1 var(--fonte-mono); letter-spacing: .12em; color: var(--lap-luz-42);
}
.lap-face-texto b { font-weight: 500; font-size: 9px; letter-spacing: .06em; color: color-mix(in oklch, var(--lap-luz) 85%, transparent); }
.lap-face-falsa { position: absolute; height: 5px; border-radius: 3px; background: var(--lap-luz-16); }
.lap-face-falsa--marca { background: color-mix(in oklch, var(--lap-marca-clara) 70%, transparent); box-shadow: 0 0 8px -1px var(--lap-marca-brilho); }

/* face "cartao": chip prateado, símbolo sem contato, número decorativo */
.lap-face-chip {
  position: absolute; left: 16px; top: 36px; width: 24px; height: 18px; border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 47%, var(--lap-breu-35) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 31%, var(--lap-breu-35) 31% 36%, transparent 36% 64%, var(--lap-breu-35) 64% 69%, transparent 69%),
    linear-gradient(135deg, var(--neutro-12) 0%, var(--neutro-10) 38%, var(--neutro-11) 58%, var(--neutro-9) 100%);
  box-shadow: inset 0 0 0 .5px var(--lap-breu-50), inset 0 1px 0 var(--lap-luz-42), 0 1px 1px var(--lap-breu-50);
}
.lap-face-nfc { position: absolute; left: 46px; top: 38px; width: 9px; height: 14px; fill: none; stroke: var(--lap-luz-42); stroke-width: 1.2; stroke-linecap: round; }

/* face "etiqueta" (pedido, ingresso, etiqueta de envio): canhoto picotado à esquerda e código de barras */
.lap-placa--etiqueta .lap-face::before {   /* picote: linha tracejada + dois recortes */
  content: ""; position: absolute; left: 30%; top: 0; bottom: 0; width: 8px; transform: translateX(-4px);
  background:
    radial-gradient(circle at 50% 0, var(--lap-metal-4) 4px, transparent 4.5px),
    radial-gradient(circle at 50% 100%, var(--lap-metal-4) 4px, transparent 4.5px),
    repeating-linear-gradient(180deg, var(--lap-luz-24) 0 3px, transparent 3px 6px) 50% 0 / 1px 100% no-repeat;
}
.lap-face-barras {
  position: absolute; left: 10%; top: 18%; width: 12%; height: 64%; opacity: .75;
  background: repeating-linear-gradient(180deg, var(--lap-luz-42) 0 2px, transparent 2px 3px, var(--lap-luz-42) 3px 4px, transparent 4px 7px, var(--lap-luz-24) 7px 8px, transparent 8px 10px);
  border-radius: 1px;
}

/* face "ficha" (documento, prontuário, contrato, proposta): faixa de cima, foto redonda e linhas */
.lap-face-faixa { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(90deg, color-mix(in oklch, var(--cor-marca) 38%, transparent), transparent 85%); box-shadow: inset 0 -1px 0 var(--lap-luz-6); }
.lap-face-foto {
  position: absolute; left: 12px; top: 34%; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--lap-luz-42), transparent 60%), var(--lap-metal-1);
  box-shadow: inset 0 0 0 1px var(--lap-luz-16), 0 2px 4px var(--lap-breu-50);
}

/* ----- movimento: entra subindo e girando; flutua ±3° parado; no hover as camadas se afastam, o reflexo corre e a pilha balança ----- */
@media (prefers-reduced-motion: no-preference) {
  :is(.lap-heroi, [data-lap-gatilho]):hover .lap-pilha { transform: var(--lap-pose-hover); }
  :is(.lap-heroi, [data-lap-gatilho]):hover .lap-placa--frente { transform: var(--lap-frente-hover); }
  :is(.lap-heroi, [data-lap-gatilho]):hover .lap-placa--tras { transform: var(--lap-tras-hover); }
  :is(.lap-heroi, [data-lap-gatilho]):hover .lap-face { background-position: 95% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  :is(.lap-heroi, [data-lap-gatilho]):hover .lap-cena { animation: lap-balanca 3.2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .lap-cena, .lap-placa { animation: none !important; }
  .lap-pilha, .lap-placa, .lap-face { transition: none !important; }
}
@keyframes lap-flutua { 0%, 100% { transform: rotateY(-3deg) translateY(0); } 50% { transform: rotateY(3deg) translateY(-3px); } }
@keyframes lap-balanca { 0%, 100% { transform: rotateY(-9deg) rotateX(3deg); } 50% { transform: rotateY(9deg) rotateX(-3deg); } }
@keyframes lap-entra-frente { from { opacity: 0; transform: translate3d(-24px, 40px, 0) rotateZ(-14deg); } }
@keyframes lap-entra-tras { from { opacity: 0; transform: translate3d(20px, -10px, -26px) rotateZ(0deg); } }

/* cartão estreito (a medida é a largura de DENTRO do cartão, sem o respiro): a peça encolhe para a direita;
   no celular desce para o canto de baixo; muito estreito, sai (nunca cobre o texto) */
@container (max-width: 420px) { .lap-objeto3d { width: 220px; right: -28px; } .lap-pilha { top: 30px; } .lap-chao { top: 104px; } }
@container (max-width: 340px) {
  .lap-heroi-texto { padding-bottom: 116px; }
  .lap-objeto3d { top: auto; bottom: -6px; height: 168px; width: 236px; right: -18px; }
  .lap-pilha { top: 34px; }
}
@container (max-width: 220px) { .lap-objeto3d { display: none; } .lap-heroi-texto { padding-bottom: 0; } }