@keyframes panda-wave {
    0% {
        transform: rotate(125deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(125deg);
    }
}
@keyframes panda-arm {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(125deg);
    }
}
[data-controller="panda"] {
    max-height: 450px;
}

#Panda {
    transition: transform 250ms cubic-bezier(1.000, 0.000, 0.000, 1.000) 200ms;
    transform-origin: bottom center;
}
.Belly #Panda {
    transform: rotate(12deg);
}
#Head {
    transition: transform 200ms cubic-bezier(0.680, -0.8, 0.265, 1.8) 150ms;
    transform-origin: center center;
}
.Belly #Head {
    transform: rotate(19deg);
}
.sigh #Head {
    transition: transform 200ms ease-out 150ms;
    transform: rotate(7deg);
}
.sigh #Head {
    transition: transform 200ms ease-out 150ms;
    transform: rotate(7deg);
}

#right-Arm {
    transition: transform 150ms ease-in;
    transform-origin: 350px 600px;
}
.Belly #right-Arm {
    transform: rotate(125deg);
}
.Belly.Wave #right-Arm {
    animation-name: panda-wave;
    animation-duration: 200ms;
    animation-iteration-count: 6;
    animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
}
#right-pupil {
    transition: transform 150ms ease-in;
    transform: translate(1px, 7px);
}
.nose #right-pupil {
    transform: translate(5px, 11px);
}
.sigh #right-pupil {
    transform: translate(0px, -11px);
}
.left-ear #right-pupil {
    transform: translate(7px, 0px);
}
.right-ear #right-pupil {
    transform: translate(-3px, -2px);
}
#left-pupil {
    transition: transform 150ms ease-in;
    transform: translate(-1px, 7px);
}
.nose #left-pupil {
    transform: translate(-5px, 11px);
}
.sigh #left-pupil {
    transform: translate(0px, -11px);
}
.left-ear #left-pupil {
    transform: translate(2px, -1px);
}
.right-ear #left-pupil {
    transform: translate(-5px, -1px);
}
