.operator-head {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #7FD7A8;
}

.operator-head svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: perspective(900px) rotateY(135deg);
  transform-origin: 50% 50%;
}

.operator-head .operator-head-eye {
  animation: operatorHeadBlink 4.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.operator-head .operator-head-wave {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 244px 236px;
}

.avatar-user.speaking .operator-head .operator-head-wave-1 {
  animation: operatorHeadWave1 1.2s ease-out infinite;
}

.avatar-user.speaking .operator-head .operator-head-wave-2 {
  animation: operatorHeadWave2 1.2s ease-out .18s infinite;
}

.avatar-user.speaking .operator-head .operator-head-wave-3 {
  animation: operatorHeadWave3 1.2s ease-out .36s infinite;
}

@keyframes operatorHeadBlink {
  0%, 92%, 100% { opacity: 1; }
  94%, 96% { opacity: .08; }
}

@keyframes operatorHeadWave1 {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.82); }
  22% { opacity: .62; }
  100% { opacity: 0; transform: translate3d(12px, -8px, 0) scale(1.18); }
}

@keyframes operatorHeadWave2 {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.82); }
  26% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(18px, -12px, 0) scale(1.26); }
}

@keyframes operatorHeadWave3 {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.82); }
  28% { opacity: .42; }
  100% { opacity: 0; transform: translate3d(24px, -16px, 0) scale(1.34); }
}

@media (max-width: 560px) {
  .operator-head svg {
    transform: scale(.92);
    transform-origin: center;
  }
}