/* Pure-CSS dancer illustration for the new Danza course. Same "hand-built
   shapes, not an image" philosophy as the other course illustrations —
   built as its own simple figure (head, torso, flowing skirt, limbs)
   rather than forking drum.css's much more elaborate nested-pseudo-
   element drummer rig, to keep this maintainable. A gentle twirl
   animation on the whole figure plus an independent skirt sway gives it
   the same sense of life as the piano's bouncing keys / guitar's sway. */

.cssdance-wrap {
  width: 190px;
  max-width: 100%;
  margin: 30px auto 0;
}

.cssdance {
  position: relative;
  width: 190px;
  height: 380px;
  transform-origin: 50% 100%;
  animation: cssdance-twirl 6s ease-in-out infinite;
}

@keyframes cssdance-twirl {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@media (max-width: 767px) {
  .cssdance-wrap {
    transform: scale(0.78);
    transform-origin: top center;
    margin-top: 10px;
  }
}

.cssdance__head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  background-color: #c98a5e;
  z-index: 4;
}

.cssdance__hair {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 52px;
  height: 34px;
  margin-left: -26px;
  border-radius: 50% 50% 40% 40%;
  background-color: #2b1b12;
  z-index: 3;
}

.cssdance__arm {
  position: absolute;
  width: 14px;
  height: 70px;
  border-radius: 7px;
  background-color: #c98a5e;
  z-index: 2;
}

/* Raised arm, sweeping up and out */
.cssdance__arm--raised {
  top: 34px;
  left: 118px;
  transform: rotate(-55deg);
  transform-origin: top center;
}

/* Other arm, out to the side */
.cssdance__arm--side {
  top: 56px;
  left: 32px;
  transform: rotate(65deg);
  transform-origin: top center;
}

.cssdance__torso {
  position: absolute;
  top: 44px;
  left: 50%;
  width: 46px;
  height: 90px;
  margin-left: -23px;
  border-radius: 18px 18px 10px 10px;
  background-color: #0fcfdc;
  z-index: 2;
}

/* Flowing skirt, swaying on its own timer so it lags the twirl */
.cssdance__skirt {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 130px;
  height: 110px;
  margin-left: -65px;
  border-radius: 20% 20% 50% 50% / 10% 10% 100% 100%;
  background: linear-gradient(180deg, #0fcfdc 0%, #ff7ab8 100%);
  transform-origin: top center;
  animation: cssdance-skirt 2.4s ease-in-out infinite;
  z-index: 1;
}

@keyframes cssdance-skirt {
  0%, 100% { transform: skewX(-6deg); }
  50% { transform: skewX(6deg); }
}

.cssdance__leg {
  position: absolute;
  top: 210px;
  width: 16px;
  height: 100px;
  border-radius: 8px;
  background-color: #c98a5e;
}

.cssdance__leg--standing {
  left: 50%;
  margin-left: -20px;
}

.cssdance__leg--kicked {
  left: 50%;
  margin-left: 4px;
  transform: rotate(35deg);
  transform-origin: top center;
}