/* Exercise Sprite Sheet CSS
 * References batch PNG files directly using CSS background-position
 * Easy to tweak without regenerating images
 */

/* ===========================================
   BATCH SPRITE DEFINITIONS
   Each batch has different grid dimensions
   =========================================== */

/* Batch 1: Chest - 5x5 grid (2048x2048) */
.sprite-batch1 {
  background-image: url('/sprites/batch1.png');
  background-size: 500% 500%; /* 5 cols x 5 rows */
}

/* Batch 2: Back - 6x6 grid (1856x2304) */
.sprite-batch2 {
  background-image: url('/sprites/batch2.png');
  background-size: 600% 600%; /* 6 cols x 6 rows */
}

/* Batch 3: Shoulders - 6x4 grid (2048x2048) */
.sprite-batch3 {
  background-image: url('/sprites/batch3.png');
  background-size: 600% 400%; /* 6 cols x 4 rows */
}

/* Batch 4: Legs - 6x6 grid (1856x2304) */
.sprite-batch4 {
  background-image: url('/sprites/batch4.png');
  background-size: 600% 600%; /* 6 cols x 6 rows */
}

/* Batch 5: Biceps - 5x3 grid (2400x1792) */
.sprite-batch5 {
  background-image: url('/sprites/batch5.png');
  background-size: 500% 300%; /* 5 cols x 3 rows */
}

/* Batch 6: Triceps - 5x3 grid (2400x1792) */
.sprite-batch6 {
  background-image: url('/sprites/batch6.png');
  background-size: 500% 300%; /* 5 cols x 3 rows */
}

/* Batch 7: Core Part 1 - 5x5 grid (2048x2048) */
.sprite-batch7 {
  background-image: url('/sprites/batch7.png');
  background-size: 500% 500%; /* 5 cols x 5 rows */
}

/* Batch 8: Core Part 2 - 4x5 grid (2048x2048) */
.sprite-batch8 {
  background-image: url('/sprites/batch8.png');
  background-size: 400% 500%; /* 4 cols x 5 rows */
}

/* Batch 9: Power Part 1 - 6x5 grid (1856x2304) */
.sprite-batch9 {
  background-image: url('/sprites/batch9.png');
  background-size: 600% 500%; /* 6 cols x 5 rows */
}

/* Batch 10: Power Part 2 - 6x5 grid (1856x2304) */
.sprite-batch10 {
  background-image: url('/sprites/batch10.png');
  background-size: 600% 500%; /* 6 cols x 5 rows */
}

/* ===========================================
   BASE EXERCISE SPRITE STYLES
   =========================================== */

.exercise-sprite {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  display: inline-block;
}

.exercise-sprite.animated {
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}

/* ===========================================
   BATCH 1: CHEST EXERCISES
   Grid: 5x5 (positions: 0%, 25%, 50%, 75%, 100%)
   =========================================== */

/* Barbell Bench Press - r0-c0, r0-c1 */
.exercise-barbell-bench-press { animation: anim-barbell-bench-press 1s infinite steps(1); }
@keyframes anim-barbell-bench-press {
  0%, 50% { background-position: 0% 0%; }
  50.01%, 100% { background-position: 25% 0%; }
}

/* Dumbbell Bench Press - r0-c2, r0-c3 */
.exercise-dumbbell-bench-press { animation: anim-dumbbell-bench-press 1s infinite steps(1); }
@keyframes anim-dumbbell-bench-press {
  0%, 50% { background-position: 50% 0%; }
  50.01%, 100% { background-position: 75% 0%; }
}

/* Incline Barbell Bench - r0-c4, r1-c0 */
.exercise-incline-barbell-bench { animation: anim-incline-barbell-bench 1s infinite steps(1); }
@keyframes anim-incline-barbell-bench {
  0%, 50% { background-position: 100% 0%; }
  50.01%, 100% { background-position: 0% 25%; }
}

/* Incline Dumbbell Press - r1-c1, r1-c2 */
.exercise-incline-dumbbell-press { animation: anim-incline-dumbbell-press 1s infinite steps(1); }
@keyframes anim-incline-dumbbell-press {
  0%, 50% { background-position: 25% 25%; }
  50.01%, 100% { background-position: 50% 25%; }
}

/* Decline Barbell Bench - r1-c3, r1-c4 */
.exercise-decline-barbell-bench { animation: anim-decline-barbell-bench 1s infinite steps(1); }
@keyframes anim-decline-barbell-bench {
  0%, 50% { background-position: 75% 25%; }
  50.01%, 100% { background-position: 100% 25%; }
}

/* Dumbbell Fly - r2-c0, r2-c1 */
.exercise-dumbbell-fly { animation: anim-dumbbell-fly 1s infinite steps(1); }
@keyframes anim-dumbbell-fly {
  0%, 50% { background-position: 0% 50%; }
  50.01%, 100% { background-position: 25% 50%; }
}

