/* ===================================================================
 * RSF Dance Animations — 10 randomized loading sequences
 * for the AsterMind starfish icon.
 * =================================================================== */

/* Accessibility: disable all dance animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  [class^="rsf-"] { animation: none !important; }
}


/* ===================================================================
 * Dance 1: The Walk — walk toward observer with disco finale (4s)
 * =================================================================== */

@keyframes rsf-walk-body-bounce {
  0%   { transform: translateY(0); }
  10%  { transform: translateY(-3px); }
  25%  { transform: translateY(0); }
  35%  { transform: translateY(-3px); }
  50%  { transform: translateY(0); }
  68%  { transform: translateY(-4px); }
  82%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.rsf-walk-body-bounce { animation: rsf-walk-body-bounce 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-walk-leg-left {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(0deg); }
  62%  { transform: rotate(-20deg); }
  82%  { transform: rotate(-20deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-leg-left { animation: rsf-walk-leg-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-walk-leg-right {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(0deg); }
  62%  { transform: rotate(20deg); }
  82%  { transform: rotate(20deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-leg-right { animation: rsf-walk-leg-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-walk-knee-left {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(55deg); }
  20%  { transform: rotate(55deg); }
  28%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-knee-left { animation: rsf-walk-knee-left 4s ease-in-out infinite; transform-origin: 40px 67px; }

@keyframes rsf-walk-knee-right {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(0deg); }
  33%  { transform: rotate(-55deg); }
  45%  { transform: rotate(-55deg); }
  53%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-knee-right { animation: rsf-walk-knee-right 4s ease-in-out infinite; transform-origin: 60px 67px; }

@keyframes rsf-walk-arm-right {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(-12deg); }
  20%  { transform: rotate(-12deg); }
  25%  { transform: rotate(0deg); }
  33%  { transform: rotate(-12deg); }
  45%  { transform: rotate(-12deg); }
  50%  { transform: rotate(0deg); }
  60%  { transform: rotate(90deg); }
  68%  { transform: rotate(0deg); }
  76%  { transform: rotate(-90deg); }
  82%  { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-arm-right { animation: rsf-walk-arm-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-walk-arm-left {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(12deg); }
  20%  { transform: rotate(12deg); }
  25%  { transform: rotate(0deg); }
  33%  { transform: rotate(12deg); }
  45%  { transform: rotate(12deg); }
  50%  { transform: rotate(0deg); }
  62%  { transform: rotate(90deg); }
  82%  { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-arm-left { animation: rsf-walk-arm-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-walk-elbow-right {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(-55deg); }
  20%  { transform: rotate(-55deg); }
  25%  { transform: rotate(0deg); }
  33%  { transform: rotate(-55deg); }
  45%  { transform: rotate(-55deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-elbow-right { animation: rsf-walk-elbow-right 4s ease-in-out infinite; transform-origin: 69px 50px; }

@keyframes rsf-walk-elbow-left {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(55deg); }
  20%  { transform: rotate(55deg); }
  25%  { transform: rotate(0deg); }
  33%  { transform: rotate(55deg); }
  45%  { transform: rotate(55deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-elbow-left { animation: rsf-walk-elbow-left 4s ease-in-out infinite; transform-origin: 31px 50px; }

@keyframes rsf-walk-hair-right {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(8deg); }
  25%  { transform: rotate(-5deg); }
  37%  { transform: rotate(8deg); }
  50%  { transform: rotate(0deg); }
  65%  { transform: rotate(12deg); }
  78%  { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-hair-right { animation: rsf-walk-hair-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-walk-hair-left {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(-8deg); }
  25%  { transform: rotate(5deg); }
  37%  { transform: rotate(-8deg); }
  50%  { transform: rotate(0deg); }
  65%  { transform: rotate(-12deg); }
  78%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
.rsf-walk-hair-left { animation: rsf-walk-hair-left 4s ease-in-out infinite; transform-origin: 50px 50px; }


/* ===================================================================
 * Dance 2: The Moonwalk — backward glide with spin (4s)
 * =================================================================== */

@keyframes rsf-moonwalk-spin {
  0%   { transform: rotate(0deg); }
  58%  { transform: rotate(0deg); }
  60%  { transform: rotate(0deg); }
  82%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
.rsf-moonwalk-spin { animation: rsf-moonwalk-spin 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-moonwalk-body {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(5deg); }
  55%  { transform: rotate(5deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-body { animation: rsf-moonwalk-body 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-moonwalk-leg-left {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(15deg); }
  25%  { transform: rotate(0deg); }
  42%  { transform: rotate(-10deg); }
  55%  { transform: rotate(0deg); }
  60%  { transform: rotate(5deg); }
  82%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-leg-left { animation: rsf-moonwalk-leg-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-moonwalk-leg-right {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(-10deg); }
  25%  { transform: rotate(0deg); }
  42%  { transform: rotate(15deg); }
  55%  { transform: rotate(0deg); }
  60%  { transform: rotate(-5deg); }
  82%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-leg-right { animation: rsf-moonwalk-leg-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-moonwalk-knee-left {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(25deg); }
  20%  { transform: rotate(25deg); }
  25%  { transform: rotate(0deg); }
  55%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-knee-left { animation: rsf-moonwalk-knee-left 4s ease-in-out infinite; transform-origin: 40px 67px; }

@keyframes rsf-moonwalk-knee-right {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(0deg); }
  30%  { transform: rotate(-25deg); }
  48%  { transform: rotate(-25deg); }
  55%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-knee-right { animation: rsf-moonwalk-knee-right 4s ease-in-out infinite; transform-origin: 60px 67px; }

@keyframes rsf-moonwalk-arm-left {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(20deg); }
  25%  { transform: rotate(0deg); }
  42%  { transform: rotate(-20deg); }
  55%  { transform: rotate(0deg); }
  65%  { transform: rotate(30deg); }
  82%  { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-arm-left { animation: rsf-moonwalk-arm-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-moonwalk-arm-right {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(-20deg); }
  25%  { transform: rotate(0deg); }
  42%  { transform: rotate(20deg); }
  55%  { transform: rotate(0deg); }
  65%  { transform: rotate(-30deg); }
  82%  { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-arm-right { animation: rsf-moonwalk-arm-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-moonwalk-hair-right {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(6deg); }
  35%  { transform: rotate(-6deg); }
  55%  { transform: rotate(0deg); }
  65%  { transform: rotate(20deg); }
  82%  { transform: rotate(20deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-hair-right { animation: rsf-moonwalk-hair-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-moonwalk-hair-left {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-6deg); }
  35%  { transform: rotate(6deg); }
  55%  { transform: rotate(0deg); }
  65%  { transform: rotate(-20deg); }
  82%  { transform: rotate(-20deg); }
  100% { transform: rotate(0deg); }
}
.rsf-moonwalk-hair-left { animation: rsf-moonwalk-hair-left 4s ease-in-out infinite; transform-origin: 50px 50px; }


/* ===================================================================
 * Dance 3: The Painter — beret, easel, painting a self-portrait (5s)
 * =================================================================== */

@keyframes rsf-painter-body {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(3deg); }
  45%  { transform: rotate(3deg); }
  55%  { transform: rotate(-4deg); }
  75%  { transform: rotate(-4deg); }
  85%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-painter-body { animation: rsf-painter-body 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-painter-arm-left {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-60deg); }
  20%  { transform: rotate(-55deg); }
  25%  { transform: rotate(-20deg); }
  28%  { transform: rotate(0deg); }
  32%  { transform: rotate(-55deg); }
  45%  { transform: rotate(-65deg); }
  55%  { transform: rotate(-30deg); }
  65%  { transform: rotate(-55deg); }
  75%  { transform: rotate(-30deg); }
  85%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.rsf-painter-arm-left { animation: rsf-painter-arm-left 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-painter-elbow-left {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(15deg); }
  15%  { transform: rotate(-10deg); }
  18%  { transform: rotate(12deg); }
  20%  { transform: rotate(0deg); }
  35%  { transform: rotate(10deg); }
  38%  { transform: rotate(-8deg); }
  40%  { transform: rotate(12deg); }
  45%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-painter-elbow-left { animation: rsf-painter-elbow-left 5s ease-in-out infinite; transform-origin: 31px 50px; }

@keyframes rsf-painter-arm-right {
  0%   { transform: rotate(-10deg); }
  28%  { transform: rotate(-5deg); }
  32%  { transform: rotate(-10deg); }
  75%  { transform: rotate(-10deg); }
  85%  { transform: rotate(15deg); }
  100% { transform: rotate(-10deg); }
}
.rsf-painter-arm-right { animation: rsf-painter-arm-right 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-painter-art-center {
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  22%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-painter-art-center { animation: rsf-painter-art-center 5s ease-in-out infinite; }

@keyframes rsf-painter-art-arms {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  48%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-painter-art-arms { animation: rsf-painter-art-arms 5s ease-in-out infinite; }

@keyframes rsf-painter-art-dots {
  0%   { opacity: 0; }
  62%  { opacity: 0; }
  68%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-painter-art-dots { animation: rsf-painter-art-dots 5s ease-in-out infinite; }

@keyframes rsf-painter-hair-right {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(5deg); }
  50%  { transform: rotate(-4deg); }
  80%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-painter-hair-right { animation: rsf-painter-hair-right 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-painter-hair-left {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-5deg); }
  50%  { transform: rotate(4deg); }
  80%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-painter-hair-left { animation: rsf-painter-hair-left 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-painter-leg-left {
  0%   { transform: rotate(-5deg); }
  55%  { transform: rotate(-3deg); }
  75%  { transform: rotate(-7deg); }
  100% { transform: rotate(-5deg); }
}
.rsf-painter-leg-left { animation: rsf-painter-leg-left 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-painter-leg-right {
  0%   { transform: rotate(5deg); }
  55%  { transform: rotate(3deg); }
  75%  { transform: rotate(7deg); }
  100% { transform: rotate(5deg); }
}
.rsf-painter-leg-right { animation: rsf-painter-leg-right 5s ease-in-out infinite; transform-origin: 50px 50px; }


/* ===================================================================
 * Dance 4: The Chef — chef hat, grill, flip, chef kiss (5s)
 * =================================================================== */

@keyframes rsf-chef-body {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(0); }
  35%  { transform: translateY(-4px); }
  45%  { transform: translateY(0); }
  62%  { transform: translateY(0) rotate(5deg); }
  70%  { transform: translateY(0) rotate(5deg); }
  82%  { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(0); }
}
.rsf-chef-body { animation: rsf-chef-body 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-chef-arm-right {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(40deg); }
  20%  { transform: rotate(45deg); }
  32%  { transform: rotate(-60deg); }
  45%  { transform: rotate(30deg); }
  55%  { transform: rotate(40deg); }
  70%  { transform: rotate(20deg); }
  82%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-chef-arm-right { animation: rsf-chef-arm-right 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-chef-elbow-right {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(-20deg); }
  20%  { transform: rotate(-25deg); }
  32%  { transform: rotate(20deg); }
  45%  { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}
.rsf-chef-elbow-right { animation: rsf-chef-elbow-right 5s ease-in-out infinite; transform-origin: 69px 50px; }

@keyframes rsf-chef-arm-left {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(-30deg); }
  10%  { transform: rotate(-25deg); }
  12%  { transform: rotate(-35deg); }
  14%  { transform: rotate(-28deg); }
  16%  { transform: rotate(-33deg); }
  20%  { transform: rotate(0deg); }
  55%  { transform: rotate(-20deg); }
  62%  { transform: rotate(-50deg); }
  70%  { transform: rotate(-60deg); }
  75%  { transform: rotate(-90deg); }
  82%  { transform: rotate(-70deg); }
  100% { transform: rotate(0deg); }
}
.rsf-chef-arm-left { animation: rsf-chef-arm-left 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-chef-elbow-left {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(30deg); }
  10%  { transform: rotate(20deg); }
  12%  { transform: rotate(35deg); }
  14%  { transform: rotate(22deg); }
  16%  { transform: rotate(30deg); }
  20%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-chef-elbow-left { animation: rsf-chef-elbow-left 5s ease-in-out infinite; transform-origin: 31px 50px; }

@keyframes rsf-chef-food {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(0, 0) rotate(0deg); }
  32%  { transform: translate(-5px, -35px) rotate(180deg); }
  40%  { transform: translate(-3px, -42px) rotate(360deg); }
  50%  { transform: translate(0, 0) rotate(360deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
.rsf-chef-food { animation: rsf-chef-food 5s ease-in-out infinite; transform-origin: center; }

@keyframes rsf-chef-glow {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.6; }
  100% { opacity: 0.3; }
}
.rsf-chef-glow { animation: rsf-chef-glow 2s ease-in-out infinite; }

@keyframes rsf-chef-hat {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-3px); }
  45%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.rsf-chef-hat { animation: rsf-chef-hat 5s ease-in-out infinite; }

.rsf-chef-hair-right { animation: rsf-painter-hair-right 5s ease-in-out infinite; transform-origin: 50px 50px; }
.rsf-chef-hair-left { animation: rsf-painter-hair-left 5s ease-in-out infinite; transform-origin: 50px 50px; }
.rsf-chef-leg-left { transform: rotate(-5deg); transform-origin: 50px 50px; }
.rsf-chef-leg-right { transform: rotate(5deg); transform-origin: 50px 50px; }


/* ===================================================================
 * Dance 5: The Thinker — Rodin pose, scratches head, thought bubbles (5s)
 * =================================================================== */

@keyframes rsf-thinker-body {
  0%   { transform: rotate(10deg); }
  10%  { transform: rotate(12deg); }
  15%  { transform: rotate(8deg); }
  20%  { transform: rotate(11deg); }
  35%  { transform: rotate(8deg); }
  50%  { transform: rotate(10deg); }
  60%  { transform: rotate(3deg); }
  70%  { transform: rotate(0deg); }
  78%  { transform: rotate(12deg); }
  90%  { transform: rotate(10deg); }
  100% { transform: rotate(10deg); }
}
.rsf-thinker-body { animation: rsf-thinker-body 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-thinker-arm-right {
  0%   { transform: rotate(-80deg); }
  35%  { transform: rotate(-80deg); }
  40%  { transform: rotate(-100deg); }
  42%  { transform: rotate(-95deg); }
  44%  { transform: rotate(-102deg); }
  46%  { transform: rotate(-96deg); }
  48%  { transform: rotate(-100deg); }
  52%  { transform: rotate(-80deg); }
  60%  { transform: rotate(-70deg); }
  70%  { transform: rotate(-65deg); }
  78%  { transform: rotate(-82deg); }
  100% { transform: rotate(-80deg); }
}
.rsf-thinker-arm-right { animation: rsf-thinker-arm-right 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-thinker-elbow-right {
  0%   { transform: rotate(-70deg); }
  40%  { transform: rotate(-60deg); }
  52%  { transform: rotate(-70deg); }
  100% { transform: rotate(-70deg); }
}
.rsf-thinker-elbow-right { animation: rsf-thinker-elbow-right 5s ease-in-out infinite; transform-origin: 69px 50px; }

@keyframes rsf-thinker-arm-left {
  0%   { transform: rotate(20deg); }
  60%  { transform: rotate(22deg); }
  70%  { transform: rotate(18deg); }
  100% { transform: rotate(20deg); }
}
.rsf-thinker-arm-left { animation: rsf-thinker-arm-left 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-thinker-bubble1 {
  0%   { opacity: 0; }
  10%  { opacity: 0.5; }
  35%  { opacity: 0.5; }
  40%  { opacity: 0; }
  55%  { opacity: 0.5; }
  62%  { opacity: 0; }
  80%  { opacity: 0.4; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-thinker-bubble1 { animation: rsf-thinker-bubble1 5s ease-in-out infinite; }

@keyframes rsf-thinker-bubble2 {
  0%   { opacity: 0; }
  15%  { opacity: 0.4; }
  35%  { opacity: 0.4; }
  42%  { opacity: 0; }
  58%  { opacity: 0.4; }
  65%  { opacity: 0; }
  82%  { opacity: 0.3; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-thinker-bubble2 { animation: rsf-thinker-bubble2 5s ease-in-out infinite; }

@keyframes rsf-thinker-bubble3 {
  0%   { opacity: 0; }
  18%  { opacity: 0.3; }
  35%  { opacity: 0.3; }
  44%  { opacity: 0; }
  60%  { opacity: 0.3; }
  68%  { opacity: 0; }
  85%  { opacity: 0.3; }
  95%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-thinker-bubble3 { animation: rsf-thinker-bubble3 5s ease-in-out infinite; }

.rsf-thinker-hair-right { animation: rsf-painter-hair-right 5s ease-in-out infinite; transform-origin: 50px 50px; }
.rsf-thinker-hair-left { animation: rsf-painter-hair-left 5s ease-in-out infinite; transform-origin: 50px 50px; }
.rsf-thinker-leg-right { transform: rotate(10deg); transform-origin: 50px 50px; }
.rsf-thinker-leg-left { transform: rotate(-5deg); transform-origin: 50px 50px; }


/* ===================================================================
 * Dance 6: The Programmer — laptop, typing, error, fix, celebrate (5s)
 * =================================================================== */

@keyframes rsf-computer-body {
  0%   { transform: rotate(8deg); }
  25%  { transform: rotate(12deg); }
  35%  { transform: rotate(8deg); }
  55%  { transform: rotate(-5deg); }
  65%  { transform: rotate(10deg); }
  80%  { transform: rotate(-8deg); }
  85%  { transform: rotate(-10deg); }
  92%  { transform: rotate(0deg); }
  100% { transform: rotate(8deg); }
}
.rsf-computer-body { animation: rsf-computer-body 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-computer-arm-right {
  0%   { transform: rotate(30deg); }
  8%   { transform: rotate(30deg); }
  10%  { transform: rotate(28deg); }
  11%  { transform: rotate(33deg); }
  12%  { transform: rotate(27deg); }
  13%  { transform: rotate(34deg); }
  14%  { transform: rotate(28deg); }
  15%  { transform: rotate(32deg); }
  16%  { transform: rotate(29deg); }
  17%  { transform: rotate(33deg); }
  18%  { transform: rotate(28deg); }
  19%  { transform: rotate(31deg); }
  20%  { transform: rotate(30deg); }
  25%  { transform: rotate(25deg); }
  35%  { transform: rotate(30deg); }
  37%  { transform: rotate(27deg); }
  38%  { transform: rotate(34deg); }
  39%  { transform: rotate(28deg); }
  40%  { transform: rotate(33deg); }
  41%  { transform: rotate(27deg); }
  42%  { transform: rotate(34deg); }
  43%  { transform: rotate(28deg); }
  44%  { transform: rotate(33deg); }
  45%  { transform: rotate(27deg); }
  46%  { transform: rotate(34deg); }
  47%  { transform: rotate(28deg); }
  48%  { transform: rotate(33deg); }
  49%  { transform: rotate(27deg); }
  50%  { transform: rotate(30deg); }
  55%  { transform: rotate(5deg); }
  60%  { transform: rotate(30deg); }
  62%  { transform: rotate(29deg); }
  63%  { transform: rotate(32deg); }
  64%  { transform: rotate(28deg); }
  65%  { transform: rotate(31deg); }
  66%  { transform: rotate(29deg); }
  67%  { transform: rotate(32deg); }
  68%  { transform: rotate(28deg); }
  69%  { transform: rotate(31deg); }
  70%  { transform: rotate(29deg); }
  75%  { transform: rotate(30deg); }
  80%  { transform: rotate(5deg); }
  85%  { transform: rotate(-15deg); }
  92%  { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}
.rsf-computer-arm-right { animation: rsf-computer-arm-right 5s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-computer-arm-left {
  0%   { transform: rotate(-30deg); }
  8%   { transform: rotate(-30deg); }
  10%  { transform: rotate(-33deg); }
  11%  { transform: rotate(-28deg); }
  12%  { transform: rotate(-34deg); }
  13%  { transform: rotate(-27deg); }
  14%  { transform: rotate(-33deg); }
  15%  { transform: rotate(-28deg); }
  16%  { transform: rotate(-32deg); }
  17%  { transform: rotate(-29deg); }
  18%  { transform: rotate(-33deg); }
  19%  { transform: rotate(-28deg); }
  20%  { transform: rotate(-30deg); }
  25%  { transform: rotate(-25deg); }
  35%  { transform: rotate(-30deg); }
  37%  { transform: rotate(-34deg); }
  38%  { transform: rotate(-27deg); }
  39%  { transform: rotate(-33deg); }
  40%  { transform: rotate(-28deg); }
  41%  { transform: rotate(-34deg); }
  42%  { transform: rotate(-27deg); }
  43%  { transform: rotate(-33deg); }
  44%  { transform: rotate(-28deg); }
  45%  { transform: rotate(-34deg); }
  46%  { transform: rotate(-27deg); }
  47%  { transform: rotate(-33deg); }
  48%  { transform: rotate(-28deg); }
  49%  { transform: rotate(-34deg); }
  50%  { transform: rotate(-30deg); }
  55%  { transform: rotate(-5deg); }
  60%  { transform: rotate(-30deg); }
  62%  { transform: rotate(-32deg); }
  63%  { transform: rotate(-28deg); }
  64%  { transform: rotate(-31deg); }
  65%  { transform: rotate(-29deg); }
  66%  { transform: rotate(-32deg); }
  67%  { transform: rotate(-28deg); }
  68%  { transform: rotate(-31deg); }
  69%  { transform: rotate(-29deg); }
  70%  { transform: rotate(-32deg); }
  75%  { transform: rotate(-30deg); }
  80%  { transform: rotate(-5deg); }
  85%  { transform: rotate(15deg); }
  92%  { transform: rotate(0deg); }
  100% { transform: rotate(-30deg); }
}
.rsf-computer-arm-left { animation: rsf-computer-arm-left 5s ease-in-out infinite; transform-origin: 50px 50px; }

.rsf-computer-elbow-right { transform: rotate(-30deg); transform-origin: 69px 50px; }
.rsf-computer-elbow-left { transform: rotate(30deg); transform-origin: 31px 50px; }

@keyframes rsf-computer-screen {
  0%   { fill: #374151; }
  52%  { fill: #374151; }
  55%  { fill: #7F1D1D; }
  62%  { fill: #374151; }
  78%  { fill: #374151; }
  82%  { fill: #064E3B; }
  90%  { fill: #064E3B; }
  95%  { fill: #374151; }
  100% { fill: #374151; }
}
.rsf-computer-screen { animation: rsf-computer-screen 5s ease-in-out infinite; }

@keyframes rsf-computer-line1 {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  52%  { opacity: 1; }
  55%  { opacity: 0.5; stroke: #EF4444; }
  62%  { opacity: 1; stroke: #10B981; }
  100% { opacity: 1; }
}
.rsf-computer-line1 { animation: rsf-computer-line1 5s ease-in-out infinite; }

@keyframes rsf-computer-line2 {
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  22%  { opacity: 1; }
  52%  { opacity: 1; }
  55%  { opacity: 0.5; stroke: #EF4444; }
  62%  { opacity: 1; stroke: #60A5FA; }
  100% { opacity: 1; }
}
.rsf-computer-line2 { animation: rsf-computer-line2 5s ease-in-out infinite; }

@keyframes rsf-computer-line3 {
  0%   { opacity: 0; }
  28%  { opacity: 0; }
  35%  { opacity: 1; }
  52%  { opacity: 1; }
  55%  { opacity: 0.5; stroke: #EF4444; }
  62%  { opacity: 1; stroke: #F59E0B; }
  100% { opacity: 1; }
}
.rsf-computer-line3 { animation: rsf-computer-line3 5s ease-in-out infinite; }

@keyframes rsf-computer-steam {
  0%   { transform: translateY(0); opacity: 0.5; }
  50%  { transform: translateY(-3px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 0.5; }
}
.rsf-computer-steam { animation: rsf-computer-steam 2s ease-in-out infinite; }

.rsf-computer-hair-right { animation: rsf-painter-hair-right 5s ease-in-out infinite; transform-origin: 50px 50px; }
.rsf-computer-hair-left { animation: rsf-painter-hair-left 5s ease-in-out infinite; transform-origin: 50px 50px; }
.rsf-computer-leg-left { transform: rotate(-8deg); transform-origin: 50px 50px; }
.rsf-computer-leg-right { transform: rotate(8deg); transform-origin: 50px 50px; }


/* ===================================================================
 * Dance 7: The Professor — blackboard, writes E=mc^2 (5s)
 * =================================================================== */

@keyframes rsf-blackboard-body {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-3px); }
  35%  { transform: translateX(-8px); }
  55%  { transform: translateX(-5px); }
  65%  { transform: translateX(3px); }
  88%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.rsf-blackboard-body { animation: rsf-blackboard-body 5s ease-in-out infinite; transform-origin: 72px 58px; }

@keyframes rsf-blackboard-arm-left {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(-40deg); }
  8%   { transform: rotate(-38deg); }
  15%  { transform: rotate(-35deg); }
  22%  { transform: rotate(-30deg); }
  30%  { transform: rotate(-25deg); }
  38%  { transform: rotate(-20deg); }
  45%  { transform: rotate(-10deg); }
  48%  { transform: rotate(-35deg); }
  55%  { transform: rotate(-25deg); }
  65%  { transform: rotate(-10deg); }
  75%  { transform: rotate(10deg); }
  85%  { transform: rotate(-15deg); }
  88%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
.rsf-blackboard-arm-left { animation: rsf-blackboard-arm-left 5s ease-in-out infinite; transform-origin: 72px 58px; }

@keyframes rsf-blackboard-arm-right {
  0%   { transform: rotate(0deg); }
  55%  { transform: rotate(0deg); }
  65%  { transform: rotate(-30deg); }
  78%  { transform: rotate(-25deg); }
  80%  { transform: rotate(-30deg); }
  82%  { transform: rotate(-25deg); }
  88%  { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}
.rsf-blackboard-arm-right { animation: rsf-blackboard-arm-right 5s ease-in-out infinite; transform-origin: 72px 58px; }

@keyframes rsf-blackboard-eq-e {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  15%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-blackboard-eq-e { animation: rsf-blackboard-eq-e 5s ease-in-out infinite; }

@keyframes rsf-blackboard-eq-eq {
  0%   { opacity: 0; }
  22%  { opacity: 0; }
  27%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-blackboard-eq-eq { animation: rsf-blackboard-eq-eq 5s ease-in-out infinite; }

@keyframes rsf-blackboard-eq-mc {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  38%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-blackboard-eq-mc { animation: rsf-blackboard-eq-mc 5s ease-in-out infinite; }

@keyframes rsf-blackboard-eq-2 {
  0%   { opacity: 0; }
  48%  { opacity: 0; }
  53%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-blackboard-eq-2 { animation: rsf-blackboard-eq-2 5s ease-in-out infinite; }

@keyframes rsf-blackboard-underline {
  0%   { opacity: 0; }
  55%  { opacity: 0; }
  62%  { opacity: 1; }
  92%  { opacity: 1; }
  97%  { opacity: 0; }
  100% { opacity: 0; }
}
.rsf-blackboard-underline { animation: rsf-blackboard-underline 5s ease-in-out infinite; }

@keyframes rsf-blackboard-hair-right {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(-4deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-blackboard-hair-right { animation: rsf-blackboard-hair-right 5s ease-in-out infinite; transform-origin: 72px 58px; }

@keyframes rsf-blackboard-hair-left {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-5deg); }
  50%  { transform: rotate(4deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-blackboard-hair-left { animation: rsf-blackboard-hair-left 5s ease-in-out infinite; transform-origin: 72px 58px; }

.rsf-blackboard-leg-left { transform-origin: 72px 58px; }
.rsf-blackboard-leg-right { transform-origin: 72px 58px; }


/* ===================================================================
 * Dance 8: The Cyclist — pedaling, coasting, no-hands (5s)
 * =================================================================== */

@keyframes rsf-bike-crank {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.rsf-bike-crank { animation: rsf-bike-crank 1.2s linear infinite; transform-origin: 50px 80px; }

@keyframes rsf-bike-wheel {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.rsf-bike-wheel-back { animation: rsf-bike-wheel 0.8s linear infinite; transform-origin: 28px 80px; }
.rsf-bike-wheel-front { animation: rsf-bike-wheel 0.8s linear infinite; transform-origin: 72px 80px; }

@keyframes rsf-bike-body {
  0%   { transform: rotate(3deg); }
  25%  { transform: rotate(8deg); }
  45%  { transform: rotate(5deg); }
  50%  { transform: rotate(-3deg); }
  70%  { transform: rotate(-5deg); }
  88%  { transform: rotate(3deg); }
  100% { transform: rotate(3deg); }
}
.rsf-bike-body { animation: rsf-bike-body 5s ease-in-out infinite; transform-origin: 50px 48px; }

@keyframes rsf-bike-leg-right {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-15deg); }
  50%  { transform: rotate(-25deg); }
  75%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
.rsf-bike-leg-right { animation: rsf-bike-leg-right 1.2s ease-in-out infinite; transform-origin: 50px 48px; }

@keyframes rsf-bike-leg-left {
  0%   { transform: rotate(-25deg); }
  25%  { transform: rotate(-10deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-15deg); }
  100% { transform: rotate(-25deg); }
}
.rsf-bike-leg-left { animation: rsf-bike-leg-left 1.2s ease-in-out infinite; transform-origin: 50px 48px; }

@keyframes rsf-bike-knee-right {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(25deg); }
  75%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.rsf-bike-knee-right { animation: rsf-bike-knee-right 1.2s ease-in-out infinite; transform-origin: 55px 65px; }

@keyframes rsf-bike-knee-left {
  0%   { transform: rotate(25deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(15deg); }
  100% { transform: rotate(25deg); }
}
.rsf-bike-knee-left { animation: rsf-bike-knee-left 1.2s ease-in-out infinite; transform-origin: 45px 65px; }

@keyframes rsf-bike-arm-right {
  0%   { transform: rotate(20deg); }
  50%  { transform: rotate(20deg); }
  55%  { transform: rotate(-20deg); }
  70%  { transform: rotate(-40deg); }
  80%  { transform: rotate(-40deg); }
  85%  { transform: rotate(20deg); }
  100% { transform: rotate(20deg); }
}
.rsf-bike-arm-right { animation: rsf-bike-arm-right 5s ease-in-out infinite; transform-origin: 50px 48px; }

@keyframes rsf-bike-arm-left {
  0%   { transform: rotate(-20deg); }
  50%  { transform: rotate(-20deg); }
  55%  { transform: rotate(20deg); }
  70%  { transform: rotate(40deg); }
  80%  { transform: rotate(40deg); }
  85%  { transform: rotate(-20deg); }
  100% { transform: rotate(-20deg); }
}
.rsf-bike-arm-left { animation: rsf-bike-arm-left 5s ease-in-out infinite; transform-origin: 50px 48px; }

@keyframes rsf-bike-hair {
  0%   { transform: rotate(8deg); }
  25%  { transform: rotate(12deg); }
  50%  { transform: rotate(5deg); }
  70%  { transform: rotate(15deg); }
  100% { transform: rotate(8deg); }
}
.rsf-bike-hair-right { animation: rsf-bike-hair 5s ease-in-out infinite; transform-origin: 50px 48px; }

@keyframes rsf-bike-hair-left {
  0%   { transform: rotate(-8deg); }
  25%  { transform: rotate(-12deg); }
  50%  { transform: rotate(-5deg); }
  70%  { transform: rotate(-15deg); }
  100% { transform: rotate(-8deg); }
}
.rsf-bike-hair-left { animation: rsf-bike-hair-left 5s ease-in-out infinite; transform-origin: 50px 48px; }

.rsf-bike-helmet { animation: rsf-bike-body 5s ease-in-out infinite; transform-origin: 50px 48px; }


/* ===================================================================
 * Dance 9: The Macarena — 12-beat choreography with jump & turn (4s)
 * =================================================================== */

@keyframes rsf-macarena-arm-right {
  0%   { transform: rotate(0deg); }
  4%   { transform: rotate(-40deg); }
  8%   { transform: rotate(-40deg); }
  16%  { transform: rotate(-40deg); }
  24%  { transform: rotate(-40deg); }
  32%  { transform: rotate(-80deg); }
  40%  { transform: rotate(-80deg); }
  48%  { transform: rotate(-100deg); }
  56%  { transform: rotate(-100deg); }
  64%  { transform: rotate(40deg); }
  72%  { transform: rotate(40deg); }
  80%  { transform: rotate(40deg); }
  88%  { transform: rotate(-60deg); }
  96%  { transform: rotate(-60deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-arm-right { animation: rsf-macarena-arm-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-macarena-arm-left {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(0deg); }
  12%  { transform: rotate(40deg); }
  16%  { transform: rotate(40deg); }
  24%  { transform: rotate(40deg); }
  32%  { transform: rotate(40deg); }
  36%  { transform: rotate(80deg); }
  40%  { transform: rotate(80deg); }
  48%  { transform: rotate(80deg); }
  52%  { transform: rotate(100deg); }
  56%  { transform: rotate(100deg); }
  64%  { transform: rotate(100deg); }
  68%  { transform: rotate(-40deg); }
  72%  { transform: rotate(-40deg); }
  80%  { transform: rotate(-40deg); }
  88%  { transform: rotate(60deg); }
  96%  { transform: rotate(60deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-arm-left { animation: rsf-macarena-arm-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-macarena-elbow-right {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(0deg); }
  20%  { transform: rotate(-90deg); }
  60%  { transform: rotate(-90deg); }
  64%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-elbow-right { animation: rsf-macarena-elbow-right 4s ease-in-out infinite; transform-origin: 69px 50px; }

@keyframes rsf-macarena-elbow-left {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(0deg); }
  24%  { transform: rotate(90deg); }
  64%  { transform: rotate(90deg); }
  68%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-elbow-left { animation: rsf-macarena-elbow-left 4s ease-in-out infinite; transform-origin: 31px 50px; }

@keyframes rsf-macarena-turn {
  0%   { transform: rotate(0deg); }
  86%  { transform: rotate(0deg); }
  96%  { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-turn { animation: rsf-macarena-turn 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-macarena-jump {
  0%   { transform: translateY(0); }
  86%  { transform: translateY(0); }
  91%  { transform: translateY(-10px); }
  96%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.rsf-macarena-jump { animation: rsf-macarena-jump 4s ease-in-out infinite; }

@keyframes rsf-macarena-body {
  0%   { transform: rotate(0deg); }
  76%  { transform: rotate(0deg); }
  78%  { transform: rotate(-5deg); }
  80%  { transform: rotate(5deg); }
  82%  { transform: rotate(-5deg); }
  84%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-body { animation: rsf-macarena-body 4s ease-in-out infinite; transform-origin: 50px 50px; }

.rsf-macarena-hair-right { animation: rsf-walk-hair-right 4s ease-in-out infinite; transform-origin: 50px 50px; }
.rsf-macarena-hair-left { animation: rsf-walk-hair-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-macarena-leg-left {
  0%   { transform: rotate(0deg); }
  76%  { transform: rotate(0deg); }
  80%  { transform: rotate(5deg); }
  88%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-leg-left { animation: rsf-macarena-leg-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-macarena-leg-right {
  0%   { transform: rotate(0deg); }
  76%  { transform: rotate(0deg); }
  80%  { transform: rotate(-5deg); }
  88%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.rsf-macarena-leg-right { animation: rsf-macarena-leg-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

.rsf-macarena-knee-left { transform-origin: 40px 67px; }
.rsf-macarena-knee-right { transform-origin: 60px 67px; }


/* ===================================================================
 * Dance 10: The Breakdancer — toprock, freeze, headspin (4s)
 * =================================================================== */

@keyframes rsf-breakdance-spin {
  0%   { transform: rotate(0deg); }
  48%  { transform: rotate(0deg); }
  78%  { transform: rotate(1080deg); }
  88%  { transform: rotate(1440deg); }
  100% { transform: rotate(1440deg); }
}
.rsf-breakdance-spin { animation: rsf-breakdance-spin 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-breakdance-body {
  0%   { transform: translateY(0); }
  5%   { transform: translateY(-3px); }
  10%  { transform: translateY(0); }
  15%  { transform: translateY(-3px); }
  20%  { transform: translateY(0); }
  24%  { transform: rotate(-45deg); }
  40%  { transform: rotate(-45deg); }
  45%  { transform: rotate(0deg) translateY(0); }
  78%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-breakdance-body { animation: rsf-breakdance-body 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-breakdance-arm-right {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(-30deg); }
  10%  { transform: rotate(20deg); }
  15%  { transform: rotate(-25deg); }
  20%  { transform: rotate(15deg); }
  24%  { transform: rotate(50deg); }
  40%  { transform: rotate(50deg); }
  45%  { transform: rotate(0deg); }
  48%  { transform: rotate(0deg); }
  78%  { transform: rotate(0deg); }
  85%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
.rsf-breakdance-arm-right { animation: rsf-breakdance-arm-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-breakdance-arm-left {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(25deg); }
  10%  { transform: rotate(-20deg); }
  15%  { transform: rotate(30deg); }
  20%  { transform: rotate(-15deg); }
  24%  { transform: rotate(-70deg); }
  40%  { transform: rotate(-70deg); }
  45%  { transform: rotate(0deg); }
  78%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-breakdance-arm-left { animation: rsf-breakdance-arm-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-breakdance-leg-right {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(10deg); }
  10%  { transform: rotate(-10deg); }
  15%  { transform: rotate(10deg); }
  20%  { transform: rotate(-10deg); }
  24%  { transform: rotate(-30deg); }
  40%  { transform: rotate(-30deg); }
  45%  { transform: rotate(0deg); }
  50%  { transform: rotate(-15deg); }
  78%  { transform: rotate(-15deg); }
  85%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-breakdance-leg-right { animation: rsf-breakdance-leg-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-breakdance-leg-left {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(-10deg); }
  10%  { transform: rotate(10deg); }
  15%  { transform: rotate(-10deg); }
  20%  { transform: rotate(10deg); }
  24%  { transform: rotate(30deg); }
  40%  { transform: rotate(30deg); }
  45%  { transform: rotate(0deg); }
  50%  { transform: rotate(15deg); }
  78%  { transform: rotate(15deg); }
  85%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-breakdance-leg-left { animation: rsf-breakdance-leg-left 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-breakdance-hair-right {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(5deg); }
  20%  { transform: rotate(-5deg); }
  48%  { transform: rotate(0deg); }
  78%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-breakdance-hair-right { animation: rsf-breakdance-hair-right 4s ease-in-out infinite; transform-origin: 50px 50px; }

@keyframes rsf-breakdance-hair-left {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-5deg); }
  20%  { transform: rotate(5deg); }
  48%  { transform: rotate(0deg); }
  78%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.rsf-breakdance-hair-left { animation: rsf-breakdance-hair-left 4s ease-in-out infinite; transform-origin: 50px 50px; }