/* Only the drawing moves: Pip's help button keeps a stable hit target. */
@media (prefers-reduced-motion: no-preference) {
  :is(.pip-react-arrival, .pip-react-wave, .pip-react-roll, .pip-react-tilt, .pip-react-stretch) .pip-character {
    transform-box: view-box;
    transform-origin: 40px 40px;
    animation: pip-idle-tilt 1200ms ease-in-out 1;
  }
  .pip-react-wave .pip-character { animation: pip-idle-wave-body 1400ms ease-in-out 1; }
  .pip-react-arrival .pip-character {
    transform-origin:40px 68px;
    animation:pip-arrival-bounce 2100ms ease-in-out 1;
  }
  .pip-react-arrival .pip-arm {
    transform-box:fill-box;
    animation:pip-arrival-left 2100ms ease-in-out 1;
  }
  .pip-react-arrival .pip-arm-right { animation-name:pip-arrival-wave; }
  .pip-react-arrival .pip-shadow {
    transform-box:fill-box;transform-origin:center;
    animation:pip-arrival-shadow 2100ms ease-in-out 1;
  }
  @keyframes pip-arrival-bounce {
    0%,100% { transform:translateY(0) rotate(0) scale(1); }
    9% { transform:translateY(2px) rotate(3deg) scale(1.08,.92); }
    23% { transform:translateY(-8px) rotate(-8deg) scale(.96,1.05); }
    36% { transform:translateY(1px) rotate(-3deg) scale(1.04,.96); }
    49% { transform:translateY(-5px) rotate(-7deg) scale(.98,1.03); }
    63% { transform:translateY(0) rotate(-3deg) scale(1); }
    80% { transform:translateY(-2px) rotate(-5deg) scale(1); }
    92% { transform:translateY(1px) rotate(2deg) scale(1.02,.98); }
  }
  @keyframes pip-arrival-wave {
    0%,100% { transform:rotate(0); }
    16%,36%,56%,76% { transform:rotate(-105deg); }
    26%,46%,66%,86% { transform:rotate(-28deg); }
  }
  @keyframes pip-arrival-left {
    0%,100% { transform:rotate(0); }
    23%,49% { transform:rotate(30deg); }
    36%,63% { transform:rotate(-12deg); }
    80% { transform:rotate(14deg); }
  }
  @keyframes pip-arrival-shadow {
    0%,36%,63%,100% { transform:scaleX(1);opacity:.16; }
    23% { transform:scaleX(.7);opacity:.08; }
    49%,80% { transform:scaleX(.85);opacity:.11; }
  }
  .pip-react-wave .pip-arm-right {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: pip-idle-wave-arm 1400ms ease-in-out 1;
  }
  .pip-react-roll .pip-character { animation: pip-idle-roll 1550ms cubic-bezier(.45,0,.3,1) 1; }
  .pip-react-roll .pip-shadow {
    transform-box: fill-box;
    transform-origin: center;
    animation: pip-idle-roll-shadow 1550ms ease-in-out 1;
  }
  .pip-react-stretch .pip-character {
    transform-origin: 40px 68px;
    animation: pip-idle-stretch 1400ms ease-in-out 1;
  }
  .pip-react-stretch .pip-arm {
    transform-box: fill-box;
    animation: pip-idle-stretch-left 1400ms ease-in-out 1;
  }
  .pip-react-stretch .pip-arm-right { animation-name: pip-idle-stretch-right; }
  @keyframes pip-idle-wave-body {
    0%,100% { transform: translateY(0) rotate(0); }
    24%,72% { transform: translateY(-2px) rotate(-4deg); }
    88% { transform: translateY(1px) rotate(1deg); }
  }
  @keyframes pip-idle-wave-arm {
    0%,100% { transform: rotate(0); }
    22%,49%,76% { transform: rotate(-72deg); }
    35%,62% { transform: rotate(-28deg); }
  }
  @keyframes pip-idle-tilt {
    0%,100% { transform: rotate(0) translateY(0); }
    35%,55% { transform: rotate(9deg) translateY(-1px); }
    82% { transform: rotate(-2deg) translateY(0); }
  }
  @keyframes pip-idle-roll {
    0% { transform: translate(0,0) rotate(0) scale(1); }
    16% { transform: translate(-3px,2px) rotate(-12deg) scale(1.03,.95); }
    44% { transform: translate(-3px,-4px) rotate(135deg) scale(.9); }
    73% { transform: translate(3px,-2px) rotate(330deg) scale(.94); }
    88% { transform: translate(0,2px) rotate(364deg) scale(1.03,.96); }
    100% { transform: translate(0,0) rotate(360deg) scale(1); }
  }
  @keyframes pip-idle-roll-shadow {
    0%,100% { transform: scaleX(1); opacity: .16; }
    44%,73% { transform: scaleX(.72); opacity: .08; }
    88% { transform: scaleX(1.05); opacity: .18; }
  }
  @keyframes pip-idle-stretch {
    0%,100% { transform: scale(1); }
    30%,55% { transform: scale(.95,1.06); }
    80% { transform: scale(1.02,.97); }
  }
  @keyframes pip-idle-stretch-left { 0%,100% { transform: rotate(0); } 30%,55% { transform: rotate(48deg); } }
  @keyframes pip-idle-stretch-right { 0%,100% { transform: rotate(0); } 30%,55% { transform: rotate(-48deg); } }
}