/* Battle Pet identity art. Appearance is participant-local Battle Pet state, while the global shell remains faction-themed. */
body[data-page="pet"] .compact-pet-art{
  position:relative;
  isolation:isolate;
  background-color:transparent!important;
  background-image:none!important;
  image-rendering:pixelated;
}

body[data-page="pet"] .compact-pet-art::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:4%;
  background-image:var(--art-battle-pet-default, url("assets/pets/battle-pet-sprite.webp"));
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  filter:var(--pet-appearance-filter, none);
  image-rendering:pixelated;
  pointer-events:none;
}

body[data-page="pet"]:not([data-pet-view]) .compact-pet-art::before{
  inset:7%;
  background-size:contain;
  transform-origin:center 78%;
  animation:battle-pet-overview-idle 3.2s ease-in-out infinite;
}

@keyframes battle-pet-overview-idle{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-3px) rotate(1.2deg)}
}

@media(prefers-reduced-motion:reduce){
  body[data-page="pet"]:not([data-pet-view]) .compact-pet-art::before{animation:none}
}

body[data-page="pet"] .compact-pet-art::after{
  content:"";
  position:absolute;
  z-index:0;
  left:12%;
  right:12%;
  bottom:10%;
  height:28%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--active-faction) 20%,transparent),transparent 68%);
  filter:blur(8px);
  opacity:.7;
  pointer-events:none;
}

body[data-page="pet"] .compact-pet-art .team-insignia,
body[data-page="pet"] .compact-pet-art>span{
  display:none!important;
}