/* ==========================================================================
   Micro-animations & Visual FX
   ========================================================================== */

/* Screen Shake effect on game canvas */
.screen-shake {
  animation: screenShake 0.25s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes screenShake {
  10%, 90% { transform: translate3d(-2px, 2px, 0); }
  20%, 80% { transform: translate3d(3px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 1px, 0); }
  40%, 60% { transform: translate3d(3px, -1px, 0); }
}

/* Red damage flash */
.screen-damage-flash::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 40%, rgba(255, 0, 85, 0.45) 100%);
  pointer-events: none;
  animation: flashFade 0.3s ease-out forwards;
  z-index: 18;
}

@keyframes flashFade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Promotion banner glowing shimmer */
.shimmer-text {
  background: linear-gradient(90deg, #ffffff 0%, #00f0ff 25%, #ffd166 50%, #ffffff 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textShimmer 3s linear infinite;
}

@keyframes textShimmer {
  to {
    background-position: 200% center;
  }
}

/* Neon glow pulsers */
.neon-pulse-cyan {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
  animation: pulseCyan 2s infinite alternate;
}

@keyframes pulseCyan {
  0% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); }
  100% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.75); }
}

/* Weapon item selected badge */
.badge-equipped-tag {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--color-primary);
  color: #060913;
  font-family: var(--font-arcade);
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 1px;
}

/* Floating combat damage text animation */
@keyframes floatUpFade {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-35px) scale(1.2); opacity: 0; }
}