/* pulse CARDs only*/
.pulse {
   animation: pulse 2s ;
   animation-iteration-count: 3;
   opacity: 1 !important;
}

@keyframes pulse {
   0% {
     transform:scale(0.4);
   }

   60% {
      transform:scale(0.5);
      margin-top: -12px;
   }

   100% {
      transform:scale(0.4);
   }
}

.pulseIcon {
   animation: pulseIcon 2s ;
   animation-iteration-count: 3;
   opacity: 1 !important;
}

@keyframes pulseIcon {
   0% {
     transform:scale(1);
   }

   60% {
      transform:scale(1.2);
   }

   100% {
      transform:scale(1);
   }
}



.flicker {
   animation: flicker 5s infinite alternate;
   opacity: 1;
}

@keyframes flicker {
   3%,
   5%,
   18%,
   21%,
   25%,
   53%,
   56%,
   86%,
   100% {
     opacity: 1;
   }
   0%,
   4%,
   20%,
   24%,
   55%,
   84%
    {
      opacity: 0.7
   }
}

.pulseMini {
   animation: pulseMini 2s infinite;
   opacity: 1 !important;
}

@keyframes pulseMini {
   0% {
      transform: scale(1);
   }

   60% {
      transform: scale(1.05);
      xmargin-top: -5px;
   }

   100% {
      transform: scale(1);
   }
}

.pulseMiniOnce {
   animation: pulseMini 2s 2;
   opacity: 1 !important;
}

.wrapperPulse {
   position: relative;
   height: 60px;
   overflow: hidden;
}

.wrapperPulse h2 {
   margin: 0.5em auto;
}

.pulseUp {
   animation: pulseUp 1s infinite;
   opacity: 1 !important;
}

@keyframes pulseUp {
   0% {
      transform: scale(1);
   }

   60% {
      transform: scale(1.4);
   }

   100% {
      transform: scale(1);
   }
}

.pulseBackground {
   animation: pulseBackground 1s ease-out forwards;
}

@keyframes pulseBackground {
   0% {
      background-size: 100%;
   }
   50% {
      background-size: 110%;
   }
   100% {
      background-size: 100%;
   }
}

.neon, .neonGreen {
   color: #fff;
   /*animation: flicker 5s infinite alternate;*/
   text-shadow: 0 0 4px #fff, 0 0 11px #cff;
}

.neonBlue, b.neonBlue {
   color: #fff;
   /*animation: flicker 5s infinite alternate;*/
   text-shadow: 0 0 4px #fff, 0 0 11px #cff, 0 0 19px #6ef;
}

.neonRed {
   color: #fee;
   text-shadow: 0 0 4px #fee, 0 0 11px #fcc, 0 0 19px #faa;
}

.neonOrange {
   color: orange;
   text-shadow: 0 0 4px #dd9933, 0 0 11px orange;
}

.neonBoxOrange {
   box-shadow: 0 0 4px #dd9933, 0 0 11px orange;
   border:none !important;
}

/* strong */
.neon2 {
   text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa;
}

.neonBox {
   color: #012;
   background: #cff;
   box-shadow: 0 0 2px #fff, 0 0 5px #cff, 0 0 10px #6fa, 0 0 15px #0fa;
}

.neonBoxGreen {
   box-shadow: 0 0 2px #fff, 0 0 5px #cfc, 0 0 10px #afa, 0 0 15px #6c6;
}

.neonBoxBlue {
   box-shadow: 0 0 2px #fff, 0 0 5px #aef, 0 0 10px #aef, 0 0 15px #aef;
}

.neonBoxWhite {
   color: rgba(100, 120, 100, 0.8);
   background: white;
   box-shadow: 0 0 2px #fff, 0 0 5px #efe, 0 0 10px #efe;
}

.neonBorder {
   border: 2px solid #cff;
   box-shadow: 0 0 2px #fff, 0 0 5px #cff, 0 0 10px #6fa, 0 0 15px #0fa;
}

.neonBorderLight {
   border: 1px solid #cff;
   box-shadow: 0 0 2px #fff, 0 0 5px #cff;
}

/* flashing borders */
.flashyBorder::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   animation-name: flashyBorder;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   border-radius: 6px;
}

@keyframes flashyBorder {
   0% {
      box-shadow: 0 0 17px 3px #0f0, 0 0 4px 2px #0f0;
   }
   33% {
      box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
   }
   66% {
      box-shadow: 0 0 17px 3px #d93, 0 0 4px 2px #d93;
   }
   100% {
      box-shadow: 0 0 17px 3px #0f0, 0 0 4px 2px #0f0;
   }
}


