/* O cartão "modo de bolso" — telefone e tablet, uma vez na vida.
 *
 * ⚠️ FICA FORA DAS NOVE FATIAS, e isso é deliberado.
 *
 * As nove (`lab-tokens` … `lab-overrides`) são um corte por faixa contígua do
 * antigo `lab.css`, e `./scripts/split-lab-css.sh --verify` prova, byte a byte,
 * que elas o remontam. Acrescentar uma regra a qualquer uma quebraria essa
 * prova. Conteúdo NOVO nasce em arquivo novo — e o efeito colateral é bom: a
 * fronteira entre "o que veio do corte" e "o que veio depois" fica visível na
 * própria árvore.
 *
 * Carregado por ÚLTIMO, depois de `lab-overrides.css`. Não disputa com ninguém
 * (todas as classes são `pocket-*`, criadas aqui), então a posição é livre — mas
 * o fim da lista é onde um componente autocontido não surpreende ninguém.
 *
 * ⚠️ AO CONFERIR ISTO NO BROWSER, a janela precisa estar EM PRIMEIRO PLANO.
 *
 * Com a aba em segundo plano o Chrome PAUSA transições e animações, e o `screenshot`
 * continua funcionando — então o cartão sai translúcido na captura, com a planta
 * aparecendo através do texto, e parece defeito de CSS. Foi o que aconteceu em
 * 26/08/2026: a opacidade ficou congelada em 0,219 e o diagnóstico apontou primeiro
 * para `backdrop-filter`, depois para o custo das animações — as duas erradas. O que
 * revelou a causa foi `document.visibilityState === 'hidden'`.
 *
 * Para inspecionar sem trazer a janela à frente: forçar o estado final por JS e
 * posicionar as animações com `el.getAnimations().forEach(a => a.currentTime = ms)`.
 */

