@keyframes avatarBump1 {
  0% {
    transform: translate(-50%, -50%);
    animation-timing-function: ease-in-out;
  }

  10% {
    transform: translate(-50%, calc(-50% + 4px));
  }

  100% {
    transform: translate(-50%, -50%);
  }
}

/* exact duplicate of the other, so when i toggle between the classes, it resets the animation. why doesn't CSS let you reset one-shot animations?? */
@keyframes avatarBump2 {
  0% {
    transform: translate(-50%, -50%);
    animation-timing-function: ease-in-out;
  }

  10% {
    transform: translate(-50%, calc(-50% + 4px));
  }

  100% {
    transform: translate(-50%, -50%);
  }
}

.userAvatar {
  pointer-events: none;
  transition: top var(--move-duration), left var(--move-duration);
  /* when moving around. */
  position: absolute;
  transform: translate(-50%, -50%);
  /* this puts the "origin" of the element in the center. */
  transform-origin: center;
  --bounce-anim: avatarBump1;
  z-index: var(--z-index-avatar);
  animation: var(--bounce-anim) .2s 1;
  /*, var(--dance-anim) 1s infinite;*/
  max-width: 285px;
  /* overflow: hidden; */
}

.userAvatar .av2 {
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding: 7px;
  background-color: rgba(0, 0, 0, .5);
  text-align: center;
  filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, .7));
  /* --dance-anim: dance0;
  --dance-anim-duration: var(--dance1-duration); */
  transform-origin: center;
  /* animation: var(--dance-anim) var(--dance-anim-duration) infinite; */
}

.userAvatar.me {
  z-index: var(--z-index-avatar-me);
}

.userAvatar.me .av2 {
  border-top-width: 10px;
}

.userAvatar .userAvatarInstrument {
  overflow: hidden;
}

.userAvatar .userAvatarInstrument button {
  pointer-events: all;
}



@keyframes dance_skewy {
  0% {
    transform: rotateZ(10deg) skewX(var(--dance-skew));
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }

  25% {
    transform: rotateZ(-10deg) skewX(var(--dance-skewN));
    animation-timing-function: ease-out;
  }

  50% {
    transform: rotateZ(10deg) skewY(var(--dance-skewN));
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }

  75% {
    transform: rotateZ(-10deg) skewY(var(--dance-skew));
    animation-timing-function: ease-out;
  }

  100% {
    transform: rotateZ(10deg) skewX(var(--dance-skew));
  }
}




@keyframes dance_bouncey {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.1, 1);
  }

  50% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0.9, 0, 1, 1);
  }

  100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.1, 1);
  }
}




@keyframes dance_smack {
  4% {
    transform: scale(120%) rotateZ(10deg);
  }

  50% {
    transform: scale(90%) rotateZ(10deg);
  }

  54% {
    transform: scale(120%) rotateZ(-10deg);
  }

  100% {
    transform: scale(90%) rotateZ(-10deg);
  }
}




@keyframes dance_colorrot {
  0% {
    filter: hue-rotate(0deg);
    transform: rotateY(0) rotateZ(10deg);
  }

  50% {
    filter: hue-rotate(180deg);
    transform: rotateY(180deg) rotateZ(10deg);
  }

  100% {
    filter: hue-rotate(360deg);
    transform: rotateY(360deg) rotateZ(10deg);
  }
}



@keyframes dance_flip {
  0% {
    transform: rotateZ(360deg);
    transform-origin: left top;
  }

  100% {
    transform: rotateZ(0deg);
    transform-origin: right top;
  }
}



@keyframes dance_emo {
  0% {
    transform: rotateY(0deg);
    filter: blur(0px) grayscale(0%);
    animation-timing-function: linear;
  }

  25% {
    transform: rotateY(90deg);
    filter: blur(2px) grayscale(100%);
    animation-timing-function: linear;
  }

  50% {
    transform: rotateY(180deg);
    filter: blur(0px) grayscale(0%);
    animation-timing-function: linear;
  }

  75% {
    transform: rotateY(270deg);
    filter: blur(2px) grayscale(100%);
    animation-timing-function: linear;
  }

  100% {
    transform: rotateY(360deg);
    filter: blur(0px) grayscale(0%);
    animation-timing-function: linear;
  }
}



