Heat Haze Shimmer

<!-- Heat Haze Shimmer (blurred bands rising off hot ground) -->
<div class="nuda-wa2-heat-haze" role="img" aria-label="Heat haze rising from hot ground">
  <span class="nuda-wa2-heat-haze__sun"></span>
  <span class="nuda-wa2-heat-haze__ground"></span>
  <span class="nuda-wa2-heat-haze__wave nuda-wa2-heat-haze__wave--1"></span>
  <span class="nuda-wa2-heat-haze__wave nuda-wa2-heat-haze__wave--2"></span>
  <span class="nuda-wa2-heat-haze__wave nuda-wa2-heat-haze__wave--3"></span>
</div>

.nuda-wa2-heat-haze {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,#1a1206 0%,#241a08 55%,#0f0b04 100%);
}

.nuda-wa2-heat-haze__sun {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle,#fafafa 0 25%,#e4ff54 55%,rgba(228,255,84,.15) 75%,transparent 80%);
  will-change: opacity;
  animation: _nuda-wa2heatHazeSun 4s ease-in-out infinite;
}

.nuda-wa2-heat-haze__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(180deg,rgba(228,255,84,.06),rgba(9,9,11,.9));
}

.nuda-wa2-heat-haze__wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 22px;
  background: linear-gradient(180deg,rgba(255,255,255,.10),transparent);
  filter: blur(6px);
  opacity: .5;
  will-change: transform,opacity;
  transform-origin: 50% 100%;
}

.nuda-wa2-heat-haze__wave--1 {
  bottom: 8%;
  animation: _nuda-wa2heatHazeRise 2.4s ease-in-out infinite;
}

.nuda-wa2-heat-haze__wave--2 {
  bottom: 20%;
  animation: _nuda-wa2heatHazeRise 3s ease-in-out infinite .4s;
}

.nuda-wa2-heat-haze__wave--3 {
  bottom: 34%;
  animation: _nuda-wa2heatHazeRise 3.6s ease-in-out infinite .8s;
}

@keyframes _nuda-wa2heatHazeRise {
  0%,100% {
    transform: scaleY(1) translateY(0);
    opacity: .35;
  }
  50% {
    transform: scaleY(1.6) translateY(-6px);
    opacity: .6;
  }
}

@keyframes _nuda-wa2heatHazeSun {
  0%,100% {
    opacity: .85;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-wa2-heat-haze__wave,.nuda-wa2-heat-haze__sun {
    animation: none;
    opacity: .4;
  }
}