/* LAZY LEGEND — exercise figure animations
   The Figure component renders a stick-figure with named body parts
   (head, torso, lUpper, lFore, rUpper, rFore, lThigh, lShin, rThigh, rShin).
   Each animation key drives transforms on those parts via CSS keyframes.
   Origin convention: figure SVG is 400×500, ground at y=470. */

.figure-svg {
  width: 100%;
  max-width: 540px;
  height: auto;
}
.figure-svg .stroke { stroke: #F5F5F2; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.figure-svg .head   { fill: #F5F5F2; stroke: none; }
.figure-svg .accent { stroke: #C8FF2E; stroke-width: 14; stroke-linecap: round; fill: none; }

/* Wrap groups have transform-origin set inline near joints */
.fg-head      { transform-origin: 200px 110px; }
.fg-torso     { transform-origin: 200px 230px; }
.fg-l-upper   { transform-origin: 200px 200px; }
.fg-l-fore    { transform-origin: 230px 290px; }
.fg-r-upper   { transform-origin: 200px 200px; }
.fg-r-fore    { transform-origin: 170px 290px; }
.fg-l-thigh   { transform-origin: 200px 320px; }
.fg-l-shin    { transform-origin: 230px 400px; }
.fg-r-thigh   { transform-origin: 200px 320px; }
.fg-r-shin    { transform-origin: 170px 400px; }
.fg-body      { transform-origin: 200px 320px; }

/* ===== animation: neckRolls — rotate head ===== */
.anim-neckRolls .fg-head { animation: neckRoll 3s linear infinite; }
@keyframes neckRoll {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(20deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-20deg); }
  100% { transform: rotate(0deg); }
}

/* ===== shoulderRolls ===== */
.anim-shoulderRolls .fg-l-upper { animation: shoulderRollL 2s ease-in-out infinite; }
.anim-shoulderRolls .fg-r-upper { animation: shoulderRollR 2s ease-in-out infinite; }
@keyframes shoulderRollL {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(8deg) translateY(-4px); }
  75%      { transform: rotate(-8deg) translateY(4px); }
}
@keyframes shoulderRollR {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-8deg) translateY(-4px); }
  75%      { transform: rotate(8deg) translateY(4px); }
}

/* ===== armCircles ===== */
.anim-armCircles .fg-l-upper { animation: armCircleL 2.4s linear infinite; }
.anim-armCircles .fg-r-upper { animation: armCircleR 2.4s linear infinite; }
@keyframes armCircleL { 0% { transform: rotate(-180deg);} 100% { transform: rotate(180deg);} }
@keyframes armCircleR { 0% { transform: rotate(180deg);}  100% { transform: rotate(-180deg);} }

/* ===== sideStretch ===== */
.anim-sideStretch .fg-body { animation: sideBend 3s ease-in-out infinite; }
.anim-sideStretch .fg-l-upper { animation: armUpStretchL 3s ease-in-out infinite; }
.anim-sideStretch .fg-r-upper { animation: armUpStretchR 3s ease-in-out infinite; }
@keyframes sideBend {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(15deg); }
  50%      { transform: rotate(0deg); }
  75%      { transform: rotate(-15deg); }
}
@keyframes armUpStretchL {
  0%, 50%, 100% { transform: rotate(0deg); }
  25%           { transform: rotate(-160deg); }
}
@keyframes armUpStretchR {
  0%, 50%, 100% { transform: rotate(0deg); }
  75%           { transform: rotate(160deg); }
}

/* ===== catCow — figure on hands and knees, arching ===== */
.anim-catCow .figure-body-group { animation: catCow 2.4s ease-in-out infinite; transform-origin: 200px 350px; }
@keyframes catCow {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-4px) scaleY(0.9); }
}

/* ===== toeTouch ===== */
.anim-toeTouch .figure-body-group { animation: toeTouch 2.4s ease-in-out infinite; transform-origin: 200px 320px; }
@keyframes toeTouch {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(75deg) translateY(20px); }
}

/* ===== march ===== */
.anim-march .fg-l-thigh { animation: marchL 1s ease-in-out infinite; }
.anim-march .fg-r-thigh { animation: marchR 1s ease-in-out infinite; }
.anim-march .fg-l-upper { animation: marchArmL 1s ease-in-out infinite; }
.anim-march .fg-r-upper { animation: marchArmR 1s ease-in-out infinite; }
@keyframes marchL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-50deg);} }
@keyframes marchR { 0%, 100% { transform: rotate(-50deg);} 50% { transform: rotate(0deg);} }
@keyframes marchArmL { 0%, 100% { transform: rotate(20deg);} 50% { transform: rotate(-30deg);} }
@keyframes marchArmR { 0%, 100% { transform: rotate(-30deg);} 50% { transform: rotate(20deg);} }

/* ===== kneeLifts (slower march) ===== */
.anim-kneeLifts .fg-l-thigh { animation: marchL 1.6s ease-in-out infinite; }
.anim-kneeLifts .fg-r-thigh { animation: marchR 1.6s ease-in-out infinite; }

