@keyframes grow-x {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes shrink-x {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

@keyframes skew-x-shaking {
    0% { transform: skewX(-15deg); }
    5% { transform: skewX(15deg); }
    10% { transform: skewX(-15deg); }
    15% { transform: skewX(15deg); }
    20% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}

@keyframes punch-left {
    0% { transform: translateX(0px); }
    5% { transform: translateX(-20px); }
    10% { transform: translateX(-40px); }
    15% { transform: translateX(-60px); }
    20% { transform: translateX(-80px); }
    100% { transform: translateX(0px); }
}

@keyframes punch-right {
    0% { transform: translateX(0px); }
    5% { transform: translateX(20px); }
    10% { transform: translateX(40px); }
    15% { transform: translateX(60px); }
    20% { transform: translateX(80px); }
    100% { transform: translateX(0px); }
}

@keyframes jump-up-twice {
    0% { transform: translateY(0px); }
    15% { transform: translateY(2px); }
    20% { transform: translateY(4px); }
    35% { transform: translateY(2px); }
    50% { transform: translateY(0px); }
    65% { transform: translateY(2px); }
    75% { transform: translateY(4px); }
    85% { transform: translateY(2px); }
    100% { transform: translateY(0px); }
}

@keyframes fade-out-top {
    0% { opacity: 1; transform: translateY(-40px); }
    100% { opacity: 0; transform: translateY(-80px); }
}

/*.character-card {*/
/*    view-transition-name: character-card;*/
/*}*/

/*::view-transition-old(character-card) {*/
/*    animation: 0.25s linear both shrink-x;*/
/*}*/

/*::view-transition-new(character-card) {*/
/*    animation: 0.25s 0.25s linear both grow-x;*/
/*}*/

/*::view-transition-old(character-card) {*/
/*    animation: 0.25s linear both shrink-x;*/
/*}*/

/*::view-transition-new(character-card) {*/
/*    animation: 0.25s 0.25s linear both grow-x;*/
/*}*/

.character-card-hit {
    animation: 0.5s linear both skew-x-shaking;
}

.character-card-attack-right {
    animation: 0.5s linear both punch-right;
}

.character-card-attack-left {
    animation: 0.5s linear both punch-left;
}

.damage-number {
  animation: 2s linear both fade-out-top;
  text-align: center;
  width: 48px;
  position: absolute;
}

.character-icon-moving {
    animation: 0.5s linear both jump-up-twice;
}

/*.health-bar .progress-content {*/
/*    transition: width 2s ease;*/
/*    view-transition-name: health-bar;*/
/*}*/

::view-transition-old(*),::view-transition-new(*) {
    /*mix-blend-mode: normal;*/
    height: 100%; /* WTF why?! This took me forever to figure out! */
}

/*::view-transition-group(*){*/
/*    animation-duration: 2s;*/
/*}*/

.exp-bar .progress-content {
    /*animation-duration: 5s;*/
    /*transition: width 2s ease-out;*/
    /*animation: 0.25s linear both ;*/
    /*view-transition-name: exp-bar;*/
}

.health-bar .progress-content {
    /*animation-duration: 5s;*/
    /*transition: width 2s ease-out;*/
    /*animation: 0.25s linear both ;*/
    /*view-transition-name: health-bar;*/
}