/* animation.css */

/* ----- Анимация рук (без изменений) ----- */
.left-arm-clicked {
    /* Точка вращения у локтя. */
    transform-origin: 15% 60%;
    animation: waveLeft 0.8s ease-in-out;
}

.right-arm-clicked {
    /* Точка вращения у локтя. */
    transform-origin: 85% 60%;
    animation: waveRight 0.8s ease-in-out;
}

@keyframes waveLeft {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-20deg); }
    50%  { transform: rotate(8deg); }
    80%  { transform: rotate(-6deg); }
    100% { transform: rotate(0deg); }
}

@keyframes waveRight {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(20deg); }
    50%  { transform: rotate(-8deg); }
    80%  { transform: rotate(6deg); }
    100% { transform: rotate(0deg); }
}

/* ----- Анимация туловища (без изменений) ----- */
.part1-clicked {
    animation: bodyDip 0.8s ease-in-out;
}

@keyframes bodyDip {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(13px); }
    50%  { transform: translateY(-1px); }
    80%  { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

/* --------------------------------------------------------------------------- */
/* АНПРАВЛЕННАЯ АНИМАЦИЯ НОГ:
   - Верхняя часть ноги (part4 / part7) закреплена сверху (transform-origin: 50% 0%).
     Она немного едет ВНИЗ по оси Y, без наклона по X.
   - Нижняя часть ноги (part5 / part8) закреплена снизу (transform-origin: 50% 100%).
     Она чуть вращается, чтобы имитировать «сгиб колена», но НЕ ездит по Y.
   Так колено будет выглядеть подвижным, а стопа и «верх бедра» — на месте.
   Корректируйте пиксели и углы под ваш спрайт.
*/
/* --------------------------------------------------------------------------- */

/* --- Левая верхняя часть ноги (DogeGrinch_4 => .part4) --- */
.left-leg-up-clicked {
    /* «Приклеена» к верхней кромке (бедро). */
    transform-origin: 15% 60%;
    animation: bendLeftUpperLeg 0.8s ease-in-out;
}

@keyframes bendLeftUpperLeg {
    0% {
        /* Нету сдвига или поворота */
        transform: translateY(0) rotate(0deg);
    }
    20% {
        /* Спускаемся вниз на 5px, без поворота. */
        transform: translateY(0px) rotate(7deg);
    }
    50% {
        /* Немного возвращаемся. */
        transform: translateY(0px) rotate(-0.5deg);
    }
    80% {
        /* Немного возвращаемся. */
        transform: translateY(0px) rotate(1deg);
    }
    100% {
        /* Полностью вернулись на место. */
        transform: translateY(0) rotate(0deg);
    }
}

/* --- Левая нижняя часть ноги (DogeGrinch_5 => .part5) --- */
.left-leg-down-clicked {
    /* «Приклеена» к нижней кромке (ступня). */
    transform-origin: 45% 95%;
    animation: bendLeftLowerLeg 0.8s ease-in-out;
}

@keyframes bendLeftLowerLeg {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    20% {
        /* Лёгкий наклон наружу, без вертикального сдвига. */
        transform: translateY(0) rotate(-14deg);
    }
    50% {
        transform: translateY(0) rotate(2deg);
    }
    80% {
        /* Немного возвращаемся. */
        transform: translateY(0) rotate(-2deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* --- Правая верхняя часть ноги (DogeGrinch_7 => .part7) --- */
.right-leg-up-clicked {
    transform-origin: 85% 60%;
    animation: bendRightUpperLeg 0.8s ease-in-out;
}

@keyframes bendRightUpperLeg {
    0% {
        /* Нету сдвига или поворота */
        transform: translateY(0) rotate(0deg);
    }
    20% {
        /* Спускаемся вниз на 5px, без поворота. */
        transform: translateY(0px) rotate(-7deg);
    }
    50% {
        /* Немного возвращаемся. */
        transform: translateY(0px) rotate(0.5deg);
    }
    80% {
        /* Немного возвращаемся. */
        transform: translateY(0px) rotate(-1deg);
    }
    100% {
        /* Полностью вернулись на место. */
        transform: translateY(0) rotate(0deg);
    }
}

/* --- Правая нижняя часть ноги (DogeGrinch_8 => .part8) --- */
.right-leg-down-clicked {
    transform-origin: 60% 95%;
    animation: bendRightLowerLeg 0.8s ease-in-out;
}

@keyframes bendRightLowerLeg {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    20% {
        /* Лёгкий наклон наружу, без вертикального сдвига. */
        transform: translateY(0) rotate(12deg);
    }
    50% {
        transform: translateY(0px) rotate(-2deg);
    }
    80% {
        /* Немного возвращаемся. */
        transform: translateY(0) rotate(2deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}