/* Reck English — animações do lobinho pet */

.pet{
  position:relative;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
  will-change:transform;
}
.pet-svg{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 22px rgba(255,43,78,.32));
  overflow:visible;
}

/* olhos seguem o cursor */
.pet .olho,
.pet .brilho{
  transform:translate(var(--olho-x,0),var(--olho-y,0));
  transition:transform .18s ease-out;
}

/* piscar */
.pet.piscando .olho{transform:scaleY(.08) translate(var(--olho-x,0),var(--olho-y,0))}
.pet.piscando .brilho{opacity:0}
.pet .olho{transform-origin:center;transition:transform .1s}

/* rabo abanando */
.pet .rabo{transform-origin:158px 128px;transition:transform .2s}
.pet.abanando .rabo{animation:rabo .28s ease-in-out infinite}
@keyframes rabo{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(-22deg)}
}

/* língua pra fora */
.pet .lingua{transition:opacity .18s,transform .18s;transform-origin:110px 136px}
.pet.lingua-fora .lingua{opacity:1;animation:lambe .9s ease-in-out infinite}
@keyframes lambe{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(2px) scaleY(1.15)}
}
.pet.lingua-fora .boca{opacity:.35}

/* orelha abaixada */
.pet .orelha{transform-origin:110px 78px;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.pet.orelha-baixa .orelha-e{transform:rotate(26deg) translateY(4px)}
.pet.orelha-baixa .orelha-d{transform:rotate(-26deg) translateY(4px)}
.pet.orelha-baixa .orelha-dentro-e{transform:rotate(26deg) translateY(4px);transform-origin:110px 78px}
.pet.orelha-baixa .orelha-dentro-d{transform:rotate(-26deg) translateY(4px);transform-origin:110px 78px}
.pet .orelha-dentro{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}

/* olhando para os lados */
.pet.olhando-esquerda .cabeca{transform:translateX(-4px) rotate(-2deg)}
.pet.olhando-direita .cabeca{transform:translateX(4px) rotate(2deg)}
.pet .cabeca{transform-origin:110px 120px;transition:transform .35s cubic-bezier(.3,.9,.3,1)}

/* ---------- estados ---------- */

/* parado: respira */
.pet.pet-parado .corpo{animation:respira 3.4s ease-in-out infinite;transform-origin:110px 150px}
@keyframes respira{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}

/* correndo: pula de um lado pro outro */
.pet.pet-correndo{animation:corre .55s ease-in-out infinite}
@keyframes corre{
  0%,100%{transform:translateX(0) translateY(0)}
  25%{transform:translateX(-9px) translateY(-7px)}
  50%{transform:translateX(0) translateY(0)}
  75%{transform:translateX(9px) translateY(-7px)}
}
.pet.pet-correndo .pata-e{animation:pataE .3s ease-in-out infinite}
.pet.pet-correndo .pata-d{animation:pataD .3s ease-in-out infinite}
@keyframes pataE{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pataD{0%,100%{transform:translateY(-5px)}50%{transform:translateY(0)}}

/* sentado */
.pet.pet-sentado .corpo{transform:translateY(6px) scaleY(.9);transform-origin:110px 170px;transition:transform .4s}
.pet.pet-sentado .pata-e{transform:translateY(-4px)}
.pet.pet-sentado .pata-d{transform:translateY(-4px)}

/* deitado */
.pet.pet-deitado{transform:translateY(14px) scaleY(.86)}
.pet.pet-deitado .cabeca{transform:translateY(8px) rotate(-3deg)}

/* comemorando: pula alto */
.pet.pet-comemora{animation:pulaAlto .62s cubic-bezier(.3,1.5,.5,1)}
@keyframes pulaAlto{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-26px) scale(1.05) rotate(-3deg)}
  70%{transform:translateY(-6px) scale(.98)}
  100%{transform:translateY(0) scale(1)}
}

/* triste: cabeça baixa, orelhas caídas */
.pet.pet-triste .cabeca{transform:translateY(7px) rotate(-2deg)}
.pet.pet-triste .orelha-e{transform:rotate(34deg) translateY(6px)}
.pet.pet-triste .orelha-d{transform:rotate(-34deg) translateY(6px)}
.pet.pet-triste .orelha-dentro-e{transform:rotate(34deg) translateY(6px);transform-origin:110px 78px}
.pet.pet-triste .orelha-dentro-d{transform:rotate(-34deg) translateY(6px);transform-origin:110px 78px}
.pet.pet-triste .sobrancelhas{transform:translateY(3px)}
.pet.pet-triste .sobrancelhas path:first-child{transform:rotate(9deg);transform-origin:92px 88px}
.pet.pet-triste .sobrancelhas path:last-child{transform:rotate(-9deg);transform-origin:128px 88px}
.pet .sobrancelhas path{transition:transform .3s}

/* ouvindo: orelhas em pé, atento */
.pet.pet-ouve .orelha-e{transform:rotate(-8deg) translateY(-3px)}
.pet.pet-ouve .orelha-d{transform:rotate(8deg) translateY(-3px)}
.pet.pet-ouve .orelha-dentro-e{transform:rotate(-8deg) translateY(-3px);transform-origin:110px 78px}
.pet.pet-ouve .orelha-dentro-d{transform:rotate(8deg) translateY(-3px);transform-origin:110px 78px}

/* luz de fundo pulsa */
.pet .luz{animation:luzPulsa 4s ease-in-out infinite}
@keyframes luzPulsa{
  0%,100%{opacity:.75}
  50%{opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .pet, .pet *{animation:none !important;transition:none !important}
}