/* =============================================================================
 * vitrine-aparelhos.css — a fileira de aparelhos viva da home: tablet em pé,
 * celular e notebook trocando as telas do produto.
 *
 * Sem cartão nem vidro atrás: os aparelhos flutuam sobre a pintura do tema,
 * só com sombra de contato. Quem tem fundo próprio é o RÓTULO, porque texto
 * solto sobre pintura fica ilegível.
 *
 * A caixa da tela de cada aparelho vem MEDIDA do molduras.json (o motor grava
 * em variáveis --vap-*), nunca chutada aqui.
 * ========================================================================== */

.vap-fileira{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(14px,2.4vw,44px);
  width:100%; height:100%; min-height:0;
  padding:4px 0 0;
}

/* um aparelho: a moldura manda no tamanho, a janela da tela vive por cima */
.vap{
  position:relative; flex:0 0 auto; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
/* largura e altura em pixels vêm do motor (ajustarAltura). Não uso aspect-ratio
   aqui porque ela NÃO entra na largura intrínseca do item flex: o palco crescia
   por fora da caixa do aparelho e os três se sobrepunham. */
.vap__palco{
  position:relative;
  flex:0 0 auto;
  /* a mão fica CONTIDA no aparelho: sem isto ela passava para fora e esmagava o
     celular do lado */
  overflow:hidden;
  border-radius:6%;
}
.vap__moldura{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; pointer-events:none; z-index:2;
  display:block;
}
/* A sombra segue o CONTORNO do aparelho, pelo alfa do PNG da moldura. A versão
   anterior era um retângulo de box-shadow atrás do palco, e no notebook aquilo
   aparecia como uma aura de vidro em volta da tampa, porque a tampa é mais
   estreita que a base e o retângulo sobrava dos lados. */
.vap__moldura{
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.4)) drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
/* a janela é a tela do aparelho, em % da imagem da moldura */
.vap__janela{
  position:absolute; overflow:hidden; z-index:1; background:#07070a;
  left:var(--vap-x); top:var(--vap-y);
  width:var(--vap-w); height:var(--vap-h);
  border-radius:var(--vap-raio);
}
/* A tela visível é a que tem is-on. O fade é enfeite e vive numa classe à parte:
   quando a aba está em segundo plano o navegador CONGELA a transição, e a tela
   ficava preta (a opacidade parava no meio do caminho). Sem transição, o estado
   visível nunca depende de a animação ter rodado. */
.vap__tela{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0;
}
.vap__tela.is-on{opacity:1}
.vap-fileira.pode-esmaecer .vap__tela{transition:opacity .6s ease}
/* brilho de vidro, discreto, por cima da tela e por baixo da moldura */
.vap__janela::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%,
             rgba(255,255,255,0) 76%, rgba(255,255,255,.05) 100%);
}

/* a mão com a Apple Pencil (ou o dedo) encostando na tela. Fica ACIMA da moldura
   porque a mão passa por cima da borda do aparelho, como na vida real. */
.vap__peca{
  position:absolute; z-index:3; pointer-events:none;
  opacity:0;
}
.vap__peca.is-on{opacity:1}
.vap-fileira.pode-esmaecer .vap__peca{transition:opacity .45s ease}

/* ---- o rótulo: 8 posições, editáveis no estúdio ---- */
/* O rótulo NÃO manda na largura do aparelho: com nowrap, um texto longo ficava
   mais largo que o tablet e empurrava todos, encolhendo as telas (medi: rótulo de
   234px num tablet de 140px de tela). Ele quebra em duas linhas e se limita à
   largura do aparelho. */