.shinyBorder {
   animation: shinyBorder 2s infinite;
}  


/* Define the animation keyframes for shadow movement */
@keyframes shinyBorder {
   0% {
      box-shadow: inset 0 0 30px whitesmoke, inset 10px 0 40px #f0f, inset -10px 0 40px #0ff, inset 10px 0 100px #f0f, inset -10px 0 100px #0ff, 0 0 50px #fff,
         -10px 0 40px #f0f, 10px 0 40px #0ff;
   }
   33% {
      box-shadow: inset 0 0 30px whitesmoke, inset -10px 0 40px #f0f, inset 10px 0 40px #0ff, inset -10px 0 100px #f0f, inset 10px 0 100px #0ff, 0 0 50px #fff,
         10px 0 40px #f0f, -10px 0 40px #0ff;
   }
   66% {
      box-shadow: inset 0 0 30px whitesmoke, inset -10px -10 40px #f0f, inset 10px -10 40px #0ff, inset -10px -10 100px #f0f, inset 10px -10 100px #0ff,
         0 0 50px #fff, 10px -10px 40px #f0f, -10px -10 40px #0ff;
   }

   100% {
      box-shadow: inset 0 0 30px whitesmoke, inset 0px -10 40px #f0f, inset 0px -10 40px #0ff, inset 0px -10 100px #f0f, inset 0px -10 100px #0ff, 0 0 50px #fff,
         0px -10px 40px #f0f, 0px -10 40px #0ff;
   }
}



.btn.highlight {
   xanimation: highlightBorder 2s infinite;
}

@keyframes highlightBorder {
   0% {
      box-shadow:0 0 4px 2px #060;
   }
   50% {
      box-shadow: 0 0 17px 3px #6d6, 0 0 4px 2px #6d6;
   }
   100% {
      box-shadow:0 0 4px 2px #060;
   }
}


.flickerText {
   animation: flickerText 5s infinite alternate;
}

@keyframes flickerText {
   0%,
   18%,
   21%,
   25%,
   53%,
   56%,
   100% {
      text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa;
   }
   20%,
   24%,
   55% {
      text-shadow: none;
   }
}

.flickerBox {
   animation: flickerBox 5s infinite alternate;
}

@keyframes flickerBox {
   0%,
   9%,
   17%,
   42%,
   58%,
   77%,
   100% {
      box-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa;
   }
   13%,
   30%,
   65% {
      box-shadow: none;
   }
}

@keyframes flash {
   0% {
      filter: brightness(100%);
   }
   35% {
      filter: brightness(250%);
   }
   100% {
      filter: brightness(100%);
   }
}

.flash {
   animation: flash 0.3s forwards;
}

.zoomIn {
   animation: zoomIn 0.3s forwards;
}

@keyframes zoomIn {
   0% {
      transform: scale(0);
   }
   90% {
      transform: scale(1.2);
   }
   100% {
      transform: scale(1);
   }
}

.sprite_explosion {
   position: absolute;
   width: 100px;
   height: 100px;
   background-image: url("../images/sprites/explosion4.png");
   background-repeat: no-repeat;
   background-size: 1600px 100px;
   animation: playExplosion 1.2s steps(16) forwards;
   z-index: 6;
   xborder: 1px dotted red;
}

@keyframes playExplosion {
   from {
      background-position: 0px 0px;
   }
   to {
      background-position: -1600px 0px;
   }
}

.blink {
   animation: blink 4s forwards;
}

@keyframes blink {
   0% {
      opacity: 1;
   }
   10%,
   30%,
   50%,
   70% {
      opacity: 0;
   }
   20%,
   40%,
   60%,
   80% {
      opacity: 1;
   }
   95% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

@keyframes blinkMessage {
   0%,
   100% {
      background-color: rgba(248, 183, 72, 0.15);
   }

   50% {
      background-color: rgba(248, 183, 72, 0.5);
   }
}

.blinkMessage {
   animation: blinkMessage 1.2s linear 2;
}


.evade {
   --scale: 0.45; /* Default scale value */
   animation: evade 1s forwards;
   transform: scale(var(--scale)); /* Apply scale transformation */
}

@keyframes evade {
   0% {
      transform: scale(var(--scale)) translateY(0); /* Combine scale and translateX */
   }
   50% {
      transform: scale(var(--scale)) translateY(-40px); /* Combine both */
   }
   100% {
      transform: scale(var(--scale)) translateY(0);
   }
}