.pocket-back {
  position: fixed;
  inset: 0;
  /* Acima da folha do menu (110) e do HUD elevado (111): é o único momento em
     que algo deve estar na frente do menu, porque ele aparece antes de a pessoa
     ter tocado em qualquer coisa. */
  z-index: 130;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  /* Rede de segurança para aparelho pequeno com o texto longo: `flex-end` corta
     pelo TOPO quando o cartão não cabe, e o que se perde é justamente o título,
     que é onde a recomendação está. Medido em 29/08/2026 com o texto novo: 612px
     de cartão a 320px de largura, contra 667 de um iPhone SE — cabe, com 23px de
     folga depois do padding. Folga que a barra de endereço de um browser
     qualquer come sozinha, e daí o `auto`. */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fundo sólido, sem `backdrop-filter`.
     O blur de tela cheia sobre um `<canvas>` WebGL que desenha a 60 quadros
     obriga o compositor a refazer a cena inteira a cada quadro, e o ganho
     visual sobre um fundo já quase preto é quase nulo. */
  background: rgba(4, 7, 16, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease-out;
}

.pocket-back.open { opacity: 1; pointer-events: auto; }

.pocket-card {
  width: min(420px, 100%);
  padding: 22px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px;
  border: 1px solid rgba(111, 214, 255, .22);
  background: linear-gradient(168deg, rgba(16, 24, 44, .98), rgba(9, 13, 26, .98));
  box-shadow: 0 -10px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  color: #f1f4ff;
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  /* Sobe de baixo com um respingo de mola: o `cubic-bezier` passa de 1 e volta,
     que é o que faz a entrada parecer um objeto e não uma opacidade. */
  transform: translateY(28px) scale(.97);
  transition: transform .34s cubic-bezier(.2, 1.5, .35, 1);
}

.pocket-back.open .pocket-card { transform: translateY(0) scale(1); }

/* ── A ilustração ─────────────────────────────────────────────────────────
   Um aparelho que cresce de retrato para paisagem, com uma planta dentro que
   ganha cômodos no caminho. Conta a mensagem inteira sem uma palavra — e é por
   isso que o texto ao lado pode ser curto. */

.pocket-stage {
  position: relative;
  height: 116px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pocket-device {
  position: relative;
  width: 62px;
  height: 104px;
  border-radius: 12px;
  border: 2px solid rgba(150, 175, 220, .45);
  background: rgba(6, 10, 22, .9);
  overflow: hidden;
  animation: pocket-grow 6s ease-in-out infinite;
}

/* O "teclado" do laptop: some enquanto o aparelho está em retrato e aparece
   junto com a largura, o que é o que faz a transformação ler como laptop e não
   como um celular deitado. */
.pocket-base {
  width: 0;
  height: 4px;
  margin-top: 3px;
  border-radius: 0 0 5px 5px;
  background: rgba(150, 175, 220, .45);
  animation: pocket-base 6s ease-in-out infinite;
}

.pocket-screen { position: absolute; inset: 5px; }

/* Os cômodos da planta em miniatura. Cada um entra numa fração diferente do
   ciclo, então a planta "se revela" conforme a tela cresce — a mesma leitura do
   SLAM descobrindo os cômodos, em oito segundos. */
.pocket-room {
  position: absolute;
  border-radius: 2px;
  background: rgba(111, 214, 255, .5);
  opacity: 0;
}

/* Os DOIS do meio ficam sempre acesos — inclusive na fase estreita.
   A mensagem é "cabe menos", não "não cabe nada": um aparelho vazio leria como
   defeito, e o site funciona inteiro no telefone. Medido na tela — a primeira
   versão animava os cinco e a fase de celular ficava com um ponto solitário
   dentro de um retângulo preto. */
.pocket-room-1 { left: 20%; top: 40%; width: 28%; height: 20%; opacity: 1; }
.pocket-room-2 { left: 52%; top: 40%; width: 28%; height: 20%; opacity: 1; }

/* Estes três só existem na fase larga: é literalmente o que uma tela grande
   mostra a mais. O atraso escalonado faz a planta se REVELAR em vez de piscar,
   que é a mesma leitura do SLAM descobrindo os cômodos. */
.pocket-room-3 { left: 52%; top: 12%; width: 28%; height: 22%; animation: pocket-room 6s ease-in-out infinite 1.4s; }
.pocket-room-4 { left: 52%; top: 66%; width: 28%; height: 22%; animation: pocket-room 6s ease-in-out infinite 1.6s; }
.pocket-room-5 { left: 84%; top: 40%; width: 13%; height: 20%; animation: pocket-room 6s ease-in-out infinite 1.8s; }

/* O robô: um ponto que atravessa a planta no compasso da revelação. */
.pocket-bot {
  position: absolute;
  left: 30%;
  top: 46%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #eff1f5;
  box-shadow: 0 0 10px rgba(111, 214, 255, .9);
  animation: pocket-bot 6s ease-in-out infinite;
}

@keyframes pocket-grow {
  0%, 18%   { width: 62px;  height: 104px; border-radius: 12px; }
  38%, 82%  { width: 168px; height: 104px; border-radius: 8px; }
  100%      { width: 62px;  height: 104px; border-radius: 12px; }
}

@keyframes pocket-base {
  0%, 22%   { width: 0;     opacity: 0; }
  42%, 80%  { width: 186px; opacity: 1; }
  100%      { width: 0;     opacity: 0; }
}

@keyframes pocket-room {
  0%, 20%   { opacity: 0; }
  40%, 80%  { opacity: 1; }
  100%      { opacity: 0; }
}

@keyframes pocket-bot {
  0%, 20%   { left: 30%; }
  55%       { left: 62%; }
  80%       { left: 88%; }
  100%      { left: 30%; }
}

/* ── O texto ─────────────────────────────────────────────────────────────── */

.pocket-tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6fd6ff;
  opacity: .85;
}

.pocket-title {
  margin: 7px 0 9px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  /* Fonte de texto, não a monoespaçada do chrome: são duas frases para LER, e a
     mono a 17px num telefone estreito quebra em lugares esquisitos. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pocket-body {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #a8b2cc;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pocket-gestures {
  list-style: none;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  display: grid;
  gap: 9px;
}

.pocket-gestures li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}

/* Largura fixa no gesto: as três descrições alinham numa coluna só, e a lista
   lê como tabela em vez de três frases soltas. */
.pocket-gestures b {
  flex: 0 0 auto;
  min-width: 108px;
  color: #6fd6ff;
  font-weight: 600;
}

.pocket-gestures span { color: #8e96b3; }

.pocket-ok {
  width: 100%;
  /* 46px é alvo de toque cheio, o mesmo piso do resto do lab — e este botão é a
     única saída do cartão para quem não conhece o gesto de tocar fora. */
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(111, 214, 255, .35);
  background: rgba(111, 214, 255, .1);
  color: #f1f4ff;
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.pocket-ok:active { background: rgba(111, 214, 255, .2); }

/* Telefone estreito: a ilustração encolhe antes do texto, porque ela é o
   ornamento e o texto é o conteúdo. */
@media (max-height: 680px), (max-width: 360px) {
  .pocket-stage { height: 92px; margin-bottom: 12px; }
  .pocket-device { height: 84px; }
  .pocket-title { font-size: 15.5px; }
  .pocket-gestures { padding: 10px 12px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento nenhum — nem a entrada, nem o ciclo do aparelho. O cartão
     continua legível e a ilustração fica parada na fase LARGA, que é a que
     mostra a planta inteira e sustenta a frase do título. */
  .pocket-card { transition: none; transform: none; }
  .pocket-back { transition: none; }
  .pocket-device { animation: none; width: 168px; }
  .pocket-base { animation: none; width: 186px; opacity: 1; }
  .pocket-room { animation: none; opacity: 1; }
  .pocket-bot { animation: none; left: 62%; }
}