/* Finite, presentation-only motion. The production PNG itself is unchanged. */
:root {--fx-pink:#f4a8bf;--fx-cream:#fff0c4;--fx-blue:#a8d9ee;--fx-purple:#cfb4ea;}
.pet-reaction {position:relative;overflow:hidden;isolation:isolate;contain:paint;}
.pet-reaction .pet-frame {animation:none!important;padding:10px;margin:8px auto;}
.pet-image {transform-origin:50% 80%;animation-duration:var(--reaction-duration);animation-delay:var(--reaction-delay);animation-timing-function:ease-in-out;animation-iteration-count:1;animation-fill-mode:both;user-select:none;-webkit-user-drag:none;}
.pet-reaction[data-motion=still] .pet-image {animation:none;}
.pet-reaction[data-motion=bounceSoft] .pet-image {animation-name:bounceSoft;}
.pet-reaction[data-motion=jumpPop] .pet-image {animation-name:jumpPop;}
.pet-reaction[data-motion=cheerSway] .pet-image {animation-name:cheerSway;}
.pet-reaction[data-motion=tilt] .pet-image {animation-name:thinkTilt;}
.pet-reaction[data-motion=shySway] .pet-image {animation-name:shySway;}
.pet-reaction[data-motion=tinyShake] .pet-image {animation-name:tinyShake;}
.pet-reaction[data-motion=droop] .pet-image {animation-name:sadDroop;}
.pet-reaction[data-motion=sleepyFloat] .pet-image {animation-name:sleepyFloat;}
.pet-reaction[data-motion=breathing] .pet-image {animation-name:sleepBreath;}
.pet-reaction[data-motion=readSway] .pet-image {animation-name:readSway;}
.pet-reaction[data-motion=focusedBob] .pet-image {animation-name:focusedBob;}
.pet-reaction[data-motion=creativeSway] .pet-image {animation-name:creativeSway;}
.pet-reaction[data-motion=rhythm] .pet-image {animation-name:pianoRhythm;}
.pet-reaction[data-motion=quickStep] .pet-image {animation-name:quickStep;}
.pet-reaction[data-motion=horizontalFloat] .pet-image {animation-name:horizontalFloat;}
.pet-reaction[data-motion=stageSway] .pet-image {animation-name:stageSway;}
.pet-reaction[data-motion=exercisePop] .pet-image {animation-name:exercisePop;}
.pet-reaction[data-motion=celebrate] .pet-image {animation-name:celebrate;}
@keyframes bounceSoft {0%,100%{transform:none}35%{transform:translateY(-5px)}60%{transform:translateY(1px) scale(.995)}}
@keyframes jumpPop {0%,100%{transform:none}27%{transform:translateY(-8px) scale(1.025)}54%{transform:translateY(1px) scale(.99)}}
@keyframes cheerSway {0%,100%{transform:none}25%{transform:rotate(-2deg) translateX(-2px)}60%{transform:rotate(2deg) translateX(2px)}}
@keyframes thinkTilt {0%,100%{transform:none}30%,68%{transform:rotate(-3deg)}}
@keyframes shySway {0%,100%{transform:none}40%{transform:translateX(-2px) rotate(-1deg) scale(.99)}}
@keyframes tinyShake {0%,45%,100%{transform:none}12%,32%{transform:translateX(-2px)}22%{transform:translateX(2px)}}
@keyframes sadDroop {0%,100%{transform:none}45%,65%{transform:translateY(4px) rotate(1deg) scale(.99)}}
@keyframes sleepyFloat {0%,100%{transform:none}55%{transform:translateY(3px) rotate(-.7deg)}}
@keyframes sleepBreath {0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}
@keyframes readSway {0%,100%{transform:none}50%{transform:rotate(.8deg)}}
@keyframes focusedBob {0%,100%{transform:none}35%{transform:translateY(2px) rotate(-.6deg)}}
@keyframes creativeSway {0%,100%{transform:none}30%{transform:rotate(-1deg)}65%{transform:rotate(1deg)}}
@keyframes pianoRhythm {0%,100%{transform:none}22%,65%{transform:translateX(-2px) rotate(-1deg)}43%,82%{transform:translateX(2px) rotate(1deg)}}
@keyframes quickStep {0%,100%{transform:none}25%{transform:translateX(5px) rotate(1.5deg)}45%{transform:translateX(-1px)}}
@keyframes horizontalFloat {0%,100%{transform:none}40%{transform:translateX(4px)}70%{transform:translateX(-3px)}}
@keyframes stageSway {0%,100%{transform:none}35%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}}
@keyframes exercisePop {0%,100%{transform:none}30%{transform:translateY(-6px) scale(1.02)}60%{transform:translateY(1px)}}
@keyframes celebrate {0%,100%{transform:none}20%{transform:translateY(-7px) rotate(-2deg) scale(1.03)}42%{transform:translateY(-3px) rotate(2deg)}70%{transform:scale(1.01)}}
.pet-fx-layer {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;}
.pet-particle {position:absolute;width:22px;height:22px;fill:var(--fx-pink);color:var(--fx-purple);animation:fxBloom var(--fx-duration) ease-out var(--reaction-delay) 1 both;}
.particle-0 {left:10%;top:25%;}.particle-1 {right:13%;top:16%;width:17px;height:17px;fill:var(--fx-purple);}.particle-2 {left:24%;top:10%;width:15px;height:15px;fill:var(--fx-cream);}.particle-3 {right:6%;top:40%;width:19px;height:19px;fill:var(--fx-cream);}.particle-4 {left:5%;top:52%;width:13px;height:13px;fill:var(--fx-blue);}
[data-fx=tinyHearts] .pet-particle {width:13px;height:13px;}
[data-fx=question] .pet-particle {left:auto;right:10%;top:12%;width:32px;height:32px;}
[data-fx=tear] .pet-particle {left:auto;right:23%;top:38%;width:15px;height:15px;fill:var(--fx-blue);animation-name:fxDroplet;}
[data-fx=droplets] .pet-particle {fill:var(--fx-blue);animation-name:fxDroplet;}
[data-fx=zzz] .pet-particle,[data-fx=smallZ] .pet-particle {left:auto;right:12%;top:20%;color:var(--fx-purple);}
[data-fx=zzz] .particle-1 {right:24%;top:12%;width:16px;height:16px;}[data-fx=zzz] .particle-2 {right:32%;top:5%;width:12px;height:12px;}
[data-fx=music] .pet-particle {fill:var(--fx-purple);}
[data-fx=emphasis] .pet-particle {left:auto;right:13%;top:20%;color:var(--fx-pink);}
[data-fx=confettiSparkles] .pet-particle {animation-name:fxConfetti;}
@keyframes fxBloom {0%{opacity:0;transform:scale(.75) translateY(3px)}25%,65%{opacity:.9}100%{opacity:0;transform:scale(1.05) translateY(-8px)}}
@keyframes fxDroplet {0%{opacity:0;transform:translateY(-3px) scale(.8)}30%{opacity:.85}100%{opacity:0;transform:translateY(9px) scale(1)}}
@keyframes fxConfetti {0%{opacity:0;transform:scale(.6) rotate(-10deg)}25%,65%{opacity:.9}100%{opacity:0;transform:translateY(10px) rotate(20deg)}}
.pet-unavailable .pet-fx-layer {display:none;}
.context-pet-slot {width:200px;max-width:100%;margin:auto;flex-shrink:0;}.context-pet-slot .pet-frame {width:200px;height:180px;}.context-pet-slot .pet-art {height:100%;width:100%;object-fit:contain;}
.daily-overview>.context-pet-slot {flex:0 0 150px;width:150px;}
.daily-overview .pet-frame {box-sizing:border-box;}.daily-overview .pet-art {height:100%;}
@media(max-width:767px){.daily-overview>.context-pet-slot {flex-basis:90px;width:90px;}.context-pet-slot .pet-frame {height:160px;}}
@media(prefers-reduced-motion:reduce){.pet-reaction .pet-image,.pet-particle {animation:none!important;transform:none!important;}.pet-particle {opacity:.7;}}
body[data-animations=off] .pet-reaction .pet-image,body[data-animations=off] .pet-particle {animation:none!important;transform:none!important;}body[data-animations=off] .pet-particle {opacity:.7;}