.air-wind-marker {
  pointer-events: none;
}

.air-wind-icon {
  --wind-size: 26px;
  --wind-rot: 0deg;
  position: relative;
  width: var(--wind-size);
  height: var(--wind-size);
  transform-origin: 50% 50%;
  animation: wind-sway 2.2s ease-in-out infinite;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.air-wind-icon .wind-shaft {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 2px;
  height: 58%;
  background: rgba(26, 124, 207, 0.9);
  border-radius: 2px;
  transform: translateX(-50%);
}

.air-wind-icon .wind-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid rgba(26, 124, 207, 0.95);
  transform: translateX(-50%);
}

.air-wind-icon .wind-tail {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 6px;
  height: 6px;
  background: rgba(26, 124, 207, 0.7);
  border-radius: 50%;
  transform: translateX(-50%);
}

@keyframes wind-sway {
  0% { transform: rotate(var(--wind-rot)); opacity: 0.9; }
  50% { transform: rotate(calc(var(--wind-rot) + 8deg)); opacity: 1; }
  100% { transform: rotate(var(--wind-rot)); opacity: 0.9; }
}