/* ===== calfRaise ===== */
.anim-calfRaise .figure-body-group { animation: calfRaise 1.4s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes calfRaise {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}

/* ===== wallPush — figure leans forward to wall ===== */
.anim-wallPush .figure-body-group { animation: wallPush 1.8s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes wallPush {
  0%, 100% { transform: rotate(-15deg) translateX(-10px); }
  50%      { transform: rotate(-25deg) translateX(-30px); }
}

/* ===== jumpingJacks ===== */
.anim-jumpingJacks .figure-body-group { animation: jjBody 0.7s ease-in-out infinite; transform-origin: 200px 470px; }
.anim-jumpingJacks .fg-l-upper { animation: jjArmL 0.7s ease-in-out infinite; }
.anim-jumpingJacks .fg-r-upper { animation: jjArmR 0.7s ease-in-out infinite; }
.anim-jumpingJacks .fg-l-thigh { animation: jjLegL 0.7s ease-in-out infinite; }
.anim-jumpingJacks .fg-r-thigh { animation: jjLegR 0.7s ease-in-out infinite; }
@keyframes jjBody {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes jjArmL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-150deg);} }
@keyframes jjArmR { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(150deg);} }
@keyframes jjLegL { 0%, 100% { transform: rotate(0deg);}  50% { transform: rotate(25deg);} }
@keyframes jjLegR { 0%, 100% { transform: rotate(0deg);}  50% { transform: rotate(-25deg);} }

/* ===== highKnees ===== */
.anim-highKnees .fg-l-thigh { animation: hkL 0.5s ease-in-out infinite; }
.anim-highKnees .fg-r-thigh { animation: hkR 0.5s ease-in-out infinite; }
.anim-highKnees .fg-l-upper { animation: marchArmL 0.5s ease-in-out infinite; }
.anim-highKnees .fg-r-upper { animation: marchArmR 0.5s ease-in-out infinite; }
@keyframes hkL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-80deg);} }
@keyframes hkR { 0%, 100% { transform: rotate(-80deg);} 50% { transform: rotate(0deg);} }

/* ===== buttKicks ===== */
.anim-buttKicks .fg-l-shin { animation: bkL 0.5s ease-in-out infinite; }
.anim-buttKicks .fg-r-shin { animation: bkR 0.5s ease-in-out infinite; }
@keyframes bkL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(120deg);} }
@keyframes bkR { 0%, 100% { transform: rotate(120deg);} 50% { transform: rotate(0deg);} }

/* ===== squat ===== */
.anim-squat .figure-body-group { animation: squat 1.6s ease-in-out infinite; transform-origin: 200px 470px; }
.anim-squat .fg-l-upper { animation: squatArmL 1.6s ease-in-out infinite; }
.anim-squat .fg-r-upper { animation: squatArmR 1.6s ease-in-out infinite; }
@keyframes squat {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%      { transform: scaleY(0.78) translateY(36px); }
}
@keyframes squatArmL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-95deg);} }
@keyframes squatArmR { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(95deg);} }

/* ===== lunges ===== */
.anim-lunges .figure-body-group { animation: lunge 1.8s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes lunge {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(28px) translateX(-12px); }
}
.anim-lunges .fg-l-thigh { animation: lungeLegL 1.8s ease-in-out infinite; }
.anim-lunges .fg-r-thigh { animation: lungeLegR 1.8s ease-in-out infinite; }
@keyframes lungeLegL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-30deg);} }
@keyframes lungeLegR { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(30deg);} }

/* ===== situps & crunches & vups & russianTwist & bicycle — laying down view ===== */
/* For laying-down moves, the whole body group is rotated 90° (handled in JSX). */
.anim-situps .figure-body-group { animation: situp 1.6s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes situp {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-50deg); }
}
.anim-crunches .figure-body-group { animation: crunch 1.4s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes crunch {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-22deg); }
}
.anim-vups .figure-body-group { animation: vup 1.6s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes vup {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(-45deg) translateY(-8px); }
}
.anim-vups .fg-l-thigh, .anim-vups .fg-r-thigh { animation: vupLegs 1.6s ease-in-out infinite; }
@keyframes vupLegs {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-50deg); }
}

.anim-russianTwist .figure-body-group { animation: rtwist 1.4s ease-in-out infinite; transform-origin: 200px 360px; }
@keyframes rtwist {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}

.anim-bicycle .fg-l-thigh { animation: bikeL 1s linear infinite; }
.anim-bicycle .fg-r-thigh { animation: bikeR 1s linear infinite; }
.anim-bicycle .fg-l-upper { animation: bikeArmL 1s linear infinite; }
.anim-bicycle .fg-r-upper { animation: bikeArmR 1s linear infinite; }
@keyframes bikeL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-50deg);} }
@keyframes bikeR { 0%, 100% { transform: rotate(-50deg);} 50% { transform: rotate(0deg);} }
@keyframes bikeArmL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(40deg);} }
@keyframes bikeArmR { 0%, 100% { transform: rotate(40deg);} 50% { transform: rotate(0deg);} }

