/* ============ O PET (23/jul) ================================================
   UM bicho so, UM token de tamanho - antes eram 4 esferas em 3 recipientes
   (74px no visor, 52px no celular, 38px na pilula, 44px no site), e era isso
   que o Michel lia como "as vezes quadrado grande, as vezes pequeno".

   Regra 1: o bicho NUNCA mora dentro de uma caixa. Ele flutua sobre o fundo
   claro, e o tinta sobrevive so no balao de fala ao lado - que e onde
   a pastilha lemon do "ai" tem o contraste de que precisa.
   Regra 2: o tamanho vem SO de --pet-sz. Tres valores oficiais e mais nenhum:
   36 (encolhido ao rolar, porta de entrada) / 48 (padrao) / 72 (visor, desktop).
   Regra 3: a esfera e a MESMA de sempre (anel conico + nucleo teal
   respirando; decisao de 22/jul). O que entrou foi a camada de vida.

   Unica mudanca no desenho: o brilho especular saiu de dentro do gradiente do
   nucleo e virou camada propria (.qz-bicho-olho) pra poder se mexer. Parado,
   ele cai exatamente em 34%/30% - o ponto de hoje.
   Tudo transform/opacity (GPU). Estudo em estudos/pet-ai/.
   Knobs: --pet-sz | data-estado | data-olhar

   30/jul: este bloco morava em quiz.css e veio pra arquivo proprio junto com o
   componente (Bicho.jsx, que importa este css) - a porta de entrada tambem
   desenha o pet e nao podia carregar o quiz.css inteiro por isso. O espelho
   estatico do SITE segue em site/assets/styles.css (mexeu aqui, mexa la).
   ========================================================================= */
.qz-bicho{
  --pet-sz:48px;
  --pet-giro:7s;      /* volta do anel */
  --pet-resp:4.2s;    /* respiracao do nucleo */
  --pet-ox:-16%;      /* olhar */
  --pet-oy:-20%;
  --pet-luz:1;
  position:relative;display:block;flex:0 0 auto;
  width:var(--pet-sz);height:var(--pet-sz);
  contain:layout paint style}
.qz-bicho>i{position:absolute;border-radius:50%;display:block}
.qz-bicho-anel{inset:0;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,184,77,.85) 74%,rgba(15,181,166,.9) 86%,transparent 96%);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%);
  animation:qz-pet-gira var(--pet-giro) linear infinite;will-change:transform}
.qz-bicho-nucleo{inset:15%;
  background:radial-gradient(circle at 50% 47%,#19cfbd 0%,#0FB5A6 44%,#0a5c55 100%);
  animation:qz-pet-resp var(--pet-resp) ease-in-out infinite;will-change:transform}
.qz-bicho-olho{inset:15%;transform:translate(var(--pet-ox),var(--pet-oy));
  transition:transform .55s cubic-bezier(.22,.9,.24,1)}
.qz-bicho-olho b{position:absolute;left:50%;top:50%;width:54%;height:54%;margin:-27% 0 0 -27%;
  border-radius:50%;transform-origin:50% 50%;opacity:var(--pet-luz);
  background:radial-gradient(circle,rgba(233,255,251,.98) 0%,rgba(197,255,246,.6) 40%,rgba(197,255,246,0) 72%);
  animation:qz-pet-pisca 7.5s ease-in-out infinite}
@keyframes qz-pet-gira{to{transform:rotate(360deg)}}
@keyframes qz-pet-resp{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes qz-pet-pisca{0%,89%,100%{transform:scaleY(1)}92%{transform:scaleY(.16)}95%{transform:scaleY(1)}}
/* olhar solto: 3 pousos lentos, nunca no centro - centro parece morto */
.qz-bicho[data-olhar="auto"] .qz-bicho-olho{animation:qz-pet-olhar 11s ease-in-out infinite}
/* olhar SEGUE (28/jul): o JS injeta --pet-ox/oy pelo ponteiro; sem keyframe,
   o transform base + transition de .55s fazem o olho acompanhar macio */
.qz-bicho[data-olhar="segue"] .qz-bicho-olho{animation:none}
/* cutucavel: o pulinho ja existe (comemora); o cursor convida */
.qz-bicho{cursor:pointer}
@keyframes qz-pet-olhar{
  0%,24%{transform:translate(-16%,-20%)}
  32%,50%{transform:translate(7%,-13%)}
  58%,76%{transform:translate(-9%,5%)}
  84%,100%{transform:translate(-16%,-20%)}}

/* --- estados: cada um responde a algo que a pessoa fez --- */
.qz-bicho[data-estado="pensando"]{--pet-giro:2.1s;--pet-resp:2.4s}
.qz-bicho[data-estado="pensando"] .qz-bicho-olho{animation:qz-pet-vaga 2.4s ease-in-out infinite}
@keyframes qz-pet-vaga{0%,100%{transform:translate(-15%,-16%)}50%{transform:translate(12%,-6%)}}
.qz-bicho[data-estado="achou"]{animation:qz-pet-acena .62s cubic-bezier(.3,1.5,.4,1)}
.qz-bicho[data-estado="achou"] .qz-bicho-anel{animation:qz-pet-gira 1.6s linear infinite,qz-pet-brilha .62s ease}
@keyframes qz-pet-acena{0%,100%{transform:translateY(0)}34%{transform:translateY(-16%)}68%{transform:translateY(3%)}}
@keyframes qz-pet-brilha{0%,100%{filter:none}40%{filter:brightness(1.7) saturate(1.3)}}
.qz-bicho[data-estado="fechando"]{--pet-giro:12s;--pet-resp:3.1s}
.qz-bicho[data-estado="fechando"] .qz-bicho-nucleo{
  background:radial-gradient(circle at 50% 47%,#22e0cb 0%,#0FB5A6 38%,#08504a 100%)}
.qz-bicho[data-estado="comemora"]{animation:qz-pet-pula 1.05s cubic-bezier(.3,1.4,.4,1)}
@keyframes qz-pet-pula{0%,100%{transform:translateY(0) scale(1)}
  22%{transform:translateY(-26%) scale(1.04)}44%{transform:translateY(0) scale(.98)}
  64%{transform:translateY(-13%) scale(1.02)}82%{transform:translateY(0) scale(1)}}
/* cochilo aos 25s parados: e o truque mais barato que existe pra parecer vivo -
   ele desacelera sozinho e acorda no primeiro toque. */
.qz-bicho[data-estado="cochilo"]{--pet-giro:18s;--pet-resp:7.5s;--pet-luz:.4}
.qz-bicho[data-estado="cochilo"] .qz-bicho-olho b{animation:none;transform:scaleY(.3)}
@media (prefers-reduced-motion:reduce){
  .qz-bicho,.qz-bicho *{animation:none!important}
  .qz-bicho-olho{transition:none}
}