/* Cable Crossover - r2-c2, r2-c3 */
.exercise-cable-crossover { animation: anim-cable-crossover 1s infinite steps(1); }
@keyframes anim-cable-crossover {
  0%, 50% { background-position: 50% 50%; }
  50.01%, 100% { background-position: 75% 50%; }
}

/* Push-Up - r2-c4, r3-c0 */
.exercise-push-up { animation: anim-push-up 1s infinite steps(1); }
@keyframes anim-push-up {
  0%, 50% { background-position: 100% 50%; }
  50.01%, 100% { background-position: 0% 75%; }
}

/* Diamond Push-Up - r2-c4, r3-c0 */
.exercise-diamond-push-up { animation: anim-diamond-push-up 1s infinite steps(1); }
@keyframes anim-diamond-push-up {
  0%, 50% { background-position: 100% 50%; }
  50.01%, 100% { background-position: 0% 75%; }
}

/* Decline Push-Up - r3-c1, r3-c2 */
.exercise-decline-push-up { animation: anim-decline-push-up 1s infinite steps(1); }
@keyframes anim-decline-push-up {
  0%, 50% { background-position: 25% 75%; }
  50.01%, 100% { background-position: 50% 75%; }
}


/* Incline Push-Up - r3-c3, r3-c4 */
.exercise-incline-push-up { animation: anim-incline-push-up 1s infinite steps(1); }
@keyframes anim-incline-push-up {
  0%, 50% { background-position: 75% 75%; }
  50.01%, 100% { background-position: 100% 75%; }
}

/* Chest Dips - r4-c0, r4-c1 */
.exercise-dips-chest { animation: anim-dips-chest 1s infinite steps(1); }
@keyframes anim-dips-chest {
  0%, 50% { background-position: 0% 100%; }
  50.01%, 100% { background-position: 25% 100%; }
}

/* Pec Deck - r4-c2, r4-c3 */
.exercise-pec-deck { animation: anim-pec-deck 1s infinite steps(1); }
@keyframes anim-pec-deck {
  0%, 50% { background-position: 50% 100%; }
  50.01%, 100% { background-position: 75% 100%; }
}


/* ===========================================
   BATCH 2: BACK EXERCISES
   Grid: 6x6 (positions: 0%, 20%, 40%, 60%, 80%, 100%)
   =========================================== */

/* Deadlift - r0-c0, r0-c1, r0-c2 (3 frames) */
.exercise-deadlift { animation: anim-deadlift 1.5s infinite steps(1); }
@keyframes anim-deadlift {
  0%, 33.33% { background-position: 0% 0%; }
  33.34%, 66.66% { background-position: 20% 0%; }
  66.67%, 100% { background-position: 40% 0%; }
}

/* Sumo Deadlift - r0-c3, r0-c4, r0-c5 (3 frames) */
.exercise-sumo-deadlift { animation: anim-sumo-deadlift 1.5s infinite steps(1); }
@keyframes anim-sumo-deadlift {
  0%, 33.33% { background-position: 60% 0%; }
  33.34%, 66.66% { background-position: 80% 0%; }
  66.67%, 100% { background-position: 100% 0%; }
}

/* Barbell Row - r1-c0, r1-c1 */
.exercise-barbell-row { animation: anim-barbell-row 1s infinite steps(1); }
@keyframes anim-barbell-row {
  0%, 50% { background-position: 0% 20%; }
  50.01%, 100% { background-position: 20% 20%; }
}

/* Dumbbell Row - r1-c2, r1-c3 */
.exercise-dumbbell-row { animation: anim-dumbbell-row 1s infinite steps(1); }
@keyframes anim-dumbbell-row {
  0%, 50% { background-position: 40% 20%; }
  50.01%, 100% { background-position: 60% 20%; }
}

/* Pull-Up - r1-c4, r1-c5, r2-c0 (3 frames) */
.exercise-pull-up { animation: anim-pull-up 1.5s infinite steps(1); }
@keyframes anim-pull-up {
  0%, 33.33% { background-position: 80% 20%; }
  33.34%, 66.66% { background-position: 100% 20%; }
  66.67%, 100% { background-position: 0% 40%; }
}

/* Chin-Up - r2-c1, r2-c2, r2-c3 (3 frames) */
.exercise-chin-up { animation: anim-chin-up 1.5s infinite steps(1); }
@keyframes anim-chin-up {
  0%, 33.33% { background-position: 20% 40%; }
  33.34%, 66.66% { background-position: 40% 40%; }
  66.67%, 100% { background-position: 60% 40%; }
}

/* Lat Pulldown Wide - r2-c4, r2-c5 */
.exercise-lat-pulldown-wide { animation: anim-lat-pulldown-wide 1s infinite steps(1); }
@keyframes anim-lat-pulldown-wide {
  0%, 50% { background-position: 80% 40%; }
  50.01%, 100% { background-position: 100% 40%; }
}

/* Lat Pulldown Close - r3-c0, r3-c1 */
.exercise-lat-pulldown-close { animation: anim-lat-pulldown-close 1s infinite steps(1); }
@keyframes anim-lat-pulldown-close {
  0%, 50% { background-position: 0% 60%; }
  50.01%, 100% { background-position: 20% 60%; }
}

