/* =============================================================================
   gato.css: o gato branco (o desenho e a física moram no js/gato.js).

   Cores em variáveis:
   - claro: pelo branco com traço cinza fino, para o gato aparecer no fundo creme;
   - escuro: o branco aparece sozinho; o traço fica claro e só separa as peças
     (pata na frente da barriga, por exemplo).
   Prefixo "gb-" (gato branco) em tudo: o site já tem .gato e .g-* do gato antigo.
   ============================================================================= */
.gb {
  --gb-pelo: #FFFFFF; --gb-traco: #A39DB3; --gb-rosa: #F2A3B6; --gb-rosa-dentro: #F8CCD7;
  --gb-olho: #2B2834; --gb-bochecha: rgba(242, 138, 163, .28); --gb-sombra: rgba(23, 21, 31, .15);
  --gb-zzz: #8A869B;
  position: fixed; left: 0; top: 0; z-index: 80; /* acima do narrador (72) e da doca (75), abaixo do véu da tela cheia (85) */
  width: 58px; height: 58px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; font: inherit;
  pointer-events: none;   /* a caixa NÃO pega clique; só o círculo .gb-alvo, que acompanha o gato */
  touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  will-change: transform;
}
:root[data-theme="dark"] .gb {
  --gb-pelo: #F7F5FC; --gb-traco: #CBC6D9; --gb-sombra: rgba(0, 0, 0, .55);
  --gb-zzz: #AAA6BD; --gb-bochecha: rgba(242, 138, 163, .34);
}
.gb:focus { outline: none; }
.gb:focus-visible { outline: 2px solid var(--acc, #6D5AE6); outline-offset: 2px; border-radius: 50%; }
.gb.gb-no-ar:focus-visible { outline-color: transparent; }   /* no ar o corpo estica para fora do anel: some até pousar */
.gb svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gb .gb-alvo { fill: none; pointer-events: all; cursor: grab; touch-action: none; }
.gb.gb-segurando .gb-alvo { cursor: grabbing; }

/* peças do desenho */
.gb-corpo, .gb-cabeca-forma, .gb-orelha { fill: var(--gb-pelo); stroke: var(--gb-traco); stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gb-orelha-dentro { fill: var(--gb-rosa-dentro); }
.gb-perna-traco, .gb-rabo-traco { stroke: var(--gb-traco); stroke-linecap: round; fill: none; }
.gb-perna-pelo, .gb-rabo-pelo { stroke: var(--gb-pelo); stroke-linecap: round; fill: none; }
.gb-rabo-traco { stroke-width: 9.2px; }
.gb-rabo-pelo { stroke-width: 6.4px; }
.gb-olho { fill: var(--gb-olho); }
.gb-brilho { fill: #FFFFFF; }
.gb-olhos-fechados { fill: none; stroke: var(--gb-olho); stroke-width: 1.3px; stroke-linecap: round; }
.gb-nariz { fill: var(--gb-rosa); }
.gb-boca { fill: none; stroke: var(--gb-olho); stroke-opacity: .55; stroke-width: .9px; stroke-linecap: round; }
.gb-boca-aberta { fill: #E98DA2; }
.gb-bochecha { fill: var(--gb-bochecha); }
.gb-bigode { fill: none; stroke: var(--gb-traco); stroke-width: .7px; stroke-linecap: round; opacity: .85; }
.gb-sombra { fill: var(--gb-sombra); }

/* atrás do balão (pendurado na borda, espiando pelo canto): uma camada abaixo do narrador (72),
   então o balão cobre o corpo e só a cabeça e as patas aparecem acima da borda */
.gb.gb-atras { z-index: 71; }

/* dormindo: o corpo "respira" (cresce um pouco e volta, 3 s por ciclo) */
.gb.gb-dormindo .gb-respira { transform-box: fill-box; transform-origin: 50% 100%; animation: gb-respira 3s ease-in-out infinite; }
@keyframes gb-respira { 50% { transform: scale(1.03, 1.05); } }

/* "zzz" quando dorme: um z de cada vez sobe em diagonal, cresce e some (ciclo de 2,5 s) */
.gb-zzz text { font: 700 10px "DM Mono", ui-monospace, Consolas, monospace; fill: var(--gb-zzz); opacity: 0; transform-box: fill-box; transform-origin: center; animation: gb-zzz 2.5s ease-out infinite; }
.gb-zzz text:nth-child(2) { animation-delay: .83s; }
.gb-zzz text:nth-child(3) { animation-delay: 1.66s; }

/* "miau" / "meow": balãozinho só visual perto da cabeça, por 1,5 s */
.gb-miau { position: fixed; left: 0; top: 0; z-index: 81; pointer-events: none; padding: 2px 8px; border-radius: 10px 10px 10px 3px;
  font: 500 11px "DM Mono", ui-monospace, Consolas, monospace; color: var(--tx2, #56526A); background: var(--sup, #FFFFFF);
  border: 1px solid var(--borda2, #D6D2CA); box-shadow: 0 4px 12px rgba(23, 21, 31, .08); opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .2s, transform .2s; }
.gb-miau.gb-miau-on { opacity: 1; transform: none; }
@keyframes gb-zzz {
  0% { opacity: 0; transform: translate(0, 4px) scale(.7); }
  30% { opacity: .95; }
  100% { opacity: 0; transform: translate(6px, -10px) scale(1.15); }
}

/* foto (?foto=1) e movimento reduzido: nada anima sozinho; os "z" ficam parados e visíveis */
.gb.gb-foto *, .gb.gb-calmo * { animation: none !important; }
.gb.gb-foto .gb-zzz text:first-child, .gb.gb-calmo .gb-zzz text:first-child { opacity: .9; }   /* no máximo um "z" parado */
@media (prefers-reduced-motion: reduce) {
  .gb * { animation: none !important; }
  .gb .gb-zzz text:first-child { opacity: .9; }
  .gb-miau { display: none; }
}