/* Species-accurate corner mascots. SVG stays in the DOM for the old
   animation hooks; the portrait is what the user sees. */

.pet-mascot--portrait {
  overflow: visible;
}

.pet-mascot--portrait .mascot-svg {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.pet-mascot--portrait .mascot-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
  animation: bt-mascot-idle 3.4s ease-in-out infinite;
}

.pet-mascot--portrait[data-asleep="1"] .mascot-portrait {
  animation: none;
  filter: grayscale(0.2) brightness(0.88) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

@keyframes bt-mascot-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-mascot--portrait .mascot-portrait {
    animation: none;
  }
}