/* Seated Cable Row - r3-c2, r3-c3 */
.exercise-seated-cable-row { animation: anim-seated-cable-row 1s infinite steps(1); }
@keyframes anim-seated-cable-row {
  0%, 50% { background-position: 40% 60%; }
  50.01%, 100% { background-position: 60% 60%; }
}

/* T-Bar Row - r3-c4, r3-c5 */
.exercise-t-bar-row { animation: anim-t-bar-row 1s infinite steps(1); }
@keyframes anim-t-bar-row {
  0%, 50% { background-position: 80% 60%; }
  50.01%, 100% { background-position: 100% 60%; }
}

/* Face Pull - r4-c0, r4-c1 */
.exercise-face-pull { animation: anim-face-pull 1s infinite steps(1); }
@keyframes anim-face-pull {
  0%, 50% { background-position: 0% 80%; }
  50.01%, 100% { background-position: 20% 80%; }
}

/* Straight Arm Pulldown - r4-c2, r4-c3 */
.exercise-straight-arm-pulldown { animation: anim-straight-arm-pulldown 1s infinite steps(1); }
@keyframes anim-straight-arm-pulldown {
  0%, 50% { background-position: 40% 80%; }
  50.01%, 100% { background-position: 60% 80%; }
}

/* Hyperextension - r4-c4, r4-c5 */
.exercise-hyperextension { animation: anim-hyperextension 1s infinite steps(1); }
@keyframes anim-hyperextension {
  0%, 50% { background-position: 80% 80%; }
  50.01%, 100% { background-position: 100% 80%; }
}

/* Superman - r5-c0, r5-c1 */
.exercise-superman { animation: anim-superman 1s infinite steps(1); }
@keyframes anim-superman {
  0%, 50% { background-position: 0% 100%; }
  50.01%, 100% { background-position: 20% 100%; }
}

/* Renegade Row - r5-c2, r5-c3, r5-c4 (3 frames) */
.exercise-renegade-row { animation: anim-renegade-row 1.5s infinite steps(1); }
@keyframes anim-renegade-row {
  0%, 33.33% { background-position: 40% 100%; }
  33.34%, 66.66% { background-position: 60% 100%; }
  66.67%, 100% { background-position: 80% 100%; }
}


/* ===========================================
   BATCH 3: SHOULDER EXERCISES
   Grid: 6x4 (cols: 0%, 20%, 40%, 60%, 80%, 100%; rows: 0%, 33.33%, 66.67%, 100%)
   =========================================== */

/* Overhead Press - r0-c0, r0-c1 */
.exercise-overhead-press { animation: anim-overhead-press 1s infinite steps(1); }
@keyframes anim-overhead-press {
  0%, 50% { background-position: 0% 0%; }
  50.01%, 100% { background-position: 20% 0%; }
}

/* Seated Dumbbell Press - r0-c2, r0-c3 */
.exercise-seated-dumbbell-press { animation: anim-seated-dumbbell-press 1s infinite steps(1); }
@keyframes anim-seated-dumbbell-press {
  0%, 50% { background-position: 40% 0%; }
  50.01%, 100% { background-position: 60% 0%; }
}

/* Arnold Press - r0-c4, r0-c5, r1-c0 (3 frames) */
.exercise-arnold-press { animation: anim-arnold-press 1.5s infinite steps(1); }
@keyframes anim-arnold-press {
  0%, 33.33% { background-position: 80% 0%; }
  33.34%, 66.66% { background-position: 100% 0%; }
  66.67%, 100% { background-position: 0% 33.33%; }
}

/* Lateral Raise - r1-c1, r1-c2 */
.exercise-lateral-raise { animation: anim-lateral-raise 1s infinite steps(1); }
@keyframes anim-lateral-raise {
  0%, 50% { background-position: 20% 33.33%; }
  50.01%, 100% { background-position: 40% 33.33%; }
}

/* Front Raise - r1-c3, r1-c4 */
.exercise-front-raise { animation: anim-front-raise 1s infinite steps(1); }
@keyframes anim-front-raise {
  0%, 50% { background-position: 60% 33.33%; }
  50.01%, 100% { background-position: 80% 33.33%; }
}

/* Rear Delt Fly - r1-c5, r2-c0 */
.exercise-rear-delt-fly { animation: anim-rear-delt-fly 1s infinite steps(1); }
@keyframes anim-rear-delt-fly {
  0%, 50% { background-position: 100% 33.33%; }
  50.01%, 100% { background-position: 0% 66.67%; }
}

/* Upright Row - r2-c1, r2-c2 */
.exercise-upright-row { animation: anim-upright-row 1s infinite steps(1); }
@keyframes anim-upright-row {
  0%, 50% { background-position: 20% 66.67%; }
  50.01%, 100% { background-position: 40% 66.67%; }
}