@keyframes dance_waterfloat {
  0% {
    transform: translateY(calc(30px * var(--RY))) rotateZ(calc(-90deg * var(--RZ)));
  }

  33% {
    transform: translateY(calc(-30px * var(--RY))) rotateZ(calc(-30deg * var(--RZ)));
  }

  66% {
    transform: translateY(calc(30px * var(--RY))) rotateZ(calc(30deg * var(--RZ)));
  }

  100% {
    transform: translateY(calc(-30px * var(--RY))) rotateZ(calc(90deg * var(--RZ)));
  }
}




@keyframes dance_3dfloat {
  0% {
    transform: rotateY(calc(var(--rotExtentY) * -1 * var(--RZ))) rotateX(calc(var(--rotExtentX) * -1 * var(--RZ)));
}
33% {
    transform: rotateY(calc(var(--rotExtentY) * var(--RZ))) rotateX(calc(var(--rotExtentX) * -.333 * var(--RZ)));
}
66% {
    transform: rotateY(calc(var(--rotExtentY) * -1 * var(--RZ))) rotateX(calc(var(--rotExtentX) * .333 * var(--RZ)));
}

100% {
    transform: rotateY(calc(var(--rotExtentY) * var(--RZ))) rotateX(calc(var(--rotExtentX) * var(--RZ)));
}
}



@keyframes dance_jitter {
     0% { transform: translate3d(calc(0.8147 * var(--extentX)), calc(0.0975 * var(--extentY)), 0); }
    10% { transform: translate3d(calc(0.9058 * var(--extentX)), calc(0.2785 * var(--extentY)), 0); }
    20% { transform: translate3d(calc(0.1270 * var(--extentX)), calc(0.5469 * var(--extentY)), 0); }
    30% { transform: translate3d(calc(0.9134 * var(--extentX)), calc(0.9575 * var(--extentY)), 0); }
    40% { transform: translate3d(calc(0.6324 * var(--extentX)), calc(0.9649 * var(--extentY)), 0); }
    50% { transform: translate3d(calc(0.1576 * var(--extentX)), calc(0.1419 * var(--extentY)), 0); }
    60% { transform: translate3d(calc(0.9706 * var(--extentX)), calc(0.4218 * var(--extentY)), 0); }
    70% { transform: translate3d(calc(0.9572 * var(--extentX)), calc(0.9157 * var(--extentY)), 0); }
    80% { transform: translate3d(calc(0.4854 * var(--extentX)), calc(0.7922 * var(--extentY)), 0); }
    90% { transform: translate3d(calc(0.8003 * var(--extentX)), calc(0.9595 * var(--extentY)), 0); }
  }


.userAvatar.dance1 {
    --rotExtentY: 15deg;
    --rotExtentX: 15deg;
  perspective: 80px;
}

.userAvatar.dance1 .av2 {
  --RZ: 1.4;
  animation: dance_3dfloat 2.5s infinite;
  animation-timing-function: ease-out;
  animation-direction: alternate;
}


.userAvatar.dance2 .av2 {
  --dance-skew: 15deg;
  --dance-skewN: calc(var(--dance-skew) * -1);
  animation: dance_skewy 1s infinite;
}

.userAvatar.dance3 .av2 {
  animation: dance_bouncey .5s infinite;
}

.userAvatar.dance4 .av2 {
  animation: dance_smack 1s infinite;
}

.userAvatar.dance5 .av2 {
  animation: dance_colorrot 1s infinite;
}

.userAvatar.dance6 .av2 {
  animation: dance_flip 1s infinite;
}


.userAvatar.dance7 .av2 {
  --extentX: 10px;
  --extentY: 10px;
  animation: dance_jitter .25s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}


.userAvatar.dance8 .av2 {
  animation: dance_emo 3s infinite;
}


.userAvatar.dance9 .av2 {
  --RY: 0.25;
  --RZ: 0.1;
  animation: dance_waterfloat 3.33s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}