/* Roberti — capítulo 3, o galpão explodido.
   É o pedido nº1 do cliente: "girar a imagem, mostrar todos os detalhes de tudo que
   a gente faz" (briefing §5.1). O modelo é WebGL de verdade, com os 16 elementos
   marcados e a trilha das 5 soluções — que atende o pedido nº2, a revelação por etapa.

   Capítulo CLARO, e isso é decisão registrada (briefing §7, decisão 3): o modelo é de
   concreto claro e lava num fundo escuro. O palco é um cartão em #fdfdfd dentro da
   seção em --papel, de propósito: o pôster de fallback tem branco chapado nesse tom,
   então cartão explícito é honesto, e a alternativa (regerar o pôster com alfa) é
   pendência registrada em CAPITULO-3-GALPAO.md §5.

   Cápsulas em ÍNDIGO SÓLIDO com texto branco. Não é escolha estética: sobre palco
   claro o índigo dá 8,40:1 e o azul claro reprova em 2,27:1 -- a paleta inverte
   conforme o tema. E o degradê, que é a preferência do cliente, NÃO cabe na cápsula:
   passando de 46% do comprimento o branco reprova (2,64:1 na última letra). Ele entra
   só no ponto. Tabela completa em CAPITULO-3-GALPAO.md §3. */
@import url("marca.css");

.galpao {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  padding: var(--gap-secao) clamp(16px, 4vw, 56px);
}
.galpao-interno {
  max-width: var(--largura-max); margin: 0 auto;
  position: relative;   /* o conteúdo fica acima do padrão de fundo */
}

.galpao-topo {
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid var(--tinta-13);
}
.galpao-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 14px;
}
.galpao-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(26px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: var(--tracking-titulo);
  margin: 0 0 12px;
  max-width: 24ch;
}
.galpao-titulo b { font-weight: 400; }
.galpao-linha {
  margin: 0;
  font-size: var(--t-corpo);
  color: var(--tinta-65);
  max-width: 62ch;
  line-height: 1.6;
}

/* ---------- a trilha das 5 soluções ---------- */
.galpao-trilha {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.8vw, 26px);
  list-style: none;
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  padding: 0;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.galpao-trilha li {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  /* a solução acesa caminha do tinta para o índigo; --on é 0 ou 1, posto pelo JS */
  color: color-mix(in oklab, var(--tinta), var(--indigo) calc(var(--on, 0) * 100%));
  opacity: calc(.4 + var(--on, 0) * .6);
  transition: opacity .3s, color .3s;
}
.galpao-trilha li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  scale: calc(.7 + var(--on, 0) * .8);
  transition: scale .3s;
}
.galpao-trilha li:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }

/* ---------- o palco ----------
   Largura contida de propósito: a roda do mouse sobre o canvas é capturada pelo zoom
   do OrbitControls, então tem de sobrar corredor dos dois lados para rolar a página
   sem ir até a borda da janela. */
.galpao-palco {
  position: relative;
  width: min(1100px, 76vw);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #fdfdfd;
  box-shadow: 0 0 0 1px var(--tinta-13);
  touch-action: none;          /* o arraste gira o modelo, não rola a página */
}
@media (max-width: 900px) { .galpao-palco { width: min(100%, 94vw); } }
.galpao-palco canvas { display: block; width: 100%; height: 100%; }

.galpao-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fdfdfd;
  transition: opacity .6s;
}
.galpao-palco[data-pronto] .galpao-poster { opacity: 0; pointer-events: none; }
/* no fallback 2D o pôster É o conteúdo: fica e recebe as cápsulas por cima */
.galpao-palco[data-modo="2d"] .galpao-poster { opacity: 1; }

.galpao-status {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #1b1b3780;
}
.galpao-palco[data-pronto] .galpao-status, .galpao-palco[data-modo="2d"] .galpao-status { display: none; }

/* ---------- as 16 cápsulas ----------
   Âncora de tamanho zero: o ponto é o ::before e o rótulo é o <span>, os dois
   posicionados a partir do centro. Assim o transform que move a âncora não distorce
   nem o ponto nem o texto. */
.galpao-marcas { position: absolute; inset: 0; pointer-events: none; }
.galpao-mk {
  position: absolute; width: 0; height: 0;
  opacity: 0; transition: opacity .3s;
}
.galpao-mk[data-on="1"] { opacity: 1; }
.galpao-mk::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  /* o degradê oficial entra AQUI, no ponto, onde não carrega texto */
  background: linear-gradient(135deg, var(--indigo), var(--claro));
  box-shadow: 0 0 0 3px #fdfdfdcc, 0 0 0 4.5px #4346863d;
  /* cursor normal, não pointer: o ponto reage ao hover mas não é clicável, e
     mãozinha prometeria um clique que não existe */
  pointer-events: auto; cursor: default;
}
.galpao-mk > span {
  position: absolute; top: 50%; left: 16px; translate: 0 -50%;
  white-space: nowrap;
  background: var(--indigo); color: #fff;
  border-radius: 999px; padding: 5px 12px 6px;
  font-family: var(--fonte-titulo);
  font-size: 12.5px;
  box-shadow: 0 2px 14px #1b1b3729;
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
}
/* rótulo à esquerda do ponto quando o ponto está na faixa direita do palco */
.galpao-mk[data-lado="l"] > span { left: auto; right: 16px; }
.galpao-mk[data-hover="1"] > span, .galpao-mk[data-fixo="1"] > span { opacity: 1; }

/* ---------- controles ---------- */
.galpao-barra {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-size: 12.5px; color: var(--tinta-65);
  flex-wrap: wrap;
}
.galpao-barra button {
  background: #43468612;
  color: var(--indigo);
  border: 1px solid #43468630;
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-family: var(--fonte-titulo);
  cursor: pointer;
  transition: background .18s;
}
.galpao-barra button:hover { background: #4346861f; }
.galpao-barra button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.galpao-palco[data-modo="2d"] ~ .galpao-barra button { display: none; }

/* ---------- legenda numerada ----------
   Só existe onde não há hover. Em ponteiro fino o rótulo aparece no próprio ponto e
   uma lista embaixo seria redundância. */
.galpao-legenda { display: none; }
@media (hover: none) {
  .galpao-legenda {
    display: flex; flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
    margin: clamp(12px, 2vw, 18px) 0 0;
    padding: 0;
    justify-content: center;
    font-size: 13px;
    color: var(--tinta-65);
  }
  .galpao-legenda li { display: flex; align-items: center; gap: 7px; }
  .galpao-legenda b {
    display: grid; place-items: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--indigo); color: #fff;
    font-family: var(--fonte-titulo); font-size: 11px; font-weight: 400;
  }
  /* O ponto passa a CARREGAR TEXTO, então o degradê sai: número branco sobre ele cai
     para 2,31:1 na ponta clara (alvo 4,5 para 11px). Índigo sólido dá 8,54:1. É a
     mesma regra que já tirou o degradê da cápsula -- ele só serve onde não há letra. */
  .galpao-mk::before {
    inset: -9px;
    background: var(--indigo);
    content: attr(data-n);
    display: grid; place-items: center;
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 11px;
    line-height: 1;
  }
  .galpao-mk > span { display: none; }
}

.galpao-dica {
  text-align: center;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--tinta-65);
}

@media (prefers-reduced-motion: reduce) {
  .galpao-mk, .galpao-mk > span, .galpao-trilha li, .galpao-trilha li::before { transition: none; }
}