/* Shrugs - r2-c3, r2-c4 */
.exercise-shrugs { animation: anim-shrugs 1s infinite steps(1); }
@keyframes anim-shrugs {
  0%, 50% { background-position: 60% 66.67%; }
  50.01%, 100% { background-position: 80% 66.67%; }
}

/* Push Press - r2-c5, r3-c0, r3-c1 (3 frames) */
.exercise-push-press { animation: anim-push-press 1.5s infinite steps(1); }
@keyframes anim-push-press {
  0%, 33.33% { background-position: 100% 66.67%; }
  33.34%, 66.66% { background-position: 0% 100%; }
  66.67%, 100% { background-position: 20% 100%; }
}

/* Cable Lateral Raise - r3-c2, r3-c3 */
.exercise-cable-lateral-raise { animation: anim-cable-lateral-raise 1s infinite steps(1); }
@keyframes anim-cable-lateral-raise {
  0%, 50% { background-position: 40% 100%; }
  50.01%, 100% { background-position: 60% 100%; }
}


/* ===========================================
   BATCH 4: LEG EXERCISES
   Grid: 6x6 (cols: 0%, 20%, 40%, 60%, 80%, 100%; rows: 0%, 20%, 40%, 60%, 80%, 100%) - 1856x2304
   =========================================== */

/* Barbell Squat - r0-c0, r0-c1, r0-c2 (3 frames) */
.exercise-barbell-squat { animation: anim-barbell-squat 1.5s infinite steps(1); }
@keyframes anim-barbell-squat {
  0%, 33.33% { background-position: 0% 0%; }
  33.34%, 66.66% { background-position: 20% 0%; }
  66.67%, 100% { background-position: 40% 0%; }
}

/* Front Squat - r0-c3, r0-c4, r0-c5 (3 frames) */
.exercise-front-squat { animation: anim-front-squat 1.5s infinite steps(1); }
@keyframes anim-front-squat {
  0%, 33.33% { background-position: 60% 0%; }
  33.34%, 66.66% { background-position: 80% 0%; }
  66.67%, 100% { background-position: 100% 0%; }
}

/* Goblet Squat - r1-c0, r1-c1 */
.exercise-goblet-squat { animation: anim-goblet-squat 1s infinite steps(1); }
@keyframes anim-goblet-squat {
  0%, 50% { background-position: 0% 20%; }
  50.01%, 100% { background-position: 20% 20%; }
}

/* Leg Press - r1-c2, r1-c3 */
.exercise-leg-press { animation: anim-leg-press 1s infinite steps(1); }
@keyframes anim-leg-press {
  0%, 50% { background-position: 40% 20%; }
  50.01%, 100% { background-position: 60% 20%; }
}

/* Bulgarian Split Squat - r1-c4, r1-c5 */
.exercise-bulgarian-split-squat { animation: anim-bulgarian-split-squat 1s infinite steps(1); }
@keyframes anim-bulgarian-split-squat {
  0%, 50% { background-position: 80% 20%; }
  50.01%, 100% { background-position: 100% 20%; }
}

/* Walking Lunge - r2-c0, r2-c1, r2-c2 (3 frames) */
.exercise-walking-lunge { animation: anim-walking-lunge 1.5s infinite steps(1); }
@keyframes anim-walking-lunge {
  0%, 33.33% { background-position: 0% 40%; }
  33.34%, 66.66% { background-position: 20% 40%; }
  66.67%, 100% { background-position: 40% 40%; }
}

/* Romanian Deadlift - r2-c3, r2-c4 */
.exercise-romanian-deadlift { animation: anim-romanian-deadlift 1s infinite steps(1); }
@keyframes anim-romanian-deadlift {
  0%, 50% { background-position: 60% 40%; }
  50.01%, 100% { background-position: 80% 40%; }
}

/* Leg Extension - r2-c5, r3-c0 */
.exercise-leg-extension { animation: anim-leg-extension 1s infinite steps(1); }
@keyframes anim-leg-extension {
  0%, 50% { background-position: 100% 40%; }
  50.01%, 100% { background-position: 0% 60%; }
}

/* Lying Leg Curl - r3-c1, r3-c2 */
.exercise-lying-leg-curl { animation: anim-lying-leg-curl 1s infinite steps(1); }
@keyframes anim-lying-leg-curl {
  0%, 50% { background-position: 20% 60%; }
  50.01%, 100% { background-position: 40% 60%; }
}

/* Seated Leg Curl - r3-c3, r3-c4 */
.exercise-seated-leg-curl { animation: anim-seated-leg-curl 1s infinite steps(1); }
@keyframes anim-seated-leg-curl {
  0%, 50% { background-position: 60% 60%; }
  50.01%, 100% { background-position: 80% 60%; }
}

/* Hip Thrust - r3-c5, r4-c0 */
.exercise-hip-thrust { animation: anim-hip-thrust 1s infinite steps(1); }
@keyframes anim-hip-thrust {
  0%, 50% { background-position: 100% 60%; }
  50.01%, 100% { background-position: 0% 80%; }
}

