/* a mesma arte em duas camadas: o corpo fica parado e a cabeça gira pelo pescoço */
.mascote { position: relative; display: inline-block; flex: none; width: var(--t, 120px); aspect-ratio: 210 / 233;
           animation: mascote-flutua 6s ease-in-out infinite; }
.mascote img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.mascote .corpo { clip-path: polygon(0 38%, 19% 38%, 26% 48%, 27% 58%, 100% 58%, 100% 100%, 0 100%); }
.mascote .cabeca { clip-path: polygon(15% 0, 100% 0, 100% 64%, 22% 64%, 21% 48%, 15% 40%);
                   transform-origin: 50% 63%; animation: mascote-cabeca 4.8s ease-in-out infinite; }
@keyframes mascote-cabeca {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-4deg); }
  34% { transform: rotate(-3deg) translateY(-1%); }
  52% { transform: rotate(3deg); }
  68% { transform: rotate(4deg) translateY(-1%); }
  84% { transform: rotate(0); }
}
@keyframes mascote-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }
/* comemoração: pula e balança a cabeça um pouco, depois volta ao normal */
.mascote.feliz { animation: mascote-pula .9s ease-out 2, mascote-flutua 6s ease-in-out 1.8s infinite; }
.mascote.feliz .cabeca { animation: mascote-sim .45s ease-in-out 4, mascote-cabeca 4.8s ease-in-out 1.8s infinite; }
@keyframes mascote-pula { 0%, 100% { transform: none; } 30% { transform: translateY(-14%); } 55% { transform: scale(1.03, .97); } }
@keyframes mascote-sim { 0%, 100% { transform: none; } 50% { transform: rotate(3deg) translateY(3%); } }
@media (prefers-reduced-motion: reduce) { .mascote, .mascote .cabeca, .mascote.feliz, .mascote.feliz .cabeca { animation: none; } }