/* ORYN — Lab 3D
 *
 * Só o que a página /experimente-3d/ precisa. Nada aqui vaza para as outras:
 * todo seletor começa em .lab. Tokens, botões, .env, .sec e a tipografia vêm do
 * style.css — se algo divergir do resto do site, o erro está AQUI, não lá.
 */

/* ------------------------------------------------------------------ layout */

.lab-grade {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
  grid-template-columns: 1fr;
}

/* 900px é onde a coluna de comando para de espremer os sliders. Abaixo disso o
   palco vai para cima: no celular, ver o objeto importa mais que ver o controle. */
@media (min-width: 900px) {
  .lab-grade { grid-template-columns: minmax(280px, 360px) 1fr; align-items: start; }
}

/* Item de grid nasce com min-width:auto, ou seja, NAO encolhe abaixo do proprio
   min-content. O <canvas> carrega largura em ATRIBUTO (o renderer escreve 425 la'
   dentro), entao esse min-content vira um piso rigido e o palco estoura a coluna
   no celular. Sem esta linha, 430px vaza 21px para a direita. */
.lab-grade > * { min-width: 0; }

/* --------------------------------------------------------- área de soltar */

.lab-solta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 180px;
  padding: var(--s-6) var(--s-4);
  text-align: center;
  cursor: pointer;
  background: var(--bg-2);
  border: 1px dashed var(--linha);
  border-radius: var(--r-1);
  transition: border-color .18s ease, background-color .18s ease;
}
.lab-solta:hover,
.lab-solta:focus-within { border-color: var(--ouro-esc); background: var(--bg-3); }
.lab-solta--sobre       { border-color: var(--ouro); background: var(--bg-3); }
.lab-solta--tem         { min-height: 120px; }

.lab-solta .ico   { color: var(--ouro); transform: rotate(90deg); }
.lab-solta-t      { font-family: var(--f-disp); font-size: var(--fs-h3); letter-spacing: .02em; color: var(--tx-1); }
.lab-solta-s      { font-size: var(--fs-micro); color: var(--tx-3); max-width: 34ch; }

.lab-dica {
  margin-top: var(--s-3);
  font-size: var(--fs-micro);
  color: var(--ouro);
  border-left: 2px solid var(--ouro-esc);
  padding-left: var(--s-3);
}

.lab-aviso {
  margin-top: var(--s-3);
  padding: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--tx-1);
  background: var(--bg-2);
  border-left: 2px solid var(--ouro);
}

.lab-nota {
  margin-top: var(--s-4);
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--tx-3);
}

/* ---------------------------------------------------------------- painel */

.lab-painel { margin-top: var(--s-5); display: grid; gap: var(--s-5); }

.lab-modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.lab-modo {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  text-align: left;
  cursor: pointer;
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-1);
  color: var(--tx-2);
  font-family: inherit;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.lab-modo strong { font-family: var(--f-disp); font-size: var(--fs-body); letter-spacing: .04em; text-transform: uppercase; color: var(--tx-1); }
/* ⚠️ `--tx-3` (#888888) NÃO serve aqui, e é a armadilha da rampa desta folha:
   os três níveis de texto foram derivados contra o fundo MAIS ESCURO do site,
   então o mesmo token vale em qualquer seção — menos onde a superfície é mais
   clara. `.lab-modo` tem `--bg-3` (#2C2C2C) e o par dava **3,94:1** a 13px,
   abaixo de AA. Corrigido pelo lado certo (subir a cor, não escurecer o
   fundo): #A9A9A9 sobre #2C2C2C = 5,91:1. É a descrição do modo — conteúdo,
   não legenda. */
.lab-modo span   { font-size: var(--fs-micro); color: var(--tx-2); }
.lab-modo:hover  { border-color: var(--ouro-esc); background: var(--bg-3); }

/* aria-pressed é a fonte da verdade do estado, não uma classe paralela: assim o
   leitor de tela e o olho leem a MESMA coisa, e não existe estado dessincronizado */
.lab-modo[aria-pressed="true"] { border-color: var(--ouro); background: var(--bg-3); }
.lab-modo[aria-pressed="true"] strong { color: var(--ouro); }

/* ------------------------------------------------------------- controles */

.lab-ctl label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-2);
}
.lab-ctl output {
  font-family: var(--f-disp);
  font-size: var(--fs-body);
  letter-spacing: .04em;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
}
.lab-ctl-ajuda { margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--tx-3); }