/* Glute Bridge - r4-c1, r4-c2 */
.exercise-glute-bridge { animation: anim-glute-bridge 1s infinite steps(1); }
@keyframes anim-glute-bridge {
  0%, 50% { background-position: 20% 80%; }
  50.01%, 100% { background-position: 40% 80%; }
}

/* Step-Ups - r4-c3, r4-c4, r4-c5 (3 frames) */
.exercise-step-ups { animation: anim-step-ups 1.5s infinite steps(1); }
@keyframes anim-step-ups {
  0%, 33.33% { background-position: 60% 80%; }
  33.34%, 66.66% { background-position: 80% 80%; }
  66.67%, 100% { background-position: 100% 80%; }
}

/* Standing Calf Raise - r5-c0, r5-c1 */
.exercise-standing-calf-raise { animation: anim-standing-calf-raise 1s infinite steps(1); }
@keyframes anim-standing-calf-raise {
  0%, 50% { background-position: 0% 100%; }
  50.01%, 100% { background-position: 20% 100%; }
}

/* Seated Calf Raise - r5-c2, r5-c3 */
.exercise-seated-calf-raise { animation: anim-seated-calf-raise 1s infinite steps(1); }
@keyframes anim-seated-calf-raise {
  0%, 50% { background-position: 40% 100%; }
  50.01%, 100% { background-position: 60% 100%; }
}

/* Hack Squat - r5-c4, r5-c5 */
.exercise-hack-squat { animation: anim-hack-squat 1s infinite steps(1); }
@keyframes anim-hack-squat {
  0%, 50% { background-position: 80% 100%; }
  50.01%, 100% { background-position: 100% 100%; }
}


/* ===========================================
   BATCH 5: BICEPS EXERCISES
   Grid: 5x3 (cols: 0%, 25%, 50%, 75%, 100%; rows: 0%, 50%, 100%)
   =========================================== */

/* Barbell Curl - r0-c0, r0-c1 */
.exercise-barbell-curl { animation: anim-barbell-curl 1s infinite steps(1); }
@keyframes anim-barbell-curl {
  0%, 50% { background-position: 0% 0%; }
  50.01%, 100% { background-position: 25% 0%; }
}

/* Dumbbell Alternating Curl - r0-c2, r0-c3, r0-c4 (3 frames) */
.exercise-dumbbell-alternating-curl { animation: anim-dumbbell-alternating-curl 1.5s infinite steps(1); }
@keyframes anim-dumbbell-alternating-curl {
  0%, 33.33% { background-position: 50% 0%; }
  33.34%, 66.66% { background-position: 75% 0%; }
  66.67%, 100% { background-position: 100% 0%; }
}

/* Hammer Curl - r1-c0, r1-c1 */
.exercise-hammer-curl { animation: anim-hammer-curl 1s infinite steps(1); }
@keyframes anim-hammer-curl {
  0%, 50% { background-position: 0% 50%; }
  50.01%, 100% { background-position: 25% 50%; }
}

/* Preacher Curl - r1-c2, r1-c3 */
.exercise-preacher-curl { animation: anim-preacher-curl 1s infinite steps(1); }
@keyframes anim-preacher-curl {
  0%, 50% { background-position: 50% 50%; }
  50.01%, 100% { background-position: 75% 50%; }
}

/* Concentration Curl - r1-c4, r2-c0 */
.exercise-concentration-curl { animation: anim-concentration-curl 1s infinite steps(1); }
@keyframes anim-concentration-curl {
  0%, 50% { background-position: 100% 50%; }
  50.01%, 100% { background-position: 0% 100%; }
}

/* Incline Dumbbell Curl - r2-c1, r2-c2 */
.exercise-incline-dumbbell-curl { animation: anim-incline-dumbbell-curl 1s infinite steps(1); }
@keyframes anim-incline-dumbbell-curl {
  0%, 50% { background-position: 25% 100%; }
  50.01%, 100% { background-position: 50% 100%; }
}

/* Cable Bicep Curl - r2-c3, r2-c4 */
.exercise-cable-bicep-curl { animation: anim-cable-bicep-curl 1s infinite steps(1); }
@keyframes anim-cable-bicep-curl {
  0%, 50% { background-position: 75% 100%; }
  50.01%, 100% { background-position: 100% 100%; }
}


/* ===========================================
   BATCH 6: TRICEPS EXERCISES
   Grid: 5x3 (cols: 0%, 25%, 50%, 75%, 100%; rows: 0%, 50%, 100%)
   =========================================== */

/* Tricep Pushdown - r0-c0, r0-c1 */
.exercise-tricep-pushdown { animation: anim-tricep-pushdown 1s infinite steps(1); }
@keyframes anim-tricep-pushdown {
  0%, 50% { background-position: 0% 0%; }
  50.01%, 100% { background-position: 25% 0%; }
}