/* ===== plank — held position with a slow breath ===== */
.anim-plank .figure-body-group { animation: breath 3s ease-in-out infinite; transform-origin: 200px 380px; }
@keyframes breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ===== mountainClimbers ===== */
.anim-mountainClimbers .fg-l-thigh { animation: mcL 0.55s ease-in-out infinite; }
.anim-mountainClimbers .fg-r-thigh { animation: mcR 0.55s ease-in-out infinite; }
@keyframes mcL { 0%, 100% { transform: rotate(0deg);} 50% { transform: rotate(-60deg);} }
@keyframes mcR { 0%, 100% { transform: rotate(-60deg);} 50% { transform: rotate(0deg);} }

/* ===== pushups ===== */
.anim-pushups .figure-body-group { animation: pushup 1.6s ease-in-out infinite; transform-origin: 200px 380px; }
@keyframes pushup {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(28px); }
}

/* ===== tricepDips ===== */
.anim-tricepDips .figure-body-group { animation: dip 1.6s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes dip {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(40px); }
}

/* ===== gluteBridge ===== */
.anim-gluteBridge .figure-body-group { animation: bridge 1.6s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes bridge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-26px); }
}

/* ===== jumpSquat ===== */
.anim-jumpSquat .figure-body-group { animation: jumpSquat 1.4s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes jumpSquat {
  0%, 100% { transform: scaleY(1) translateY(0); }
  35%      { transform: scaleY(0.7) translateY(40px); }
  70%      { transform: scaleY(1.05) translateY(-50px); }
}

/* ===== burpee ===== */
.anim-burpee .figure-body-group { animation: burpee 2.8s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes burpee {
  0%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); }
  20%      { transform: translateY(40px) rotate(0deg) scaleY(0.7); } /* squat */
  50%      { transform: translateY(40px) rotate(-90deg) scaleY(0.6); } /* plank */
  80%      { transform: translateY(0) rotate(0deg) scaleY(1); } /* stand */
  90%      { transform: translateY(-30px) rotate(0deg) scaleY(1.04); } /* jump */
}

/* ===== sidePlank ===== */
.anim-sidePlank .figure-body-group { animation: breath 3s ease-in-out infinite; transform-origin: 200px 380px; }

/* ===== jumpLunge ===== */
.anim-jumpLunge .figure-body-group { animation: jumpLunge 1s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes jumpLunge {
  0%, 100% { transform: translateY(0) translateX(-10px); }
  50%      { transform: translateY(-20px) translateX(10px); }
}

/* ===== plankPushup ===== */
.anim-plankPushup .figure-body-group { animation: plankPush 2s ease-in-out infinite; transform-origin: 200px 380px; }
@keyframes plankPush {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(20px); }
}

/* ===== wallSit ===== */
.anim-wallSit .figure-body-group { animation: breath 3s ease-in-out infinite; transform-origin: 200px 380px; }

/* ===== pikePush ===== */
.anim-pikePush .figure-body-group { animation: pike 1.8s ease-in-out infinite; transform-origin: 200px 380px; }
@keyframes pike {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(20px); }
}

/* ===== spiderman ===== */
.anim-spiderman .figure-body-group { animation: pushup 1.6s ease-in-out infinite; transform-origin: 200px 380px; }
.anim-spiderman .fg-l-thigh { animation: spiderLeg 1.6s ease-in-out infinite; }
@keyframes spiderLeg {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-65deg); }
}

/* ===== frogJump ===== */
.anim-frogJump .figure-body-group { animation: frog 1.4s ease-in-out infinite; transform-origin: 200px 470px; }
@keyframes frog {
  0%, 100% { transform: scaleY(0.7) translateY(40px); }
  50%      { transform: scaleY(1.05) translateY(-40px); }
}

/* ===== bearCrawl ===== */
.anim-bearCrawl .fg-l-thigh { animation: marchL 0.7s ease-in-out infinite; }
.anim-bearCrawl .fg-r-thigh { animation: marchR 0.7s ease-in-out infinite; }
.anim-bearCrawl .fg-l-upper { animation: bikeArmL 0.7s ease-in-out infinite; }
.anim-bearCrawl .fg-r-upper { animation: bikeArmR 0.7s ease-in-out infinite; }

/* ===== sprint ===== */
.anim-sprint .fg-l-thigh { animation: hkL 0.32s ease-in-out infinite; }
.anim-sprint .fg-r-thigh { animation: hkR 0.32s ease-in-out infinite; }
.anim-sprint .fg-l-upper { animation: marchArmL 0.32s ease-in-out infinite; }
.anim-sprint .fg-r-upper { animation: marchArmR 0.32s ease-in-out infinite; }

/* small mascot loops — used on Start screen */
.flex-mini { animation: flexBounce 1.4s ease-in-out infinite; }
@keyframes flexBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}