.vap__rotulo{
  z-index:3; pointer-events:none;
  display:inline-flex; align-items:center; gap:8px;
  /* UMA LINHA SÓ e centralizada, por ordem do dono. A pílula pode ficar mais larga
     que o aparelho; o motor reserva essa largura na conta para as pílulas vizinhas
     não se encostarem. */
  white-space:nowrap; text-align:center; align-self:center;
  /* line-height 1 + overflow hidden CORTAVAM a segunda linha do rótulo, e o texto
     vazava da pílula. Agora a pílula cresce com o texto e nada é cortado. */
  font:600 16px/1.25 Inter,system-ui,sans-serif; letter-spacing:.01em; color:#fff;
  background:rgba(10,8,5,.68); border:1px solid rgba(212,168,87,.5);
  border-radius:16px; padding:8px 15px;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  overflow:visible;
}
.vap__rotulo::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--gold-telos,#d4a857);
}
body[data-surface="light"] .vap__rotulo{
  color:#1a1410; background:rgba(255,252,244,.86);
  border-color:color-mix(in srgb, var(--art-ink,#1a1410) 22%, transparent);
}
/* fora do aparelho */
.vap[data-rotulo="fora-baixo"] .vap__rotulo{margin-top:10px}
.vap[data-rotulo="fora-cima"]{justify-content:flex-start}
.vap[data-rotulo="fora-cima"] .vap__rotulo{margin-bottom:10px;order:-1}
/* dentro da tela: absoluto no palco */
.vap:not([data-rotulo^="fora"]) .vap__rotulo{position:absolute}
.vap[data-rotulo="baixo-esq"] .vap__rotulo{left:6%;bottom:5%}
.vap[data-rotulo="baixo-centro"] .vap__rotulo{left:50%;bottom:5%;transform:translateX(-50%)}
.vap[data-rotulo="baixo-dir"] .vap__rotulo{right:6%;bottom:5%}
.vap[data-rotulo="topo-esq"] .vap__rotulo{left:6%;top:5%}
.vap[data-rotulo="topo-centro"] .vap__rotulo{left:50%;top:5%;transform:translateX(-50%)}
.vap[data-rotulo="topo-dir"] .vap__rotulo{right:6%;top:5%}

/* ORDEM na fileira, por simetria: tablet à esquerda, NOTEBOOK NO MEIO (é o mais
   largo) e celular à direita. */
.vap[data-id="tablet"]{order:1}
.vap[data-id="notebook"]{order:2}
.vap[data-id="celular"]{order:3}

/* As alturas relativas e a altura da fileira são calculadas pelo MOTOR e entram
   como style, porque só ele sabe a proporção de cada moldura e o quanto o rótulo
   e os pontinhos ocupam. */

/* pontinhos por aparelho, para ele saber quantas telas giram ali */
.vap__pontos{display:flex;gap:6px;margin-top:8px}
.vap__pontos i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.34);
  transition:background .25s,transform .25s}
.vap__pontos i.is-on{background:var(--gold-telos,#d4a857);transform:scale(1.3)}
body[data-surface="light"] .vap__pontos i{background:rgba(26,20,16,.24)}

/* ---- telas estreitas ----
   Até 900px sai o notebook (a base larga dele não cabe). No CELULAR de verdade
   (até 620px) fica só o CELULAR, grande e centralizado: é o aparelho de quem está
   olhando, e é a única coisa que caberia inteira ali com tela legível. */
@media (max-width:900px){
  .vap-fileira{gap:12px}
  .vap__rotulo{font-size:16px;padding:6px 12px}
  .vap[data-id="notebook"]{display:none}
}
@media (max-width:620px){
  .vap[data-id="tablet"]{display:none}
  .vap-fileira{justify-content:center}
}

/* ---- alça de esticar (só aparece no modo editar da própria página) ---- */
.vap__alca{
  position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  z-index:6; display:none; cursor:ns-resize;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(212,168,87,.8); background:rgba(12,9,6,.92); color:#f7eccd;
  font:700 17px/1 Inter,system-ui,sans-serif;
}
body.vt-editando .vap__alca{display:block}
body.vt-editando .vap{outline:1px dashed rgba(212,168,87,.45); outline-offset:6px}
.vap__alca[data-valor]::after{
  content:attr(data-valor); position:absolute; left:50%; top:38px; transform:translateX(-50%);
  font:700 15px/1 Inter,system-ui,sans-serif; color:#f7eccd; background:rgba(12,9,6,.9);
  border:1px solid rgba(212,168,87,.5); border-radius:999px; padding:5px 9px; white-space:nowrap;
}
.vap.esticando{outline-color:var(--gold-telos,#d4a857)}

/* No MODO EDITAR a pílula e a mão recebem o mouse. Fora dele seguem com
   pointer-events:none, para não roubar clique de nada da página. Era por isto que
   o dono não conseguia clicar na pílula do rótulo: ela ignorava o mouse e o clique
   caía no aparelho atrás. */
body.vt-editando .vap__rotulo,
body.vt-editando .vap__peca{pointer-events:auto}
body.vt-editando .vap__rotulo{cursor:pointer}