/* Skull Crushers - r0-c2, r0-c3 */
.exercise-skull-crushers { animation: anim-skull-crushers 1s infinite steps(1); }
@keyframes anim-skull-crushers {
  0%, 50% { background-position: 50% 0%; }
  50.01%, 100% { background-position: 75% 0%; }
}

/* Overhead Tricep Extension - r0-c4, r1-c0 */
.exercise-overhead-tricep-extension { animation: anim-overhead-tricep-extension 1s infinite steps(1); }
@keyframes anim-overhead-tricep-extension {
  0%, 50% { background-position: 100% 0%; }
  50.01%, 100% { background-position: 0% 50%; }
}

/* Tricep Dips - r1-c1, r1-c2 */
.exercise-tricep-dips { animation: anim-tricep-dips 1s infinite steps(1); }
@keyframes anim-tricep-dips {
  0%, 50% { background-position: 25% 50%; }
  50.01%, 100% { background-position: 50% 50%; }
}

/* Close Grip Bench - r1-c3, r1-c4 */
.exercise-close-grip-bench { animation: anim-close-grip-bench 1s infinite steps(1); }
@keyframes anim-close-grip-bench {
  0%, 50% { background-position: 75% 50%; }
  50.01%, 100% { background-position: 100% 50%; }
}

/* Dumbbell Kickback - r2-c0, r2-c1 */
.exercise-dumbbell-kickback { animation: anim-dumbbell-kickback 1s infinite steps(1); }
@keyframes anim-dumbbell-kickback {
  0%, 50% { background-position: 0% 100%; }
  50.01%, 100% { background-position: 25% 100%; }
}

/* Bench Dips - r2-c2, r2-c3 */
.exercise-bench-dips { animation: anim-bench-dips 1s infinite steps(1); }
@keyframes anim-bench-dips {
  0%, 50% { background-position: 50% 100%; }
  50.01%, 100% { background-position: 75% 100%; }
}


/* ===========================================
   BATCH 7: CORE PART 1
   Grid: 5x5 (cols: 0%, 25%, 50%, 75%, 100%; rows: 0%, 25%, 50%, 75%, 100%)
   =========================================== */

/* Plank - r0-c0 (1 frame, no animation) */
.exercise-plank { background-position: 0% 0%; }

/* Side Plank - r0-c1, r0-c2 */
.exercise-side-plank { animation: anim-side-plank 1s infinite steps(1); }
@keyframes anim-side-plank {
  0%, 50% { background-position: 25% 0%; }
  50.01%, 100% { background-position: 50% 0%; }
}

/* Crunches - r0-c3, r0-c4 */
.exercise-crunches { animation: anim-crunches 1s infinite steps(1); }
@keyframes anim-crunches {
  0%, 50% { background-position: 75% 0%; }
  50.01%, 100% { background-position: 100% 0%; }
}

/* Leg Raises - r1-c0, r1-c1 */
.exercise-leg-raises { animation: anim-leg-raises 1s infinite steps(1); }
@keyframes anim-leg-raises {
  0%, 50% { background-position: 0% 25%; }
  50.01%, 100% { background-position: 25% 25%; }
}

/* Hanging Leg Raise - r1-c2, r1-c3 */
.exercise-hanging-leg-raise { animation: anim-hanging-leg-raise 1s infinite steps(1); }
@keyframes anim-hanging-leg-raise {
  0%, 50% { background-position: 50% 25%; }
  50.01%, 100% { background-position: 75% 25%; }
}

/* Russian Twist - r1-c4, r2-c0, r2-c1 (3 frames) */
.exercise-russian-twist { animation: anim-russian-twist 1.5s infinite steps(1); }
@keyframes anim-russian-twist {
  0%, 33.33% { background-position: 100% 25%; }
  33.34%, 66.66% { background-position: 0% 50%; }
  66.67%, 100% { background-position: 25% 50%; }
}

/* Ab Wheel Rollout - r2-c2, r2-c3 */
.exercise-ab-wheel-rollout { animation: anim-ab-wheel-rollout 1s infinite steps(1); }
@keyframes anim-ab-wheel-rollout {
  0%, 50% { background-position: 50% 50%; }
  50.01%, 100% { background-position: 75% 50%; }
}

/* Bicycle Crunch - r2-c4, r3-c0, r3-c1 (3 frames) */
.exercise-bicycle-crunch { animation: anim-bicycle-crunch 1.5s infinite steps(1); }
@keyframes anim-bicycle-crunch {
  0%, 33.33% { background-position: 100% 50%; }
  33.34%, 66.66% { background-position: 0% 75%; }
  66.67%, 100% { background-position: 25% 75%; }
}


/* ===========================================
   BATCH 8: CORE PART 2
   Grid: 4x5 (cols: 0%, 33.33%, 66.67%, 100%; rows: 0%, 25%, 50%, 75%, 100%)
   =========================================== */

/* Mountain Climbers - r0-c0, r0-c1, r0-c2 (3 frames) */
.exercise-mountain-climbers { animation: anim-mountain-climbers 1.5s infinite steps(1); }
@keyframes anim-mountain-climbers {
  0%, 33.33% { background-position: 0% 0%; }
  33.34%, 66.66% { background-position: 33.33% 0%; }
  66.67%, 100% { background-position: 66.67% 0%; }
}

