.card.used.hacked {
   opacity: 1;
   filter: none;
   z-index: 3;
}

.card .stunned,
.card .cloaked {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background-image: url(../images/card/stunned.gif);
   background-size: contain;
   background-repeat: no-repeat;
   z-index: 2;
}

.card .cloaked {
   background-image: url(../images/card/cloaked.png);
   background-position: center;
   background-size: 100% 100%;
   animation: animateCloak 10s linear infinite;
   border-radius: 20px;
}

@keyframes animateCloak {
   0% {
      opacity: 0.9;
      background-size: 100%;
   }
   20% {
      opacity: 0.2;
      background-size: 110%;
   }
   40% {
      opacity: 0.9;
      background-size: 120%;
   }
   60% {
      opacity: 0.2;
      background-size: 115%;
   }
   80% {
      opacity: 0.6;
      background-size: 125%;
   }
   100% {
      opacity: 0.9;
      background-size: 100%;
   }
}

.flickerOut {
   animation: flickerOut 2s forwards;
   animation-iteration-count: 1;
}

@keyframes flickerOut {
   0%,
   16%,
   21%,
   27%,
   40%,
   54%,
   54%,
   76% {
      opacity: 0.7;
   }
   20%,
   26%,
   41%,
   48%,
   59%,
   72% {
      opacity: 0.1;
   }
   100% {
      opacity: 0;
   }
}

.shake {
   animation: shake 0.3s ease-in-out 1;
   position: relative; /* Ensure the element can move around */
}

.shake div.cardPowers, .shake div.attributeIcons {
   xanimation: shakeCounter 0.4s ease-in-out 1;
}

@keyframes shake {
   0% {
      left: 0;
   }
   10%,
   30%,
   50%,
   70%,
   90% {
      left: -7px; /* Move left */
   }
   20%,
   40%,
   60%,
   80% {
      left: 7px; /* Move right */
   }
   100% {
      left: 0; /* Return to the original position */
   }
}


.showDamage .damageIndicator {
   animation: showDamage 2.5s forwards;
}

@keyframes showDamage {
   0% {
      opacity: 1;
      bottom: 50px;
     transform: scale(1);
   }
   100% {
      opacity: 0.4;
      bottom: 150px;
      transform: scale(1.5);
   }
}

.blender {
   position: relative;
   background-color: rgba(99, 99, 99, 0.4);
   backdrop-filter: blur(0px);
   -webkit-backdrop-filter: blur(0px);
}

.blur {
   animation: blur 2s forwards;
}

@keyframes blur {
   0% {
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
   }
   100% {
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
   }
}

.matrix-container {
   display: flex;
   overflow: hidden;
   z-index: 3;
}

.matrix-column {
   flex: 1 1 0;
   height: 170px;
   margin: 2px;
   position: relative;
   xanimation: scroll 2s linear infinite;
}

.matrix-code {
   font-size: 14px;
   font-weight: bold;
   color: #0f0;
}

@keyframes scroll {
   from {
      transform: translateY(0);
   }
   to {
      transform: translateY(-100%);
   }
}

/* card got modification */
.card.mod {
   animation: glowOnce 0.7s forwards;
   animation-iteration-count: 1;
}

@keyframes glowOnce {
   0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
   }
   50% {
      box-shadow: 0 0 20px 10px rgba(255, 255, 255, 1);
   }
   100% {
      box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.5);
   }
}

/* card got healed */
.card.healed {
   animation: healed 1.5s forwards;
   animation-iteration-count: 3;
}



@keyframes healed {
   0% {
      box-shadow: 0 0 0 0 rgba(20, 255, 0, 0.5);
   }
   30% {
      box-shadow: 0 0 20px 10px rgba(20, 255, 0, 1);
   }
   75% {
      box-shadow: 0 0 20px 10px rgba(20, 255, 0, 1);
   }
   100% {
      box-shadow: 0 0 10px 4px rgba(20, 255, 0, 0);
   }
}



.placeholder {
   animation: placeholder 0.3s forwards;
   animation-iteration-count: 1;
}

@keyframes placeholder {
   0% {
      width: 40px;
   }

   100% {
      width: 240px;
   }
}

.card.rightPlaceholder {
   animation: rightPlaceholder 0.5s forwards;
   animation-iteration-count: 1;
}

@keyframes rightPlaceholder {
   0% {
      margin-right: 0px;
   }

   100% {
      margin-right: 180px;
   }
}




.glowingBorder {
   border-radius: 30px; /* edges are often cut */ 
   animation: glowBorder 1s ease-out alternate 4 ;
}

@keyframes glowBorder {
   0% {
      box-shadow: 0 0 5px #aef;
   }
   100% {
      box-shadow: 0 0 5px #aef, 0 0 10px #aef, 0 0 15px #aef, 0 0 30px #aef;
   }
}





/* UNUSED moving border animation */

@keyframes rotateBorder {
   100% {
      transform: rotate(1turn);
   }
}

[data-rarity="4"] .animatedBorder {
   overflow: hidden;
   z-index: 0;
}

[data-rarity="4"] .animatedBorder::before {
   content: "";
   position: absolute;
   z-index: -2;
   left: -50%;
   top: -50%;
   width: 200%;
   height: 200%;

   background-repeat: no-repeat;
   background-size: 50% 50%, 50% 50%;
   background-position: 0 0, 100% 0, 100% 100%, 0 100%;
   /* background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); */
   background-image: linear-gradient(#f2e0a7 0%, #ce9b52 67%, #683c11 100%);
   animation: rotateBorder 10s linear infinite;
}

/* unused */

@keyframes tipCard {
   0% {
      transform: rotateX(0deg) rotateY(0deg);
   }
   25% {
      transform: rotateX(50deg) rotateY(0deg);
   }

   50% {
      transform: rotateX(0deg) rotateY(50deg);
   }
   50% {
      transform: rotateX(50deg) rotateY(50deg);
   }

   100% {
      transform: rotateX(0deg) rotateY(0deg);
   }
}