/* ────────────────────────────────────────────────────────────────
   אנימציות התרגילים — מבנה SVG אחד, שמונה תנועות.

   שלושה כללים שכל אנימציה כאן מקיימת:

   1. חוק ברזל 12 — לכל אנימציה פריים דומם שמספר את הסיפור. התנוחה
      הבסיסית של כל תרגיל היא transform *סטטי* על ‎.fig--<key>‎,
      וה-‎@keyframes רק מנדנד סביבה. עוצרים את הדף בפריים הראשון:
      הפלאנק שוכב, הסקוואט כפוף, המדרגות באלכסון. אף אחד מהם אינו
      זקוק לתנועה כדי להיות מזוהה.

      ⚠️ ה-transform הסטטי הזה **אינו** הפרה של חוק ברזל 11. החוק אוסר
      מצב התחלה שמסתיר תוכן וממתין ל-JS. כאן ה-transform **הוא** המצב
      הסופי הגלוי: בלי JS, בלי אנימציה, ועם prefers-reduced-motion —
      התנוחה נשארת בדיוק כפי שהיא. סורק שמחפש transform בגיליון חייב
      לפטור את מרחב השמות ‎.fig, וטסט המוטציה בודק את הפטור הזה.

   2. currentColor בלבד. אין כאן ולו קוד צבע אחד — הדמות יורשת את צבע
      ההורה, ולכן דארק ובהיר עובדים בלי גיליון שני.

   3. ‎@keyframes בלבד. אין JS שמניע דבר. אנימציה שדורשת סקריפט היא
      אנימציה שנעלמת אצל מי שהסקריפט לא נטען אצלו.
   ──────────────────────────────────────────────────────────────── */

.fig {
  inline-size: 100%;
  block-size: auto;
  display: block;
  overflow: visible;
  /* transform-box: view-box חיוני. בלעדיו transform-origin נמדד מול
     תיבת הגבול של כל אלמנט בנפרד, וכל מפרק מסתובב סביב עצמו במקום
     סביב הירך או הכתף. זו הסיבה שדמות "מתפרקת" באנימציה. */
  transform-box: view-box;
}

.fig * { transform-box: view-box; }

/* נקודות הסיבוב — אנטומיה, לא קסם. הערכים תואמים ל-x1/y1 של החוליה
   הראשונה בכל גפה ב-figure.html. משנים שם — משנים גם כאן. */
.fig__arm            { transform-origin: 50px 36px; }
.fig__arm--near .fig__forearm { transform-origin: 42px 48px; }
.fig__arm--far  .fig__forearm { transform-origin: 58px 48px; }
.fig__leg            { transform-origin: 50px 58px; }
.fig__leg--near .fig__shin    { transform-origin: 44px 73px; }
.fig__leg--far  .fig__shin    { transform-origin: 56px 73px; }
.fig__body           { transform-origin: 50px 58px; }

/* המדרגות מוסתרות בכל התרגילים חוץ מאחד. display ולא opacity: אלמנט
   שקוף עדיין נמצא בתיבת הגבול ומזיז את מרכז הסיבוב. */
.fig__steps { display: none; }
.fig--stairs .fig__steps  { display: block; }
.fig--stairs .fig__ground { display: none; }

/* הרגל הרחוקה דהויה — עומק בלי צל. חוק הפלטה: "עומק בא מקצה נייר
   ומקו", ואין box-shadow באף גיליון במערכת. */
.fig__leg--far,
.fig__arm--far { opacity: .45; }

/* ═══ תנוחות סטטיות — הפריים הדומם של כל תרגיל ═══ */

/* ריצה במקום: ברך אחת מורמת, ידיים כפופות. מזוהה בלי תנועה. */
.fig--run_in_place .fig__leg--near   { transform: rotate(-38deg); }
.fig--run_in_place .fig__leg--near .fig__shin { transform: rotate(58deg); }
.fig--run_in_place .fig__leg--far    { transform: rotate(12deg); }
.fig--run_in_place .fig__arm--near   { transform: rotate(-40deg); }
.fig--run_in_place .fig__arm--near .fig__forearm { transform: rotate(-55deg); }
.fig--run_in_place .fig__arm--far    { transform: rotate(35deg); }
.fig--run_in_place .fig__arm--far .fig__forearm  { transform: rotate(-50deg); }

