/* Lancei · site 3 · o Geeko, o mascote (previa/geeko.js). Só transform e opacity; os movimentos rodam só com o lugar
   à vista e só com movimento liberado.
   - O Geeko 3D (o painel da abertura e a chamada): um quadrado com o pôster e os laços WebM empilhados. As medidas
     vêm das caixas do desenho, em fração do quadrado: o pôster de x 0,27 a 0,74 e de y 0,22 a 0,98 (os pés); o pulo
     do comemora sobe até y 0,07 e a seta chega a x 1 e y 0.
   - O SVG espiando (as perguntas), em unidades do viewBox: a beira no y 214.
   - O Geeko pixel (o rodapé, a 404 e o "carregando"): as folhas de 8 quadros de 64 px por linha (0 parado, 3 andando). */

.geeko { position: absolute; z-index: 2; display: block; pointer-events: none; will-change: transform; }
.geeko > img, .geeko > svg { display: block; width: 100%; max-width: none; height: auto; overflow: visible; }
.geeko > svg { pointer-events: none; }
/* só o desenho do corpo responde ao mouse (para acenar); o resto deixa clicar o que está embaixo */
.geeko > svg .gk-tronco, .geeko > svg .gk-cabeca, .geeko > svg .gk-sobe { pointer-events: visiblePainted; }
.geeko--sem-lugar { display: none; }

/* o Geeko 3D: o laço da vez por cima do pôster; o pôster some enquanto um laço toca (o 1º quadro de todo laço é a
   pose do pôster, então a troca não pisca) */
.geeko--psx { aspect-ratio: 1; }
.geeko--psx > img, .geeko__laco { position: absolute; inset: 0; width: 100%; height: 100%; }
.geeko__laco { display: block; max-width: none; opacity: 0; pointer-events: none; }
.geeko__laco--vez { opacity: 1; }
.geeko--tocando > img { opacity: 0; }
/* a parte do quadrado que responde ao mouse: o corpo, sem chegar na beira de baixo (os pés) */
.geeko__corpo { position: absolute; left: 30%; right: 30%; top: 25%; bottom: 4%; pointer-events: auto; }

/* 1. o de notebook, espiando por cima da beira de cima do cartão do topo (09/11): o quadrado termina reto na beira; o
   lado vem do espaço livre acima dela e o x (--gk-x), do lugar sem tela atrás (geeko.js); quando a câmera sai do
   começo da cena, ele sai junto. No site 1 (sem cartão), a beira é a do comando, a 1ª linha da coluna do texto */
.geeko--terminal {
  --gk-l: 150px;
  left: var(--gk-x, 0);
  bottom: 100%;
  width: var(--gk-l);
  height: var(--gk-l);
  opacity: 0;
}
.geeko--terminal.geeko--chegou { opacity: 1; }
.cena-andou .geeko--terminal.geeko--chegou { opacity: 0; }
.topo-1__texto:has(> .geeko--terminal) { position: relative; }
/* o lugar dele: o topo abre acima do cartão o espaço do busto (0,78 do lado). No PC o cartão fica no meio da altura,
   então os 6rem descem o cartão 3rem e dão de 98 a 151 px de Geeko no 1280 × 720 e de 123 a 178 no 1366 × 768 (o
   cartão do site 2 é o mais alto); em pé, 4,75rem dão 100 px */
.topo .dentro:has(.geeko--terminal) { padding-top: calc(var(--altura-cabecalho) + 6rem); }
@media (max-width: 47.99rem), (max-aspect-ratio: 4/5) {
  .topo .dentro:has(.geeko--terminal) { padding-top: calc(var(--altura-cabecalho) + 0.5rem + 4.75rem); }
}

