/* ============================================================
   Схематичные анимации упражнений

   Настоящих видео к упражнениям нет и в ближайшее время не будет:
   съёмка или закуп библиотеки — отдельная история. Но и мерцающая
   заглушка вместо картинки не годится: человек десять секунд смотрит
   в пустой прямоугольник и не понимает, что вообще делать.

   Здесь одна фигура и набор движений к ней. Это схема, а не техника —
   технику описывает текст под таймером; задача картинки в том, чтобы
   с одного взгляда было понятно, стоя это делают или лёжа, и что
   вообще движется.
   ============================================================ */

.figure {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 86%;
  width: auto;
}

.figure .limb,
.figure .body,
.figure .head {
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}
.figure .head {
  fill: var(--accent-dim);
}
.figure .ground {
  stroke: rgba(229, 229, 231, 0.14);
  stroke-width: 2;
}

/* Общая пружинистая кривая: движение тела не линейно. */
.figure g {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---------- Приседания ---------- */
.anim-squat .fig-body { animation-name: squat-body; }
.anim-squat .fig-leg-l { animation-name: squat-leg-l; transform-origin: top center; }
.anim-squat .fig-leg-r { animation-name: squat-leg-r; transform-origin: top center; }
.anim-squat .fig-arm-l,
.anim-squat .fig-arm-r { animation-name: squat-arms; transform-origin: top center; }

@keyframes squat-body {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(22px); }
}
@keyframes squat-leg-l {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(22px) rotate(-16deg) scaleY(0.82); }
}
@keyframes squat-leg-r {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(22px) rotate(16deg) scaleY(0.82); }
}
@keyframes squat-arms {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(22px) rotate(-70deg); }
}

/* ---------- Приседание с выпрыгиванием ---------- */
.anim-jump-squat .fig-all { animation-name: jump-squat; }
@keyframes jump-squat {
  0%, 100% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(20px) scaleY(0.86); }
  60% { transform: translateY(-26px) scaleY(1.06); }
  80% { transform: translateY(6px) scaleY(0.96); }
}

/* ---------- Выпады ---------- */
.anim-lunge .fig-leg-l { animation-name: lunge-front; transform-origin: top center; }
.anim-lunge .fig-leg-r { animation-name: lunge-back; transform-origin: top center; }
.anim-lunge .fig-body { animation-name: lunge-body; }

@keyframes lunge-front {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-26deg) translateY(6px); }
}
@keyframes lunge-back {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(24deg) translateY(6px); }
}
@keyframes lunge-body {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(16px); }
}

/* ---------- Отжимания (тело лежит под углом) ---------- */
/* Отжимания: корпус опускается к полу, опорная рука сгибается. */
.anim-pushup .fig-torso { animation-name: pushup-torso; }
.anim-pushup .fig-hip { animation-name: pushup-hip; }
@keyframes pushup-torso {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(26px); }
}
@keyframes pushup-hip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(14px); }
}

/* ---------- Планка (почти без движения, дыхание) ---------- */
/* Планка: удержание, только дыхание. */
.anim-plank .fig-all { animation-name: plank-breath; }
@keyframes plank-breath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ---------- Скручивания ---------- */
/* Скручивания: корпус поднимается к тазу, ноги на месте. */
.anim-crunch .fig-torso { animation-name: crunch-torso; transform-origin: right center; }
.anim-crunch .fig-arm { animation-name: crunch-arm; transform-origin: top center; }
@keyframes crunch-torso {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-26deg); }
}
@keyframes crunch-arm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-34deg); }
}

/* ---------- Подъёмы ног лёжа ---------- */
/* Подъёмы ног: работает таз, корпус лежит. */
.anim-leg-raise .fig-hip { animation-name: leg-raise; transform-origin: left center; }
@keyframes leg-raise {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-52deg); }
}

/* ---------- Ягодичный мост ---------- */
/* Мост: таз идёт вверх, плечи и стопы на полу. */
.anim-bridge .fig-torso { animation-name: bridge-torso; transform-origin: left center; }
.anim-bridge .fig-hip { animation-name: bridge-hip; transform-origin: left center; }
@keyframes bridge-torso {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-14deg); }
}
@keyframes bridge-hip {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(16deg); }
}