/* סקוואט: הגוף יורד, שתי הברכיים כפופות, גב ישר וידיים קדימה. */
.fig--squats .fig__body { transform: translateY(9px); }
.fig--squats .fig__leg  { transform: rotate(-26deg); }
.fig--squats .fig__leg--far { transform: rotate(-20deg); }
.fig--squats .fig__shin { transform: rotate(50deg); }
.fig--squats .fig__arm  { transform: rotate(-72deg); }
.fig--squats .fig__forearm { transform: rotate(-14deg); }

/* שכיבות סמיכה: כל הגוף אלכסוני, נשען על ידיים ישרות. */
.fig--pushups .fig__body { transform: rotate(-72deg) translate(-8px, 12px); }
.fig--pushups .fig__arm  { transform: rotate(78deg); }
.fig--pushups .fig__forearm { transform: rotate(6deg); }
.fig--pushups .fig__leg  { transform: rotate(6deg); }
.fig--pushups .fig__shin { transform: rotate(0deg); }

/* פלאנק: הגוף מקביל לקרקע על המרפקים. הזווית חדה יותר משכיבות סמיכה,
   והמרפק כפוף — זו ההבחנה החזותית בין השניים בפריים הדומם. */
.fig--plank .fig__body { transform: rotate(-84deg) translate(-12px, 16px); }
.fig--plank .fig__arm  { transform: rotate(84deg); }
.fig--plank .fig__forearm { transform: rotate(52deg); }
.fig--plank .fig__leg  { transform: rotate(4deg); }

/* קפיצות במקום: ידיים למעלה, רגליים פשוקות. */
.fig--jumping_jacks .fig__arm--near { transform: rotate(152deg); }
.fig--jumping_jacks .fig__arm--far  { transform: rotate(-152deg); }
.fig--jumping_jacks .fig__forearm   { transform: rotate(0deg); }
.fig--jumping_jacks .fig__leg--near { transform: rotate(-22deg); }
.fig--jumping_jacks .fig__leg--far  { transform: rotate(22deg); }

/* בורפיס: הגוף כפוף באמצע התנועה, ידיים לקרקע. */
.fig--burpees .fig__body { transform: rotate(-46deg) translateY(10px); }
.fig--burpees .fig__arm  { transform: rotate(44deg); }
.fig--burpees .fig__leg  { transform: rotate(-16deg); }
.fig--burpees .fig__shin { transform: rotate(42deg); }

/* עלייה במדרגות: הדמות זזה ימינה ולמעלה, רגל מובילה על המדרגה. */
.fig--stairs .fig__body { transform: translate(-14px, -6px); }
.fig--stairs .fig__leg--near { transform: rotate(-34deg); }
.fig--stairs .fig__leg--near .fig__shin { transform: rotate(34deg); }
.fig--stairs .fig__leg--far  { transform: rotate(16deg); }
.fig--stairs .fig__arm--near { transform: rotate(-34deg); }
.fig--stairs .fig__arm--far  { transform: rotate(28deg); }

/* ═══ התנועה — נוספת על התנוחה, ורק כשמותר ═══

   שער אחד: prefers-reduced-motion: no-preference. מי שביקש פחות תנועה
   מקבל את התנוחה הסטטית שלמעלה, שהיא כשלעצמה תמונה שלמה. */

@media (prefers-reduced-motion: no-preference) {

  .fig--run_in_place .fig__leg--near { animation: fig-run-near 620ms ease-in-out infinite alternate; }
  .fig--run_in_place .fig__leg--far  { animation: fig-run-far  620ms ease-in-out infinite alternate; }
  .fig--run_in_place .fig__arm--near { animation: fig-run-far  620ms ease-in-out infinite alternate; }
  .fig--run_in_place .fig__arm--far  { animation: fig-run-near 620ms ease-in-out infinite alternate; }
  .fig--run_in_place .fig__body      { animation: fig-bob 310ms ease-in-out infinite alternate; }

  .fig--squats .fig__body { animation: fig-squat-body 1500ms ease-in-out infinite alternate; }
  .fig--squats .fig__leg  { animation: fig-squat-hip  1500ms ease-in-out infinite alternate; }
  .fig--squats .fig__shin { animation: fig-squat-knee 1500ms ease-in-out infinite alternate; }

  .fig--pushups .fig__body { animation: fig-pushup-body 1400ms ease-in-out infinite alternate; }
  .fig--pushups .fig__forearm { animation: fig-pushup-elbow 1400ms ease-in-out infinite alternate; }

  /* פלאנק הוא תרגיל סטטי, ולכן התנועה היחידה היא הנשימה. אנימציה
     גדולה כאן הייתה משקרת על מה שהתרגיל דורש. */
  .fig--plank .fig__body { animation: fig-breathe 3200ms ease-in-out infinite alternate; }

  .fig--jumping_jacks .fig__arm--near { animation: fig-jack-arm-near 700ms ease-in-out infinite alternate; }
  .fig--jumping_jacks .fig__arm--far  { animation: fig-jack-arm-far  700ms ease-in-out infinite alternate; }
  .fig--jumping_jacks .fig__leg--near { animation: fig-jack-leg-near 700ms ease-in-out infinite alternate; }
  .fig--jumping_jacks .fig__leg--far  { animation: fig-jack-leg-far  700ms ease-in-out infinite alternate; }
  .fig--jumping_jacks .fig__body      { animation: fig-hop 700ms ease-in-out infinite alternate; }

  .fig--burpees .fig__body { animation: fig-burpee-body 1800ms ease-in-out infinite alternate; }
  .fig--burpees .fig__leg  { animation: fig-burpee-leg  1800ms ease-in-out infinite alternate; }

  .fig--stairs .fig__body      { animation: fig-stairs-climb 1600ms ease-in-out infinite; }
  .fig--stairs .fig__leg--near { animation: fig-stairs-near   1600ms ease-in-out infinite; }
  .fig--stairs .fig__leg--far  { animation: fig-stairs-far    1600ms ease-in-out infinite; }

  .fig--generic .fig__body { animation: fig-breathe 3600ms ease-in-out infinite alternate; }
}

