/***************************************************************************************************
Animate-Exercise-Images
-> Animating a series of Exercise images frame by frame.
-> REF: widget_animate-imgGymPose.css

-> Animated Element:
   1. We support multiple types of animated elements: 
      (+) "animate-exerciseImg-2steps" = 2-frame (steps), 2 seconds animation
      (+) "animate-exerciseImg-3steps" = 3-frame (steps), 3 seconds animation
      (+) "animate-exerciseImg-5steps" = 4-frame (steps), 4 seconds animation
      (+) "animate-exerciseImg-5steps" = 5-frame (steps), 5 seconds animation
   2. Image-Sprite:
      (+) The image source file/url is dynamic depending on the exercise in question. Hence,
          JS is responsible to assign the value.
      (+) The images composition must be one-column, multiple-row VERTICALLY aligned.
   3. Dimensions:
      (+) Unlike imgGymPose widget, one of our biggest challenges is the animated element size must be 
          dynamic, not static, and must fill the entire size of its parent layout. Because of this,
          the width/height must be set dynamically by JS.
      (+) We could have set "width:100%", but we cannot set "height:100%" (it caused the element
          to behave out of whack).  

-> @keyframes
   1. Unlike imgGymPose widget that has static dimension, this is another biggest challenge we have
      how to navigate the image-sprite when its dimension is dynamic? 
      SOLUTION: 
      Somehow we can use PERCENTAGES (%) to move images frame per frame. With try-error,
      we got these % values. The requirement is the image-sprite must be one-column vertically aligned.
      
   2. How to set/calculate the PERCENTAGE (%)
      (+) This is very tricky confusing process to come up with the static values for each step.
          The goal was to have frame JUMP STRAIGHT to the next frame, as the opposite to moving
          along between frames such as car wheels.
      (+) 6/2020 SOLUTION:
          2.1. Set only the FIRST frame (0%) and the LAST frame (100%)
               This will cause CSS keyframe to jump straight to the next target frame, instead of moving along
               frame to frame like a car wheels. In addition, CSS engine would automatically divide 
               frames according to the steps.
          2.2. Set the FIRST "background-position" = 0px 0px
          2.3. Set the LAST frame "background-position" = 0px FINAL-Y-%
               >> We found out that we just simply need to set the target last frame position (difficult enough), 
                  and do not need to set each frame position (very difficult). Somehow the CSS engine
                  is smart enough to break it down evenly to multiple frames steps.
               >> The "FINAL-Y-px" must be trial-error so we found the good value so that the 
                  first frame vs. last frame are exactly on our target spot, showing smooth animation.
***************************************************************************************************/
.animate-exerciseImg-none,
.animate-exerciseImg-2steps,
.animate-exerciseImg-3steps,
.animate-exerciseImg-4steps,
.animate-exerciseImg-5steps {
	display: inline-block;

    background-size: cover;
    background-position: top left;    
    background-repeat: no-repeat;
}

.animate-exerciseImg-2steps {
    -moz-animation: animate-exerciseImg-2steps-keyframe 2s steps(2, end) forwards infinite;
    -webkit-animation: animate-exerciseImg-2steps-keyframe 2s steps(2, end) forwards infinite;
    -o-animation: animate-exerciseImg-2steps-keyframe 2s steps(2, end) forwards infinite;
    -ms-animation: animate-exerciseImg-2steps-keyframe 2s steps(2, end) forwards infinite;
    animation: animate-exerciseImg-2steps-keyframe 2s steps(2, end) forwards infinite;
}

.animate-exerciseImg-3steps {
    -moz-animation: animate-exerciseImg-3steps-keyframe 3s steps(3, end) forwards infinite;
    -webkit-animation: animate-exerciseImg-3steps-keyframe 3s steps(3, end) forwards infinite;
    -o-animation: animate-exerciseImg-3steps-keyframe 3s steps(3, end) forwards infinite;
    -ms-animation: animate-exerciseImg-3steps-keyframe 3s steps(3, end) forwards infinite;
	animation: animate-exerciseImg-3steps-keyframe 3s steps(3, end) forwards infinite;
}

.animate-exerciseImg-4steps {
    -moz-animation: animate-exerciseImg-4steps-keyframe 4s steps(4, end) forwards infinite;
    -webkit-animation: animate-exerciseImg-4steps-keyframe 4s steps(4, end) forwards infinite;
    -o-animation: animate-exerciseImg-4steps-keyframe 4s steps(4, end) forwards infinite;
    -ms-animation: animate-exerciseImg-4steps-keyframe 4s steps(4, end) forwards infinite;
    animation: animate-exerciseImg-4steps-keyframe 4s steps(4, end) forwards infinite;
}

.animate-exerciseImg-5steps {
    -moz-animation: animate-exerciseImg-5steps-keyframe 5s steps(5, end) forwards infinite;
    -webkit-animation: animate-exerciseImg-5steps-keyframe 5s steps(5, end) forwards infinite;
    -o-animation: animate-exerciseImg-5steps-keyframe 5s steps(5, end) forwards infinite;
    -ms-animation: animate-exerciseImg-5steps-keyframe 5s steps(5, end) forwards infinite;
    animation: animate-exerciseImg-5steps-keyframe 5s steps(5, end) forwards infinite;
}

/*
 * KEYFRAME for "animate-exerciseImg-2steps"
 */
@-moz-keyframes animate-exerciseImg-2steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 200%; }
}
@-webkit-keyframes animate-exerciseImg-2steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 200%; }
}
@-o-keyframes animate-exerciseImg-2steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 200%; }
}
@-ms-keyframes animate-exerciseImg-2steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 200%; }
}
@keyframes animate-exerciseImg-2steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 200%; }
}

/*
 * KEYFRAME for "animate-exerciseImg-3steps"
 */
@-moz-keyframes animate-exerciseImg-3steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 150%; }
}
@-webkit-keyframes animate-exerciseImg-3steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 150%; }
}
@-o-keyframes animate-exerciseImg-3steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 150%; }
}
@-ms-keyframes animate-exerciseImg-3steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 150%; }
}
@keyframes animate-exerciseImg-3steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 150%; }
}

/*
 * KEYFRAME for "animate-exerciseImg-4steps"
 */
@-moz-keyframes animate-exerciseImg-4steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 133.3%; }
}
@-webkit-keyframes animate-exerciseImg-4steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 133.3%; }
}
@-o-keyframes animate-exerciseImg-4steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 133.3%; }
}
@-ms-keyframes animate-exerciseImg-4steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 133.3%; }
}
@keyframes animate-exerciseImg-4steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 133.3%; }
}

/*
 * KEYFRAME for "animate-exerciseImg-5steps"
 */
@-moz-keyframes animate-exerciseImg-5steps-keyframe {
    /* 100% { background-position: 0px 0px; }
    100% { background-position: 0px 50%; }
    100% { background-position: 0px 75%; }
    100% { background-position: 0px 100%; }*/
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 125%; }
}
@-webkit-keyframes animate-exerciseImg-5steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 125%; }
}
@-o-keyframes animate-exerciseImg-5steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 125%; }
}
@-ms-keyframes animate-exerciseImg-5steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 125%; }
}
@keyframes animate-exerciseImg-5steps-keyframe {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 125%; }
}