/* ---------- Джампинг-джек ---------- */
.anim-jack .fig-arm-l { animation-name: jack-arm-l; transform-origin: top center; }
.anim-jack .fig-arm-r { animation-name: jack-arm-r; transform-origin: top center; }
.anim-jack .fig-leg-l { animation-name: jack-leg-l; transform-origin: top center; }
.anim-jack .fig-leg-r { animation-name: jack-leg-r; transform-origin: top center; }
.anim-jack g { animation-duration: 1.1s; }

@keyframes jack-arm-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(150deg); }
}
@keyframes jack-arm-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-150deg); }
}
@keyframes jack-leg-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-22deg); }
}
@keyframes jack-leg-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(22deg); }
}

/* ---------- Бег на месте ---------- */
.anim-run .fig-leg-l { animation-name: run-leg-l; transform-origin: top center; }
.anim-run .fig-leg-r { animation-name: run-leg-r; transform-origin: top center; }
.anim-run .fig-arm-l { animation-name: run-leg-r; transform-origin: top center; }
.anim-run .fig-arm-r { animation-name: run-leg-l; transform-origin: top center; }
.anim-run g { animation-duration: 0.7s; animation-timing-function: ease-in-out; }
@keyframes run-leg-l {
  0%, 100% { transform: rotate(24deg); }
  50% { transform: rotate(-24deg); }
}
@keyframes run-leg-r {
  0%, 100% { transform: rotate(-24deg); }
  50% { transform: rotate(24deg); }
}

/* ---------- Подъёмы рук в стороны ---------- */
.anim-raise .fig-arm-l { animation-name: raise-l; transform-origin: top center; }
.anim-raise .fig-arm-r { animation-name: raise-r; transform-origin: top center; }
@keyframes raise-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(78deg); }
}
@keyframes raise-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-78deg); }
}

/* ---------- Супермен / лодочка ---------- */
/* Супермен: руки и ноги отрываются от пола. */
.anim-superman .fig-arm { animation-name: superman-arm; transform-origin: top center; }
.anim-superman .fig-hip { animation-name: superman-legs; transform-origin: left center; }
@keyframes superman-arm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-58deg) translateY(-6px); }
}
@keyframes superman-legs {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-22deg); }
}

/* ---------- Подъёмы на носки ---------- */
.anim-calf .fig-all { animation-name: calf; }
@keyframes calf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- Растяжка ---------- */
.anim-stretch .fig-body { animation-name: stretch-body; transform-origin: bottom center; }
.anim-stretch .fig-arm-l,
.anim-stretch .fig-arm-r { animation-name: stretch-arms; transform-origin: top center; }
.anim-stretch g { animation-duration: 4s; }
@keyframes stretch-body {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(34deg); }
}
@keyframes stretch-arms {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(-46deg); }
}

/* Уважаем системную настройку: людям с чувствительностью к движению
   бесконечная анимация на весь экран — не помощь, а раздражитель. */
@media (prefers-reduced-motion: reduce) {
  .figure g {
    animation: none !important;
  }
}

/* ============================================================
   Фотографии упражнений (публичное достояние)

   Кадры сняты в обычном зале с красной стеной и серыми штанами —
   в тёмном минималистичном интерфейсе это выглядело бы вставкой
   из другого приложения. Поэтому обесцвечиваем и красим в тон
   акцента: снимок остаётся читаемым, но перестаёт спорить с макетом.
   ============================================================ */
.wo-photo {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}
.wo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.82);
}
/* Верхний кадр проявляется и гаснет — это и есть «движение». */
.wo-frame--top {
  animation: frame-swap 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes frame-swap {
  0%, 38% { opacity: 0; }
  50%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
/* Тонировка в акцент и затемнение краёв, чтобы снимок садился в экран. */
.wo-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(13, 14, 17, 0.85) 100%),
    linear-gradient(rgba(150, 195, 150, 0.22), rgba(150, 195, 150, 0.22));
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wo-frame--top { animation: none; opacity: 1; }
}