/* Bird Dog - r0-c3, r1-c0, r1-c1 (3 frames) */
.exercise-bird-dog { animation: anim-bird-dog 1.5s infinite steps(1); }
@keyframes anim-bird-dog {
  0%, 33.33% { background-position: 100% 0%; }
  33.34%, 66.66% { background-position: 0% 25%; }
  66.67%, 100% { background-position: 33.33% 25%; }
}

/* Woodchoppers - r1-c2, r1-c3 */
.exercise-woodchoppers { animation: anim-woodchoppers 1s infinite steps(1); }
@keyframes anim-woodchoppers {
  0%, 50% { background-position: 66.67% 25%; }
  50.01%, 100% { background-position: 100% 25%; }
}

/* V-Ups - r2-c0, r2-c1 */
.exercise-v-ups { animation: anim-v-ups 1s infinite steps(1); }
@keyframes anim-v-ups {
  0%, 50% { background-position: 0% 50%; }
  50.01%, 100% { background-position: 33.33% 50%; }
}

/* Dead Bug - r2-c2, r2-c3, r3-c0 (3 frames) */
.exercise-dead-bug { animation: anim-dead-bug 1.5s infinite steps(1); }
@keyframes anim-dead-bug {
  0%, 33.33% { background-position: 66.67% 50%; }
  33.34%, 66.66% { background-position: 100% 50%; }
  66.67%, 100% { background-position: 0% 75%; }
}

/* Pallof Press - r3-c1, r3-c2 */
.exercise-pallof-press { animation: anim-pallof-press 1s infinite steps(1); }
@keyframes anim-pallof-press {
  0%, 50% { background-position: 33.33% 75%; }
  50.01%, 100% { background-position: 66.67% 75%; }
}

/* Hollow Body Hold - r3-c3 (1 frame, no animation) */
.exercise-hollow-body-hold { background-position: 100% 75%; }


/* ===========================================
   BATCH 9: POWER PART 1
   Grid: 6x5 (cols: 0%, 20%, 40%, 60%, 80%, 100%; rows: 0%, 25%, 50%, 75%, 100%)
   =========================================== */

/* Burpees - r0-c0, r0-c1, r0-c2, r0-c3 (4 frames) */
.exercise-burpees { animation: anim-burpees 2s infinite steps(1); }
@keyframes anim-burpees {
  0%, 25% { background-position: 0% 0%; }
  25.01%, 50% { background-position: 20% 0%; }
  50.01%, 75% { background-position: 40% 0%; }
  75.01%, 100% { background-position: 60% 0%; }
}

/* Box Jumps - r0-c4, r0-c5, r1-c0 (3 frames) */
.exercise-box-jumps { animation: anim-box-jumps 1.5s infinite steps(1); }
@keyframes anim-box-jumps {
  0%, 33.33% { background-position: 80% 0%; }
  33.34%, 66.66% { background-position: 100% 0%; }
  66.67%, 100% { background-position: 0% 25%; }
}

/* Kettlebell Swing - r1-c1, r1-c2, r1-c3 (3 frames) */
.exercise-kettlebell-swing { animation: anim-kettlebell-swing 1.5s infinite steps(1); }
@keyframes anim-kettlebell-swing {
  0%, 33.33% { background-position: 20% 25%; }
  33.34%, 66.66% { background-position: 40% 25%; }
  66.67%, 100% { background-position: 60% 25%; }
}

/* Thrusters - r1-c4, r1-c5, r2-c0 (3 frames) */
.exercise-thrusters { animation: anim-thrusters 1.5s infinite steps(1); }
@keyframes anim-thrusters {
  0%, 33.33% { background-position: 80% 25%; }
  33.34%, 66.66% { background-position: 100% 25%; }
  66.67%, 100% { background-position: 0% 50%; }
}

/* Wall Balls - r2-c1, r2-c2, r2-c3 (3 frames) */
.exercise-wall-balls { animation: anim-wall-balls 1.5s infinite steps(1); }
@keyframes anim-wall-balls {
  0%, 33.33% { background-position: 20% 50%; }
  33.34%, 66.66% { background-position: 40% 50%; }
  66.67%, 100% { background-position: 60% 50%; }
}

/* Clean and Press - r2-c4, r2-c5, r3-c0, r3-c1 (4 frames) */
.exercise-clean-and-press { animation: anim-clean-and-press 2s infinite steps(1); }
@keyframes anim-clean-and-press {
  0%, 25% { background-position: 80% 50%; }
  25.01%, 50% { background-position: 100% 50%; }
  50.01%, 75% { background-position: 0% 75%; }
  75.01%, 100% { background-position: 20% 75%; }
}

/* Farmers Walk - r3-c2, r3-c3 */
.exercise-farmers-walk { animation: anim-farmers-walk 1s infinite steps(1); }
@keyframes anim-farmers-walk {
  0%, 50% { background-position: 40% 75%; }
  50.01%, 100% { background-position: 60% 75%; }
}

