/* Shared Shu artwork, with the current native walk/spin/jump motion.
   Static landing previews share these frame rules with the real app. */
.shu-av{display:inline-block;flex:none;line-height:0;background-repeat:no-repeat;
  background-position:0 0;position:relative;
  image-rendering:pixelated;image-rendering:crisp-edges;border-radius:0;overflow:visible}
.shu-av::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;background-position:0 0;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:hue-rotate(calc(var(--shu-hue,246.1deg) - 246.1deg)) saturate(var(--shu-sat,1))}
/* steps(N, jump-none) — N stops, one per frame. steps(N-1, jump-none) gives N-1 stops:
   for four frames that is 0%, 50%, 100%, so it showed frame 1, a point halfway BETWEEN
   frames 2 and 3, then frame 4. That half-frame is what looked like him sliding left. */
.shu-sit{background-image:url('/img/shu-sit-base.png?v=f7b8bf87');background-size:100% 100%}
.shu-sit::after{background-image:url('/img/shu-sit-tint.png?v=00f309c6');background-size:100% 100%}
.shu-chill{background-image:url('/img/shu-chill-base.png?v=a0673ed1');background-size:100% 100%}
.shu-chill::after{background-image:url('/img/shu-chill-tint.png?v=0c3be81b');background-size:100% 100%}
.shu-run{background-image:url('/img/shu-run-base.png?v=f8fcb2e0');background-size:400% 100%;
  animation:shuStep .48s steps(4,jump-none) infinite}
.shu-run::after{background-image:url('/img/shu-run-tint.png?v=714496b4');background-size:400% 100%;
  animation:shuStep .48s steps(4,jump-none) infinite}
.shu-spin{background-image:url('/img/shu-spin-base.png?v=4a7ba1ed');background-size:700% 100%;
  animation:shuStep .70s steps(7,jump-none) infinite}
.shu-spin::after{background-image:url('/img/shu-spin-tint.png?v=adab1c12');background-size:700% 100%;
  animation:shuStep .70s steps(7,jump-none) infinite}
@keyframes shuStep{from{background-position-x:0%}to{background-position-x:100%}}
@media(prefers-reduced-motion:reduce){
  .shu-chill,.shu-chill::after{animation:none}
  .shu-run:not(.shu-pet-frame),.shu-spin:not(.shu-pet-frame){animation:none;background-size:100% 100%;background-position:0 0;background-image:url('/img/shu-sit-base.png?v=f7b8bf87')}
  .shu-run:not(.shu-pet-frame)::after,.shu-spin:not(.shu-pet-frame)::after{animation:none;background-size:100% 100%;background-position:0 0;background-image:url('/img/shu-sit-tint.png?v=00f309c6')}
}

@keyframes shuHop{
  0%   {transform:translateY(var(--shu-base,0px));
        animation-timing-function:cubic-bezier(.15,.75,.4,1)}
  /* The apex sits at 50%, exactly where steps(4) crosses from the second frame to the
     third — so the two rise frames play on the way up and the two fall frames on the way
     down, instead of the sprite changing state a beat before he turns over. */
  50%  {transform:translateY(calc(var(--shu-base,0px) - var(--shu-hop,18px)));
        animation-timing-function:cubic-bezier(.62,0,.86,.4)}
  100% {transform:translateY(var(--shu-base,0px))}
}
/* He has to be able to leave the card he is standing on. */
.hi-card.hh-ask.shu-hopping{overflow:visible}
/* z-index ONLY. position:relative here put the perch back into normal flow — it is
   absolutely positioned, so the taller jump box started taking up real space and the
   composer grew and shoved the page down under him mid-hop. */
.shu-jump{z-index:4}
/* forwards on the frames: without it the finished animation reverts to its 0% position for
   the moment before the class comes off, which shows as a single standing frame on landing. */
/* Its own keyframes name, not shuStep. Chill steps its frames with shuStep too, and a class
   swap that keeps an animation's name keeps the running animation: the jump inherited the
   seconds chill had already run, finished on the spot, and leapt on its last frame. */
@keyframes shuJumpStep{from{background-position-x:0%}to{background-position-x:100%}}
.shu-jump{background-image:url('/img/shu-jump-base.png?v=70d5f89f');background-size:400% 100%;
  animation:shuJumpStep var(--shu-hop-dur,620ms) steps(4,jump-none) 1 forwards,
            shuHop var(--shu-hop-dur,620ms) 1 forwards}
.shu-jump::after{background-image:url('/img/shu-jump-tint.png?v=8ccc454b');background-size:400% 100%;
  animation:shuJumpStep var(--shu-hop-dur,620ms) steps(4,jump-none) 1 forwards}
@media(prefers-reduced-motion:reduce){.shu-jump,.shu-jump::after{animation:none}}
/* No tap highlight: on a touch screen the browser's default paints a 40% blue box over
   whatever was tapped, and over a sprite that size it washes him out for the whole hop. */
.hh-shu-perch{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Pet travel keeps the native 20px cell and feet anchor, without redrawing or
   stretching Shu. The movement clock advances both artwork layers together. */
.shu-av.shu-pet-frame{position:absolute;left:8.333333%;width:83.333333%}
.shu-av.shu-pet-frame,.shu-av.shu-pet-frame::after{animation:none;
  background-position:var(--shu-pet-position,0%) 0;filter:none}
/* GIF emotes use the same native 20px artwork. Keep those pixels sharp in the
   Customize grid, picker, reactions, and inline messages as well as avatars. */
img[src*="/img/shu-"],img[src*="/brand/shu/"]{image-rendering:crisp-edges;image-rendering:pixelated}