.kun-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.kun {
  position: absolute;
  width: var(--w, 140px);
  opacity: var(--o, 0.55);
  filter: drop-shadow(0 0 18px rgba(93, 120, 254, 0.35));
  will-change: transform;
  animation: kunDrift var(--dur, 28s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform: translate3d(0, 0, 0) scaleX(var(--flip, 1));
}
.kun svg {
  display: block;
  width: 100%;
  height: auto;
}
.kun-a { left: 4%; top: 18%; --w: 168px; --o: 0.42; --dur: 32s; --delay: 0s; --flip: 1; }
.kun-b { right: 6%; top: 58%; left: auto; --w: 120px; --o: 0.5; --dur: 26s; --delay: -6s; --flip: -1; }
.kun-c { left: 12%; bottom: 12%; top: auto; --w: 96px; --o: 0.34; --dur: 36s; --delay: -12s; --flip: 1; }
.kun-d { right: 14%; top: 22%; left: auto; --w: 78px; --o: 0.28; --dur: 22s; --delay: -3s; --flip: -1; }

@keyframes kunDrift {
  0% { transform: translate3d(0, 0, 0) scaleX(var(--flip, 1)) rotate(-2deg); }
  25% { transform: translate3d(18px, -22px, 0) scaleX(var(--flip, 1)) rotate(1deg); }
  50% { transform: translate3d(36px, 8px, 0) scaleX(var(--flip, 1)) rotate(3deg); }
  75% { transform: translate3d(12px, 20px, 0) scaleX(var(--flip, 1)) rotate(-1deg); }
  100% { transform: translate3d(0, 0, 0) scaleX(var(--flip, 1)) rotate(-2deg); }
}

@media (max-width: 720px) {
  .kun-a { --w: 110px; }
  .kun-b { --w: 88px; }
  .kun-c, .kun-d { display: none; }
}