/* 2. espiando por cima da primeira pergunta, à direita: a beira do desenho (y 214) na beira de cima da lista */
.perguntas-r__lista { position: relative; }
.geeko--espia {
  --gk-w: clamp(6.5rem, 4rem + 6vw, 9rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: calc(100% - var(--gk-w) * 36 / 420);
  width: var(--gk-w);
}
.geeko--espia .gk-borda { display: none; }
/* em uma coluna, o título das perguntas fica logo acima da lista: a lista desce o quanto a cabeça sobe (~0,47 da
   largura do desenho) para a cabeça não cobrir o título; em duas colunas o título fica à esquerda */
@media (max-width: 63.99rem) { .perguntas-r__lista { margin-top: 2.75rem; } }

/* 3. de pé na beira de cima do cartão da chamada, à direita: os pés na beira; a ponta da seta chega ao canto do
   quadrado, que não passa da beira direita do cartão */
.geeko--seta {
  --gk-l: clamp(7.5rem, 4.5rem + 7vw, 11.5rem);
  right: max(0px, clamp(1rem, 3vw, 2rem) - var(--gk-l) * 0.2);
  bottom: calc(100% - var(--gk-l) * 0.03);
  width: var(--gk-l);
}

/* 4. o Geeko pixel (B4) ao lado do WhatsApp do rodapé: à direita no celular, embaixo da lista no PC; o laço do
   parado só roda à vista (geeko.js) */
.rodape-r__contato li { position: relative; }
.rodape-r__contato .pixel-geeko--rodape { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
@media (min-width: 48rem) {
  .rodape-r__contato .pixel-geeko--rodape { right: auto; left: 0; top: calc(100% + 3.25rem); translate: none; }
}

/* 5. o Geeko de headset no botão do WhatsApp: a cabeça passa um pouco da beira de cima do botão */
.zap-fixo__geeko { display: block; flex: none; width: 46px; height: 60px; max-width: none; margin: -22px -4px -4px -6px; }

/* 6. o Geeko pixel: a folha anda por quadros inteiros (steps), sempre em múltiplos de 64 px e sem suavizar */
.pixel-geeko { position: relative; display: block; width: var(--px, 64px); height: var(--px, 64px); overflow: hidden; pointer-events: none; }
.pixel-geeko[hidden] { display: none; }
.pixel-geeko__folha {
  display: block;
  width: calc(var(--px, 64px) * 8);
  height: var(--px, 64px);
  background: url(geeko/pixel/geeko-pixel-b1-64-folha.png) 0 0 / calc(var(--px, 64px) * 8) calc(var(--px, 64px) * 4) no-repeat;
  image-rendering: pixelated;
}
.pixel-geeko--b5 .pixel-geeko__folha { background-image: url(geeko/pixel/geeko-pixel-b2-64-folha.png); }
/* "carregando": num canto da janela (a tela grande da abertura) ou da tela do cartão (o laço do portfólio) */
.pixel-geeko--tela { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
.pixel-geeko--canto { position: absolute; z-index: 2; left: 0.75rem; bottom: 0.75rem; }
/* a 404: os dois andam pela beira de baixo do cartão, um atrás do outro */
.pixel-trilha { --px: 64px; position: relative; height: var(--px); margin-top: 1.75rem; overflow: hidden; container-type: inline-size; }
@media (min-width: 48rem) { .pixel-trilha { --px: 128px; } }
.pixel-trilha .pixel-geeko { position: absolute; left: 0; bottom: 0; }
.pixel-trilha .pixel-geeko--b5 { left: calc(var(--px) * 1.15); }

@media (prefers-reduced-motion: no-preference) {
  .geeko--terminal { translate: 0 10px; transition: opacity 0.45s var(--sai), translate 0.6s var(--sai); }
  .geeko--terminal.geeko--chegou { translate: none; }
  .cena-andou .geeko--terminal { transition-duration: 0.2s; }

  /* parado: respira, mexe a cauda e pisca */
  .geeko--ativo .gk-tronco { animation: gk-respira 3.2s ease-in-out infinite alternate; }
  .geeko--ativo .gk-cauda { animation: gk-cauda 2.4s ease-in-out infinite alternate; }
  .geeko--espia.geeko--ativo .gk-cauda { animation-name: gk-cauda-espia; }
  .geeko > svg.gk-pisca .gk-palpebra { animation: gk-pisca 0.14s ease-in-out; }
  .geeko > svg .gk-pupila { transition: transform 0.15s cubic-bezier(0.3, 1.5, 0.5, 1); }
  .geeko > svg .gk-cabeca { transition: transform 0.3s ease-out; }

  /* o espiando: as mãos chegam primeiro e o corpo sobe com um pulo; abaixa e volta ao passar o mouse */
  .geeko--espia > svg .gk-sobe { transform: translateY(200px); transition: transform 0.3s ease-in; }
  .geeko--espia > svg .gk-maos { opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; }
  .geeko--espia.geeko--subiu > svg .gk-sobe { transform: none; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s; }
  .geeko--espia.geeko--subiu > svg .gk-maos { opacity: 1; transform: none; transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .geeko--espia.geeko--subiu > svg.gk-acena .gk-sobe { animation: gk-abaixa 0.78s ease-in-out; }

  /* o Geeko pixel do rodapé: o parado (a linha 0 da folha) em laço leve, só à vista */
  .pixel-geeko--rodape.pixel-geeko--vivo .pixel-geeko__folha { animation: px-passo 1.2s steps(8) infinite; }

  /* o Geeko pixel anda (a linha 3 da folha, 8 quadros em 0,8 s): parado no lugar no "carregando", pela trilha na 404 */
  .pixel-geeko--anda .pixel-geeko__folha, .pixel-geeko--tela .pixel-geeko__folha, .pixel-geeko--canto .pixel-geeko__folha {
    background-position-y: calc(var(--px, 64px) * -3);
    animation: px-passo 0.8s steps(8) infinite;
  }
  .pixel-trilha .pixel-geeko--b5 { left: 0; }
  .pixel-trilha .pixel-geeko { animation: px-anda 9s linear infinite; }
  .pixel-trilha .pixel-geeko:first-child { animation-delay: -1.1s; }
}

@keyframes gk-respira { from { transform: none; } to { transform: scale(1.012, 1.025); } }
@keyframes gk-cauda { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes gk-cauda-espia { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes gk-pisca { 0%, 100% { transform: scaleY(0); } 50% { transform: scaleY(1); } }
@keyframes gk-abaixa {
  0%, 100% { transform: none; }
  35%, 55% { transform: translateY(70px); }
  80% { transform: translateY(-6px); }
}
@keyframes px-passo { to { transform: translateX(calc(var(--px, 64px) * -8)); } }
@keyframes px-anda { from { transform: translateX(calc(var(--px, 64px) * -1)); } to { transform: translateX(100cqw); } }