/* Painéis de LABORATÓRIOS e PROJETOS — redesign
 *
 * O que havia: `.lab-grid` com `repeat(2, 1fr)` fixo. Duas colunas sempre, o
 * que aperta as estações num painel estreito e desperdiça um monitor largo. As
 * artes animadas dentro de cada CRT são o melhor do painel — ficam todas
 * intactas; o que muda é a moldura em volta delas.
 *
 * Três mudanças, e uma adição:
 *
 *   1. GRID QUE RESPIRA. `auto-fit` com piso de 380px decide o número de
 *      colunas pela largura real, em vez de fixar duas. Num painel estreito
 *      vira uma coluna e a arte deixa de ser espremida; num monitor largo cabem
 *      três, e não sobra metade da tela vazia.
 *   2. A ARTE GANHA ALTURA. Era `min-height: min(320px, 36vh)`. Em tela baixa
 *      36vh é pouco para uma animação de sete palavras aparecendo em sequência;
 *      o piso sobe para 340px, e a razão de aspecto segura o resto.
 *   3. RESPIRO. Gap de 20 para 22px, e o cabeçalho da estação ganha altura de
 *      linha — o rótulo em caixa alta com `letter-spacing` estava colado na
 *      borda.
 *
 *   4. ADIÇÃO — LIGAR EM SEQUÊNCIA. As estações agora acendem uma a uma quando
 *      o painel abre, como um rack ligando por fileira. A metáfora do painel já
 *      é essa (CRT, LED, cartucho), e a entrada simultânea desperdiçava o único
 *      momento em que ela poderia aparecer. É `transform` e `opacity` apenas —
 *      as duas que o compositor resolve sem tocar em layout.
 *
 * Arquivo próprio, e não `panel.css`: aquele é compartilhado com a 2026.5, e
 * um redesign da versão viva não pode reescrever uma congelada — o dropdown de
 * versões existe para elas continuarem como eram. */

.lab-grid {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 22px;
  /* `1fr` forçava todas as linhas à altura da mais alta, e com número variável
     de colunas isso produz buraco embaixo das estações curtas. `auto` deixa
     cada linha caber no seu conteúdo; o `stretch` do item cuida do resto. */
  grid-auto-rows: auto;
}

.lab-grid .lab-crt {
  min-height: 340px;
}

.lab-bar {
  line-height: 1.5;
  padding-block: 11px;
}

/* ── Ligar em sequência ──────────────────────────────────────────────────────
   O atraso é por posição, não por projeto: acrescentar uma estação nova entra
   na cadência sozinha, sem editar CSS. Para além da sexta o atraso satura — a
   partir daí a espera passaria a incomodar mais do que a entrada agrada. */
@keyframes lab-power-on {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.lab-grid .lab-station {
  animation: lab-power-on .5s cubic-bezier(.22, .68, .36, 1) both;
}
.lab-grid .lab-station:nth-child(1) { animation-delay: .04s }
.lab-grid .lab-station:nth-child(2) { animation-delay: .12s }
.lab-grid .lab-station:nth-child(3) { animation-delay: .20s }
.lab-grid .lab-station:nth-child(4) { animation-delay: .28s }
.lab-grid .lab-station:nth-child(5) { animation-delay: .34s }
.lab-grid .lab-station:nth-child(n+6) { animation-delay: .38s }

/* O LED da barra acende junto com a estação: antes ele já estava piscando
   quando o cartão aparecia, o que entregava o final da animação antes do
   começo. */
@keyframes lab-led-warmup {
  from { opacity: 0; box-shadow: none; }
  to   { opacity: 1; }
}
.lab-grid .lab-station .lab-led {
  animation: lab-led-warmup .5s ease both, lab-led-blink 1.4s steps(2, end) infinite .55s;
}

/* ── Hover: a estação em foco ────────────────────────────────────────────────
   A borda já reagia. O que faltava era o CRT ganhar um pouco de brilho — é a
   parte que a pessoa vai clicar, e ela ficava idêntica em repouso e em foco. */
.lab-grid .lab-station { transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.lab-grid .lab-station:hover {
  transform: translateY(-2px);
  border-color: rgba(111, 214, 255, .48);
  box-shadow:
    0 0 0 1px rgba(111, 214, 255, .14),
    0 16px 40px rgba(3, 8, 30, .62),
    0 0 26px rgba(111, 214, 255, .10);
}
.lab-grid .lab-station:hover .lab-crt { filter: saturate(1.08) brightness(1.05); }
.lab-crt { transition: filter .22s ease; }

/* O botão do rodapé sinaliza que é o alvo do clique, em vez de parecer legenda. */
.lab-grid .lab-btn { transition: color .18s ease, border-color .18s ease, background .18s ease; }
.lab-grid .lab-station:hover .lab-btn {
  color: #9fd8ff;
  border-color: rgba(111, 214, 255, .42);
  background: rgba(111, 214, 255, .06);
}

/* ── Quem pediu menos movimento ──────────────────────────────────────────────
   A entrada some por completo — e `both` sem animação deixaria os cartões em
   opacity 0, então o estado final é reposto à mão. Painel invisível é pior que
   painel sem animação. */
@media (prefers-reduced-motion: reduce) {
  .lab-grid .lab-station,
  .lab-grid .lab-station .lab-led {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .lab-grid .lab-station:hover { transform: none; }
  .lab-grid .lab-station:hover .lab-crt { filter: none; }
}

/* Uma coluna: o `auto-fit` já resolve, mas a arte pode encolher mais aqui sem
   perder o gesto — em telefone, 340px de altura come a tela inteira. */
@media (max-width: 620px) {
  .lab-grid { gap: 16px; }
  .lab-grid .lab-crt { min-height: 260px; }
}