input.step.step1(id='step1', name='step', type='radio', checked)
label.label.step1(for='step1') 1
input.step.step2(id='step2', name='step', type='radio')
label.label.step2(for='step2') 2
input.step.step3(id='step3', name='step', type='radio')
label.label.step3(for='step3') 3
input.step.step4(id='step4', name='step', type='radio')
label.label.step4(for='step4') 4
input.step.step5(id='step5', name='step', type='radio')
label.label.step5(for='step5') 5
input.step.step6(id='step6', name='step', type='radio')
label.label.step6(for='step6') 6
input.step.step7(id='step7', name='step', type='radio')
label.label.step7(for='step7') 7
input.step.step8(id='step8', name='step', type='radio')
label.label.step8(for='step8') 8
input.step.step9(id='step9', name='step', type='radio')
label.label.step9(for='step9') 9

.bone_system_demo
  .arm.shadow.shadow_1
  .arm.arm_1
    .arm.shadow.shadow_2
    .arm.arm_2

$focusColor: rgba(50, 150, 200, 1);
$unfocusColor: rgba(150, 150, 150, 1);
$jointColor: rgba(250, 220, 20, 1);
$borderColor: rgba(255, 255, 255, 1);
$shadowColor: rgba(50, 50, 50, 1);
$rotateDuration: 1500ms;
$translateDuration: 1000ms;
$labelDuration: 200ms;

body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  font-family: 'Anton', sans-serif;
}

.step {
  display: none;
}

.label {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 400px);
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 2px solid $shadowColor;
  transition: $labelDuration ease-in-out;
  background: #fff;
  font-size: 1.3rem;
  
  &:not(.step9)::before {
    content: '';
    opacity: 0;
    position: absolute;
    left: calc(50% - 10px);
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: $focusColor transparent transparent transparent;
    transition: $labelDuration ease-in-out;
  }
  
  @for $i from 1 through 20 {
    &:nth-child(#{$i}) {
      transform: translateY(($i - 10) * 28px);
    }
  }
}

.step:checked + label {
  color: $focusColor;
  border-color: $focusColor;
  
  &::before {
    opacity: 1;
  }
}

.bone_system_demo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  
  .arm {
    position: absolute;
    opacity: 0;
    transition: $translateDuration ease-in-out;
    
    &::before {
      content: '';
      position: absolute;
      top: calc(50% - 10px);
      left: calc(50% - 10px);
      width: 20px;
      height: 20px;
      background: $jointColor;
      border-radius: 100%;
      box-sizing: border-box;
      border: 3px solid $borderColor;
      opacity: 0;
      transition: $translateDuration ease-in-out;
    }
    
    &.shadow_1 {
      border: 1px dashed $shadowColor;
      width: 300px;
      height: 80px;
      box-sizing: border-box;
    }
    &.shadow_2 {
      border: 1px dashed $shadowColor;
      top: 5px;
      // left: 5px;
      left: 225px;
      width: 290px;
      height: 70px;
      box-sizing: border-box;
    }
  }
  
  .arm_1 {
    width: 300px;
    height: 80px;
  }
  
  .arm_2 {
    top: 5px;
    left: 5px;
    width: 290px;
    height: 70px;
  }
  
  .step1:checked ~ & {
    .arm_1 {
      opacity: 1;
      background: $focusColor;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
      }
    }
    
    .shadow_1 {
      opacity: 1;
    }
    
    .arm_2 {
      opacity: 0;
      background: $focusColor;
      transform: scale(0);
    }
  }
  
  .step2:checked ~ & {
    .arm_1 {
      opacity: 1;
      background: $focusColor;
      transform-origin: 40px 50%;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
        transform: translateX(-110px);
      }
    }
    
    .shadow_1 {
      opacity: 1;
    }
    
    .arm_2 {
      opacity: 1;
      background: $focusColor;
      transform: scale(0);
    }
  }
  
  .step3:checked ~ & {
    .arm_1 {
      opacity: 1;
      background: $unfocusColor;
      transform-origin: 40px 50%;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
        transform: translateX(-110px);
      }
    }
    
    .arm_2 {
      opacity: 0.8;
      background: $focusColor;
      transform: scale(1);
      
      &::before {
        opacity: 1;
      }
    }
  }
  
  
  .step4:checked ~ & {
    .arm_1 {
      opacity: 1;
      background: $unfocusColor;
      transform-origin: 40px 50%;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
        transform: translateX(-110px);
      }
    }
    
    .arm_2 {
      opacity: 0.8;
      background: $focusColor;
      left: 225px;
      transform: scale(1);
      
      &::before {
        opacity: 1;
      }
    }
  }
  
  .step5:checked ~ & {
    .arm_1 {
      opacity: 1;
      background: $unfocusColor;
      transform-origin: 40px 50%;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
        transform: translateX(-110px);
      }
    }
    
    .arm_2 {
      opacity: 0.8;
      background: $focusColor;
      left: 225px;
      animation: counterClockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
      }
    }
    
    .shadow_2 {
      opacity: 1;
    }
  }
  
  .step6:checked ~ & {
    .arm_1 {
      opacity: 1;
      background: $unfocusColor;
      transform-origin: 40px 50%;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
        transform: translateX(-110px);
      }
    }
    
    .arm_2 {
      opacity: 0.8;
      background: $focusColor;
      left: 225px;
      transform-origin: 35px 50%;
      animation: counterClockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        opacity: 1;
        transform: translateX(-110px);
      }
    }
    
    .shadow_2 {
      opacity: 1;
    }
  }
  
  .step7:checked ~ & {
    .arm {
      border-radius: 100px;
    }
    
    .arm_1 {
      opacity: 1;
      background: $unfocusColor;
      transform-origin: 40px 50%;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        transform: translateX(-110px);
      }
    }
    
    .arm_2 {
      opacity: 0.8;
      background: $focusColor;
      left: 225px;
      transform-origin: 35px 50%;
      animation: counterClockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        transform: translateX(-110px);
      }
    }
  }
  
  .step8:checked ~ & {
    .arm {
      border-radius: 100px;
    }
    
    .arm_1 {
      opacity: 1;
      background: $focusColor;
      transform-origin: 40px 50%;
      animation: clockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        transform: translateX(-110px);
      }
    }
    
    .arm_2 {
      top: 0;
      left: 220px;
      width: 300px;
      height: 80px;
      opacity: 1;
      background: $focusColor;
      left: 225px;
      transform-origin: 40px 50%;
      animation: counterClockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        transform: translateX(-110px);
      }
    }
  }
  
  .step9:checked ~ & {
    .arm {
      border-radius: 100px;
    }
    
    .arm_1 {
      opacity: 1;
      background: $focusColor;
      transform-origin: 40px 50%;
      animation: overClockwise $rotateDuration ease-in-out infinite alternate;
      
      &::before {
        transform: translateX(-110px);
      }
    }
    
    .arm_2 {
      top: 0;
      left: 225px;
      width: 300px;
      height: 80px;
      opacity: 1;
      background: $focusColor;
      left: 220px;
      transform-origin: 40px 50%;
      animation: overCounterClockwise $rotateDuration * 1.6 ease-in-out infinite alternate;
      
      &::before {
        transform: translateX(-110px);
      }
    }
  }
}

@keyframes clockwise {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(100deg);
  }
}

@keyframes counterClockwise {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-100deg);
  }
}

@keyframes overClockwise {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(300deg);
  }
}

@keyframes overCounterClockwise {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-500deg);
  }
}