/* O trilho tem 2px, mas o INPUT precisa ter altura de dedo. Estilizar height:2px
   no próprio input deixa a área tocável com 2px: no celular vira loteria acertar.
   O trilho fino vai no ::track; o input mantém 28px de alvo. */
.lab-ctl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin-top: var(--s-2);
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.lab-ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--linha); border-radius: 2px;
}
.lab-ctl input[type="range"]::-moz-range-track {
  height: 2px; background: var(--linha); border-radius: 2px;
}
/* alvo de 22px: abaixo disso o polegar erra o cursor no celular, e o slider
   vira controle de mouse só */
.lab-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ouro);
  border: 3px solid var(--bg-0);
  cursor: grab;
  margin-top: -10px;      /* centra no trilho de 2px — o webkit não faz sozinho */
}
.lab-ctl input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ouro);
  border: 3px solid var(--bg-0);
  cursor: grab;
}
.lab-ctl input[type="range"]:focus-visible { outline: 2px solid var(--ouro); outline-offset: 6px; }

.lab-acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lab-acoes .btn { flex: 1 1 auto; justify-content: center; }

/* ------------------------------------------------------------------ palco */

.lab-palco {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(200,164,106,.07), transparent 60%),
    var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-1);
  overflow: hidden;
  /* proporção fixa evita o pulo de layout entre "vazio" e "com peça" — e é o que
     permite dimensionar o canvas sem consultar altura de conteúdo */
  aspect-ratio: 4 / 3;
}
/* min-height + aspect-ratio é armadilha: a proporção converte o piso de ALTURA
   em piso de LARGURA (320px de alto × 4/3 = 427px de largo) e o palco estoura a
   tela do celular. Só entra onde a largura já garante que não morde. */
@media (min-width: 480px) { .lab-palco { min-height: 320px; } }
@media (min-width: 900px) { .lab-palco { aspect-ratio: 16 / 11; } }

#lona { width: 100%; height: 100%; max-width: 100%; display: block; touch-action: none; }

.lab-vazio {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: var(--s-2);
  text-align: center; padding: var(--s-6);
  pointer-events: none;
}
/* display de autor VENCE o [hidden] do user-agent: sem esta linha o "o objeto
   aparece aqui" continua impresso por cima da peça depois de gerada. */
.lab-vazio[hidden] { display: none; }
.lab-vazio-t { font-family: var(--f-disp); font-size: var(--fs-h3); letter-spacing: .03em; color: var(--tx-2); }
.lab-vazio-s { font-size: var(--fs-micro); color: var(--tx-3); max-width: 32ch; margin-inline: auto; }

.lab-proc, .lab-stats {
  position: absolute; left: var(--s-4);
  font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}
.lab-proc  { top: var(--s-4); color: var(--ouro); }
.lab-stats { bottom: var(--s-4); color: var(--tx-3); }

.lab[aria-busy="true"] .lab-palco { opacity: .55; }

.lab-semwebgl {
  margin-block: var(--s-7);
  padding: var(--s-4);
  border-left: 2px solid var(--ouro);
  background: var(--bg-2);
  color: var(--tx-2);
}

/* ------------------------------------------------------------ como funciona */

.lab-passos {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 760px) { .lab-passos { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.lab-passos li {
  padding: var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-1);
}
.lab-num {
  display: block;
  font-family: var(--f-disp);
  font-size: var(--fs-num);
  line-height: 1;
  color: var(--ouro-veu2);
  margin-bottom: var(--s-3);
}
.lab-passos h3 {
  font-family: var(--f-disp);
  font-size: var(--fs-h3);
  letter-spacing: .03em;
  color: var(--tx-1);
  margin-bottom: var(--s-2);
}
.lab-passos p { color: var(--tx-2); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- limites */

.lab-limites { margin-top: var(--s-7); display: grid; gap: var(--s-5); max-width: 74ch; }
.lab-limites p { color: var(--tx-2); }
.lab-limites strong { color: var(--tx-1); }

.lab-cta { text-align: center; }
.lab-cta .lead { margin-inline: auto; }
.lab-cta .hero-acoes { justify-content: center; }

/* -------------------------------------------------------------- movimento */

@media (prefers-reduced-motion: reduce) {
  .lab-solta, .lab-modo { transition: none; }
}