.air-dancer {
  --air-dancer-main: #ff6200;
  --air-dancer-dark: #c73800;
  --air-dancer-light: #ff9a35;
  width: 100%;
  height: 100%;
  color: var(--air-dancer-main);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.air-dancer-red { --air-dancer-main: #e4352c; --air-dancer-dark: #9e1e19; --air-dancer-light: #ff786e; }
.air-dancer-blue { --air-dancer-main: #168bd1; --air-dancer-dark: #0b5689; --air-dancer-light: #64c6ff; }
.air-dancer-green { --air-dancer-main: #25a96a; --air-dancer-dark: #11633b; --air-dancer-light: #70dea4; }

.air-dancer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.air-dancer-character {
  transform-box: view-box;
  transform-origin: 67px 143px;
  animation: air-dancer-flail 3.35s cubic-bezier(.45, .02, .55, .98) infinite;
  filter: drop-shadow(0 6px 5px rgba(20, 22, 26, .23));
}
.air-dancer-upper {
  transform-box: view-box;
  transform-origin: 67px 83px;
  animation: air-dancer-upper-whip 2.05s cubic-bezier(.45, .02, .55, .98) infinite;
}
.air-dancer-tube,
.air-dancer-highlight,
.air-dancer-finger,
.air-dancer-hair { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.air-dancer-tube { stroke: var(--air-dancer-main); stroke-width: 15; }
.air-dancer-highlight { stroke: var(--air-dancer-light); stroke-width: 2.2; opacity: .72; }
.air-dancer-body { stroke-width: 25; animation: air-dancer-inflate 1.28s ease-in-out infinite; }
.air-dancer-body-highlight { stroke-width: 3.2; }
.air-dancer-arm { transform-box: fill-box; }
.air-dancer-arm-point { transform-origin: 92% 28%; animation: air-dancer-point 1.74s ease-in-out infinite; }
.air-dancer-arm-wave { transform-origin: 8% 82%; animation: air-dancer-wave 1.08s ease-in-out infinite; }
.air-dancer-hand { transform-box: fill-box; }
.air-dancer-hand-point { transform-origin: 80% 20%; animation: air-dancer-hand-point .82s ease-in-out infinite; }
.air-dancer-hand-wave { transform-origin: 20% 80%; animation: air-dancer-hand-wave .61s ease-in-out infinite; }
.air-dancer-finger { stroke: var(--air-dancer-main); stroke-width: 4.6; }
.air-dancer-hair { stroke: var(--air-dancer-main); stroke-width: 5; transform-box: fill-box; transform-origin: 50% 100%; animation: air-dancer-hair .76s ease-in-out infinite; }
.air-dancer-brow { fill: none; stroke: #171a1e; stroke-width: 2.2; stroke-linecap: round; }
.air-dancer-eye { fill: #fff; stroke: #171a1e; stroke-width: 1.4; }
.air-dancer-pupil { fill: #171a1e; }
.air-dancer-eye-glint { fill: #fff; }
.air-dancer-mouth { fill: #15181c; stroke: #0d0f12; stroke-width: 1.2; }
.air-dancer-teeth { fill: #fff; }
.air-dancer-tongue { fill: #f14b51; }
.air-dancer-face { transform-box: fill-box; transform-origin: 50% 85%; animation: air-dancer-nod 1.13s ease-in-out infinite; }
.air-dancer-blower { fill: #111419; stroke: #050607; stroke-width: 1.4; }
.air-dancer-blower-rim { fill: #3c4249; }
.air-dancer-blower-detail { fill: none; stroke: #666d75; stroke-width: 1.4; opacity: .7; }

@keyframes air-dancer-flail {
  0%, 100% { transform: translate(-3px, 1px) rotate(-8deg) skewX(-4deg) scaleY(.98); }
  12% { transform: translate(-7px, 5px) rotate(-14deg) skewX(-9deg) scale(.98, .93); }
  26% { transform: translate(1px, -3px) rotate(2deg) skewX(3deg) scale(1.01, 1.04); }
  41% { transform: translate(7px, 1px) rotate(12deg) skewX(8deg) scaleY(.98); }
  54% { transform: translate(5px, 6px) rotate(7deg) skewX(10deg) scale(.98, .92); }
  68% { transform: translate(-2px, -4px) rotate(-5deg) skewX(-2deg) scale(1.01, 1.05); }
  83% { transform: translate(-7px, 2px) rotate(-12deg) skewX(-8deg) scaleY(.97); }
  92% { transform: translate(2px, -2px) rotate(4deg) skewX(3deg) scaleY(1.02); }
}
@keyframes air-dancer-upper-whip {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  20% { transform: translate(-3px, 3px) rotate(-9deg); }
  38% { transform: translate(2px, -3px) rotate(6deg); }
  58% { transform: translate(4px, 2px) rotate(10deg); }
  76% { transform: translate(-2px, -2px) rotate(-6deg); }
  90% { transform: translate(2px, 1px) rotate(4deg); }
}
@keyframes air-dancer-inflate {
  0%, 100% { stroke-width: 24px; }
  46% { stroke-width: 27px; }
  66% { stroke-width: 25px; }
}
@keyframes air-dancer-point {
  0%, 100% { transform: rotate(8deg) translate(0, -1px); }
  32% { transform: rotate(-15deg) translate(-2px, 3px); }
  64% { transform: rotate(13deg) translate(2px, -2px); }
  82% { transform: rotate(-7deg) translate(-1px, 1px); }
}
@keyframes air-dancer-wave {
  0%, 100% { transform: rotate(-16deg) translate(-1px, 2px); }
  27% { transform: rotate(24deg) translate(2px, -3px); }
  58% { transform: rotate(-9deg) translate(-2px, 2px); }
  79% { transform: rotate(30deg) translate(2px, -2px); }
}
@keyframes air-dancer-hand-point {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(18deg); }
}
@keyframes air-dancer-hand-wave {
  0%, 100% { transform: rotate(-22deg); }
  50% { transform: rotate(26deg); }
}
@keyframes air-dancer-hair {
  0%, 100% { transform: rotate(-13deg) skewX(-9deg) scaleY(.94); }
  50% { transform: rotate(16deg) skewX(10deg) scaleY(1.08); }
}
@keyframes air-dancer-nod {
  0%, 100% { transform: rotate(-6deg) translateY(1px); }
  38% { transform: rotate(7deg) translateY(3px); }
  70% { transform: rotate(-3deg) translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .air-dancer-character,
  .air-dancer-upper,
  .air-dancer-body,
  .air-dancer-arm,
  .air-dancer-hand,
  .air-dancer-hair,
  .air-dancer-face { animation: none !important; }
}