/* Physical Impact Animations */

@keyframes lunge {
    0% {
        transform: translate(0, 0) scale(1);
        z-index: 100;
    }

    40% {
        transform: translate(var(--tx), var(--ty)) scale(1.2);
        z-index: 100;
    }

    60% {
        transform: translate(var(--tx), var(--ty)) scale(1.2);
        z-index: 100;
    }

    100% {
        transform: translate(0, 0) scale(1);
        z-index: auto;
    }
}

.anim-lunge {
    animation: lunge 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1000 !important;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    41% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.anim-shake .unit-portrait,
.anim-shake .obstacle-image {
    animation: shake 0.3s;
    animation-iteration-count: 1;
}

@keyframes dodge-left {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-30px) skewX(-10deg);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes dodge-right {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(30px) skewX(10deg);
    }

    100% {
        transform: translateX(0);
    }
}

.anim-dodge-left .unit-portrait {
    animation: dodge-left 0.4s ease-in-out;
}

.anim-dodge-right .unit-portrait {
    animation: dodge-right 0.4s ease-in-out;
}

/* Damage Numbers */
.damage-text {
    position: absolute;
    color: #ff4444;
    font-weight: 900;
    font-size: 1.8rem;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 68, 68, 0.5);
    pointer-events: none;
    animation: floatUpDmg 1.0s ease-out forwards;
    white-space: nowrap;
    z-index: 9999;
}

.damage-text.miss {
    color: #ccc;
    font-style: italic;
    font-size: 1.4rem;
    text-shadow: 1px 1px 2px #000;
}

.damage-text.heal {
    color: #4caf50;
    text-shadow: 0 0 8px #4caf50, 2px 2px 4px rgba(0, 0, 0, 0.8);
}

@keyframes floatUpDmg {
    0% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -40px) scale(1.5);
        opacity: 0;
    }
}