/* ==========================================================
   LE P'TIT MOTIVATEUR — P'TIT LOUP AVATAR V4 SAFE
   Spritesheet + mouvements CSS légers.
   ========================================================== */

.lpm-pet,
[data-lpm-pet]{
  position:relative;
  display:block;
  width:var(--pet-size,192px);
  aspect-ratio:12/13;
  background-image:url("ptit-loup-spritesheet.webp");
  background-repeat:no-repeat;
  background-size:800% 1100%;
  background-position:0 0;
  filter:drop-shadow(0 10px 9px rgba(0,27,23,.18));
  image-rendering:auto;
  transform-origin:50% 84%;
  contain:layout paint style;
  backface-visibility:hidden;
}

:is(.lpm-pet,[data-lpm-pet])[data-pet-state="idle"],
:is(.lpm-pet,[data-lpm-pet])[data-pet-state="waiting"]{
  animation:lpm-pet-breathe 3.8s ease-in-out infinite;
}

:is(.lpm-pet,[data-lpm-pet])[data-pet-state="jumping"]{
  animation:lpm-pet-joy 1.08s cubic-bezier(.34,.94,.58,1) infinite;
}

:is(.lpm-pet,[data-lpm-pet])[data-pet-state="waving"]{
  animation:lpm-pet-wave 1.2s ease-in-out infinite;
}

:is(.lpm-pet,[data-lpm-pet])[data-pet-state="review"],
:is(.lpm-pet,[data-lpm-pet])[data-pet-state="running"],
:is(.lpm-pet,[data-lpm-pet])[data-pet-state="running-right"],
:is(.lpm-pet,[data-lpm-pet])[data-pet-state="running-left"]{
  animation:lpm-pet-focus 1.9s ease-in-out infinite;
}

:is(.lpm-pet,[data-lpm-pet])[data-pet-state="failed"]{
  animation:lpm-pet-soften 1.6s ease-in-out infinite;
}

.pet-avatar-shell{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.pet-avatar-shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(128,255,235,.32),transparent 68%);
  filter:blur(5px);
  animation:lpm-aura 3.4s ease-in-out infinite;
}

.pet-avatar-shell.is-celebrating::after{
  content:"✦  ✦  ✦";
  position:absolute;
  top:4%;
  width:126%;
  color:#f7d56d;
  font-size:20px;
  letter-spacing:14px;
  text-align:center;
  animation:lpm-sparkle .9s ease-out infinite alternate;
}

.pet-prop{
  position:absolute;
  z-index:4;
  display:grid;
  place-items:center;
  pointer-events:none;
  font-size:clamp(24px,3vw,38px);
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.18));
}

.pet-prop--treat{right:4%;bottom:18%;animation:lpm-treat 1.35s cubic-bezier(.25,.8,.3,1) infinite}
.pet-prop--play{right:-2%;bottom:15%;animation:lpm-yarn 1.1s ease-in-out infinite}
.pet-prop--cuddle{right:2%;top:17%;animation:lpm-heart 1.2s cubic-bezier(.2,.9,.25,1) infinite}

.pet-habitat{
  position:absolute;
  z-index:-1;
  inset:8% 7% 4%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.23);
  border-radius:47% 47% 40% 40%;
  background:radial-gradient(circle at 50% 38%,rgba(33,252,220,.13),transparent 58%);
}

@keyframes lpm-pet-breathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.012)}
}
@keyframes lpm-pet-joy{
  0%,100%{transform:translateY(0) rotate(0)}
  45%{transform:translateY(-6px) rotate(-1deg)}
  70%{transform:translateY(-2px) rotate(1deg)}
}
@keyframes lpm-pet-wave{
  0%,100%{transform:rotate(0) translateY(0)}
  40%{transform:rotate(-1.5deg) translateY(-2px)}
  70%{transform:rotate(1deg) translateY(-1px)}
}
@keyframes lpm-pet-focus{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(2px)}
}
@keyframes lpm-pet-soften{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(2px);opacity:.94}
}
@keyframes lpm-aura{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}
@keyframes lpm-sparkle{from{transform:translateY(3px);opacity:.55}to{transform:translateY(-3px);opacity:1}}
@keyframes lpm-treat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes lpm-yarn{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes lpm-heart{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.06);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .lpm-pet,
  [data-lpm-pet],
  .pet-avatar-shell::before,
  .pet-avatar-shell::after,
  .pet-prop{
    animation:none!important;
    transform:none!important;
  }
}