.wave-animation {
  height: 200px;
  position: relative;
  width: 202px;
}

.wave-circle {
  border-radius: 50%;
  height: 166px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 166px;
}

.wave-circle-outer {
  animation: wave-outer 2.7s ease-in-out infinite;
  background: radial-gradient(circle at 50% 0%, #ff7a18 0%, #ff984d 50%, #ff7a18 100%);
  opacity: 0.12;
}

.wave-circle-middle {
  animation: wave-middle 2.7s ease-in-out infinite;
  background: radial-gradient(circle at 50% 0%, #ff7a18 0%, #ff984d 50%, #ff7a18 100%);
  opacity: 0.19;
}

.wave-circle-inner {
  animation: wave-inner 2.7s ease-in-out infinite;
  background: radial-gradient(circle at 50% 0%, #ffd3b2 0%, #ff7a18 100%);
}

@keyframes wave-inner {
  0% { transform: translate(-50%, -50%) scale(0.64); animation-timing-function: cubic-bezier(0.39, 0, 0.83, 1); }
  28% { transform: translate(-50%, -50%) scale(0.46); animation-timing-function: cubic-bezier(0.17, 0, 0.1, 1); }
  55%, 100% { transform: translate(-50%, -50%) scale(0.64); }
}

@keyframes wave-middle {
  0% { transform: translate(-50%, -50%) scale(0.94); animation-timing-function: cubic-bezier(0.39, 0, 0.83, 1); }
  28% { transform: translate(-50%, -50%) scale(0.47); animation-timing-function: cubic-bezier(0.17, 0, 0.83, 0.83); }
  77%, 100% { transform: translate(-50%, -50%) scale(0.94); }
}

@keyframes wave-outer {
  0%, 100% { transform: translate(-50%, -50%) scale(1.19); animation-timing-function: cubic-bezier(0.39, 0, 0.83, 1); }
  28% { transform: translate(-50%, -50%) scale(0.27); animation-timing-function: cubic-bezier(0.17, 0, 0, 1); }
}