@keyframes fig-run-near { from { transform: rotate(-38deg); } to { transform: rotate(24deg); } }
@keyframes fig-run-far  { from { transform: rotate(22deg); }  to { transform: rotate(-32deg); } }
@keyframes fig-bob      { from { transform: translateY(0); }  to { transform: translateY(-3px); } }

@keyframes fig-squat-body { from { transform: translateY(9px); } to { transform: translateY(-1px); } }
@keyframes fig-squat-hip  { from { transform: rotate(-26deg); }  to { transform: rotate(-4deg); } }
@keyframes fig-squat-knee { from { transform: rotate(50deg); }   to { transform: rotate(6deg); } }

@keyframes fig-pushup-body  { from { transform: rotate(-72deg) translate(-8px, 12px); }
                              to   { transform: rotate(-72deg) translate(-8px, 20px); } }
@keyframes fig-pushup-elbow { from { transform: rotate(6deg); } to { transform: rotate(46deg); } }

@keyframes fig-breathe { from { transform: rotate(-84deg) translate(-12px, 16px) scale(1); }
                         to   { transform: rotate(-84deg) translate(-12px, 16px) scale(1.02); } }

@keyframes fig-jack-arm-near { from { transform: rotate(152deg); }  to { transform: rotate(18deg); } }
@keyframes fig-jack-arm-far  { from { transform: rotate(-152deg); } to { transform: rotate(-18deg); } }
@keyframes fig-jack-leg-near { from { transform: rotate(-22deg); }  to { transform: rotate(-3deg); } }
@keyframes fig-jack-leg-far  { from { transform: rotate(22deg); }   to { transform: rotate(3deg); } }
@keyframes fig-hop           { from { transform: translateY(-4px); } to { transform: translateY(0); } }

@keyframes fig-burpee-body { from { transform: rotate(-46deg) translateY(10px); }
                             to   { transform: rotate(-4deg)  translateY(0); } }
@keyframes fig-burpee-leg  { from { transform: rotate(-16deg); } to { transform: rotate(2deg); } }

@keyframes fig-stairs-climb {
  0%   { transform: translate(-14px, -6px); }
  50%  { transform: translate(0, -16px); }
  100% { transform: translate(-14px, -6px); }
}
@keyframes fig-stairs-near {
  0%   { transform: rotate(-34deg); }
  50%  { transform: rotate(8deg); }
  100% { transform: rotate(-34deg); }
}
@keyframes fig-stairs-far {
  0%   { transform: rotate(16deg); }
  50%  { transform: rotate(-28deg); }
  100% { transform: rotate(16deg); }
}

/* ‎fig-breathe מוגדר עם הטרנספורם של הפלאנק בתוכו, ולכן generic מקבל
   וריאנט משלו — אחרת דמות עומדת הייתה נשכבת לפתע. זהו בדיוק סוג הבאג
   ש"ערבוב מקומי הוא טוקן חדש שאיש לא מדד" מזהיר מפניו. */
@media (prefers-reduced-motion: no-preference) {
  .fig--generic .fig__body { animation-name: fig-breathe-upright; }
}
@keyframes fig-breathe-upright {
  from { transform: scale(1); }
  to   { transform: scale(1.02); }
}