/* Turkish Get-Up - r3-c4, r3-c5, r4-c0, r4-c1 (4 frames) */
.exercise-turkish-getup { animation: anim-turkish-getup 2s infinite steps(1); }
@keyframes anim-turkish-getup {
  0%, 25% { background-position: 80% 75%; }
  25.01%, 50% { background-position: 100% 75%; }
  50.01%, 75% { background-position: 0% 100%; }
  75.01%, 100% { background-position: 20% 100%; }
}


/* ===========================================
   BATCH 10: POWER PART 2
   Grid: 6x5 (cols: 0%, 20%, 40%, 60%, 80%, 100%; rows: 0%, 25%, 50%, 75%, 100%)
   =========================================== */

/* Jump Squats - r0-c0, r0-c1, r0-c2 (3 frames) */
.exercise-jump-squats { animation: anim-jump-squats 1.5s infinite steps(1); }
@keyframes anim-jump-squats {
  0%, 33.33% { background-position: 0% 0%; }
  33.34%, 66.66% { background-position: 20% 0%; }
  66.67%, 100% { background-position: 40% 0%; }
}

/* Clap Push-Ups - r0-c3, r0-c4, r0-c5 (3 frames) */
.exercise-clap-push-ups { animation: anim-clap-push-ups 1.5s infinite steps(1); }
@keyframes anim-clap-push-ups {
  0%, 33.33% { background-position: 60% 0%; }
  33.34%, 66.66% { background-position: 80% 0%; }
  66.67%, 100% { background-position: 100% 0%; }
}

/* Battle Ropes - r1-c0, r1-c1, r1-c2 (3 frames) */
.exercise-battle-ropes { animation: anim-battle-ropes 1.5s infinite steps(1); }
@keyframes anim-battle-ropes {
  0%, 33.33% { background-position: 0% 25%; }
  33.34%, 66.66% { background-position: 20% 25%; }
  66.67%, 100% { background-position: 40% 25%; }
}

/* Sled Push - r1-c3, r1-c4 */
.exercise-sled-push { animation: anim-sled-push 1s infinite steps(1); }
@keyframes anim-sled-push {
  0%, 50% { background-position: 60% 25%; }
  50.01%, 100% { background-position: 80% 25%; }
}

/* Medicine Ball Slams - r2-c0, r2-c1, r2-c2 (3 frames) */
.exercise-medicine-ball-slams { animation: anim-medicine-ball-slams 1.5s infinite steps(1); }
@keyframes anim-medicine-ball-slams {
  0%, 33.33% { background-position: 0% 50%; }
  33.34%, 66.66% { background-position: 20% 50%; }
  66.67%, 100% { background-position: 40% 50%; }
}

/* Bear Crawls - r2-c3, r2-c4, r2-c5 (3 frames) */
.exercise-bear-crawls { animation: anim-bear-crawls 1.5s infinite steps(1); }
@keyframes anim-bear-crawls {
  0%, 33.33% { background-position: 60% 50%; }
  33.34%, 66.66% { background-position: 80% 50%; }
  66.67%, 100% { background-position: 100% 50%; }
}

/* Jumping Lunges - r3-c0, r3-c1, r3-c2 (3 frames) */
.exercise-jumping-lunges { animation: anim-jumping-lunges 1.5s infinite steps(1); }
@keyframes anim-jumping-lunges {
  0%, 33.33% { background-position: 0% 75%; }
  33.34%, 66.66% { background-position: 20% 75%; }
  66.67%, 100% { background-position: 40% 75%; }
}

/* Broad Jumps - r3-c3, r3-c4, r3-c5 (3 frames) */
.exercise-broad-jumps { animation: anim-broad-jumps 1.5s infinite steps(1); }
@keyframes anim-broad-jumps {
  0%, 33.33% { background-position: 60% 75%; }
  33.34%, 66.66% { background-position: 80% 75%; }
  66.67%, 100% { background-position: 100% 75%; }
}

/* Pistol Squat - r4-c0, r4-c1, r4-c2 (3 frames) */
.exercise-pistol-squat { animation: anim-pistol-squat 1.5s infinite steps(1); }
@keyframes anim-pistol-squat {
  0%, 33.33% { background-position: 0% 100%; }
  33.34%, 66.66% { background-position: 20% 100%; }
  66.67%, 100% { background-position: 40% 100%; }
}


/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Size variants */
.exercise-sprite.small { width: 64px; height: 64px; }
.exercise-sprite.medium { width: 100px; height: 100px; }
.exercise-sprite.large { width: 150px; height: 150px; }
.exercise-sprite.xlarge { width: 200px; height: 200px; }

/* Pause animation on hover */
.exercise-sprite:hover {
  animation-play-state: paused;
}

/* Speed variants */
.exercise-sprite.slow { animation-duration: 2s; }
.exercise-sprite.fast { animation-duration: 0.5s; }