/* Stationary basketball chat avatar. A set-pose frame leads into the release frame,
   while the separate ball continues through the hoop. */
.avatarWalker {
  left: auto;
  right: 18px;
  bottom: 8px;
  width: 200px;
  height: 220px;
  animation: none;
  filter: none;
  overflow: visible;
}

.avatarWalker img {
  z-index: 2;
  position: absolute;
  left: 2px;
  bottom: 8px;
  width: 137px;
  height: 200px;
  object-fit: contain;
  object-position: center bottom;
  scale: -1 1;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 12px 13px #14041e73);
}

.avatarWalker img.avatarSetPose {
  opacity: 0;
}

.avatarWalker img.avatarReleasePose {
  opacity: 1;
}

.avatarWalker.avatarBasketballReady img.avatarSetPose {
  animation: stambeBasketballSet 4.8s cubic-bezier(.45, 0, .3, 1) infinite;
}

.avatarWalker.avatarBasketballReady img.avatarReleasePose {
  animation: stambeBasketballRelease 4.8s cubic-bezier(.45, 0, .3, 1) infinite;
}

.avatarWalker::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: -14px;
  right: 2px;
  width: 52px;
  height: 56px;
  border-radius: 4px 4px 12px 12px;
  background:
    linear-gradient(#f8f2ff, #f8f2ff) 50% 8px / 22px 2px no-repeat,
    linear-gradient(#f8f2ff, #f8f2ff) calc(50% - 10px) 8px / 2px 15px no-repeat,
    linear-gradient(#f8f2ff, #f8f2ff) calc(50% + 10px) 8px / 2px 15px no-repeat,
    linear-gradient(#f8f2ff, #f8f2ff) 50% 21px / 22px 2px no-repeat,
    linear-gradient(#ff8b2b, #ff8b2b) 50% 29px / 46px 4px no-repeat,
    repeating-linear-gradient(60deg, transparent 0 7px, #ffffff8a 7px 9px) 50% 100% / 43px 25px no-repeat,
    repeating-linear-gradient(120deg, transparent 0 7px, #ffffff8a 7px 9px) 50% 100% / 43px 25px no-repeat,
    linear-gradient(#f8f2ff, #f8f2ff) 0 0 / 100% 4px no-repeat,
    linear-gradient(#f8f2ff, #f8f2ff) 0 0 / 4px 31px no-repeat,
    linear-gradient(#f8f2ff, #f8f2ff) 100% 0 / 4px 31px no-repeat,
    linear-gradient(135deg, #6920a8cc, #35104fe6) 0 0 / 100% 31px no-repeat;
  filter: drop-shadow(0 8px 9px #14041e59);
}

.avatarWalker::after {
  content: "";
  z-index: 3;
  position: absolute;
  top: 8px;
  left: 86px;
  width: 25px;
  height: 25px;
  border: 1.5px solid #642709;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 24%, #ffd889 0 8%, transparent 9%),
    radial-gradient(circle at -14% 50%, transparent 0 62%, #6b290c 63% 68%, transparent 69%),
    radial-gradient(circle at 114% 50%, transparent 0 62%, #6b290c 63% 68%, transparent 69%),
    linear-gradient(90deg, transparent 46%, #6b290c 47% 53%, transparent 54%),
    radial-gradient(circle at 35% 28%, #ffa143 0 28%, #ed741c 56%, #b9460c 100%);
  box-shadow:
    inset -3px -4px 5px #7c26085c,
    0 5px 9px #14041e66;
  transform-origin: center;
  opacity: 0;
}

.avatarWalker.avatarBasketballReady::after {
  animation: stambeBasketballBall 4.8s cubic-bezier(.32, .05, .28, 1) infinite;
}

.avatarWalker span {
  z-index: 4;
  left: 68px;
  bottom: 2px;
  animation: none;
}

@keyframes stambeBasketballSet {
  0%, 8%, 72%, 100% { opacity: 1; transform: translateY(0) rotate(0); }
  12% { opacity: 1; transform: translateY(6px) rotate(-1deg) scaleY(.975); }
  15%, 67% { opacity: 0; transform: translateY(5px) rotate(-1deg) scaleY(.98); }
  70% { opacity: 1; transform: translateY(1px) rotate(0); }
}

@keyframes stambeBasketballRelease {
  0%, 11%, 70%, 100% { opacity: 0; transform: translateY(6px) rotate(-1deg) scaleY(.975); }
  14% { opacity: 1; transform: translateY(3px) rotate(0) scaleY(.99); }
  23%, 38% { opacity: 1; transform: translateY(-10px) rotate(1deg); }
  53% { opacity: 1; transform: translateY(1px) rotate(0); }
  62% { opacity: 1; transform: translateY(-2px); }
  67% { opacity: 0; transform: translateY(0); }
}

@keyframes stambeBasketballBall {
  0%, 12% { opacity: 0; transform: translate(-2px, 18px) rotate(0) scale(.96); }
  14% { opacity: 1; transform: translate(-2px, 18px) rotate(0) scale(.96); }
  20% { opacity: 1; transform: translate(1px, 0) rotate(55deg) scale(1); }
  37% { opacity: 1; transform: translate(50px, -45px) rotate(205deg) scale(1.02); }
  50% { opacity: 1; transform: translate(74px, 4px) rotate(365deg) scale(1); }
  57% { opacity: 1; transform: translate(74px, 31px) rotate(455deg) scale(.92); }
  60%, 100% { opacity: 0; transform: translate(74px, 38px) rotate(500deg) scale(.88); }
}

@media (prefers-reduced-motion: reduce) {
  .avatarWalker img {
    animation: none !important;
  }

  .avatarWalker img.avatarSetPose {
    display: none;
  }

  .avatarWalker img.avatarReleasePose {
    opacity: 1;
    transform: none;
  }

  .avatarWalker::after {
    animation: none !important;
    opacity: 1;
    transform: translate(-2px, 18px);
  }
}

@media (width <= 620px) {
  .avatarWalker {
    right: 6px;
    bottom: 5px;
    width: 155px;
    height: 176px;
  }

  .avatarWalker img {
    left: 0;
    bottom: 7px;
    width: 108px;
    height: 158px;
  }

  .avatarWalker::before {
    top: -16px;
    right: 2px;
    width: 42px;
    height: 45px;
    background-size:
      18px 2px,
      2px 12px,
      2px 12px,
      18px 2px,
      37px 3px,
      35px 20px,
      35px 20px,
      100% 3px,
      3px 25px,
      3px 25px,
      100% 25px;
    background-position:
      50% 6px,
      calc(50% - 8px) 6px,
      calc(50% + 8px) 6px,
      50% 17px,
      50% 23px,
      50% 100%,
      50% 100%,
      0 0,
      0 0,
      100% 0,
      0 0;
  }

  .avatarWalker::after {
    top: 8px;
    left: 67px;
    width: 20px;
    height: 20px;
  }

  .avatarWalker span {
    left: 54px;
    bottom: 1px;
  }

  @keyframes stambeBasketballBall {
    0%, 12% { opacity: 0; transform: translate(-2px, 14px) rotate(0) scale(.96); }
    14% { opacity: 1; transform: translate(-2px, 14px) rotate(0) scale(.96); }
    20% { opacity: 1; transform: translate(0, 0) rotate(55deg) scale(1); }
    37% { opacity: 1; transform: translate(38px, -35px) rotate(205deg) scale(1.02); }
    50% { opacity: 1; transform: translate(56px, 2px) rotate(365deg) scale(1); }
    57% { opacity: 1; transform: translate(56px, 25px) rotate(455deg) scale(.92); }
    60%, 100% { opacity: 0; transform: translate(56px, 31px) rotate(500deg) scale(.88); }
  }
}