/**
 * Player Card Visual Effects
 * Floating numbers and card animations for damage, healing, and energy costs
 */

/* Damage Floater - Red, floats up and fades out */
.damage-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #ff3333;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 8px rgba(255, 51, 51, 0.8);
  animation: damage-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes damage-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -70px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120px) scale(0.8);
  }
}

/* Healing Floater - Green, floats up and fades out */
.healing-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #33ff66;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 8px rgba(51, 255, 102, 0.8);
  animation: healing-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes healing-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -60px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100px) scale(0.9);
  }
}

/* Player Card Damage Pulse - Shake and red flash */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-damage-pulse,
.cmp-player-profile-card.card-damage-pulse,
.ppc-mobile.card-damage-pulse {
  animation: damage-pulse 0.6s ease-out;
}

@keyframes damage-pulse {
  0%, 100% {
    transform: translateX(0);
    filter: none;
  }
  10% {
    transform: translateX(-5px);
    filter: brightness(1.5) sepia(0.8) hue-rotate(-10deg);
  }
  20% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-3px);
    filter: brightness(1.3) sepia(0.6) hue-rotate(-10deg);
  }
  60% {
    transform: translateX(3px);
  }
  70% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}

/* Player Card Healing Glow - Gentle green glow */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-healing-glow,
.cmp-player-profile-card.card-healing-glow,
.ppc-mobile.card-healing-glow {
  animation: healing-glow 0.8s ease-out;
}

@keyframes healing-glow {
  0%, 100% {
    filter: none;
    box-shadow: none;
  }
  50% {
    filter: brightness(1.2) saturate(1.3) hue-rotate(30deg);
    box-shadow: 0 0 20px rgba(51, 255, 102, 0.6);
  }
}

/* Health stat highlight when damaged */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-damage-pulse .stat-health,
.cmp-player-profile-card.card-damage-pulse .ppc-health,
.ppc-mobile.card-damage-pulse .ppc-health {
  animation: health-flash-damage 0.6s ease-out;
}

@keyframes health-flash-damage {
  0%, 100% {
    background-color: transparent;
  }
  30% {
    background-color: rgba(255, 51, 51, 0.4);
  }
}

/* Health stat highlight when healed */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-healing-glow .stat-health,
.cmp-player-profile-card.card-healing-glow .ppc-health,
.ppc-mobile.card-healing-glow .ppc-health {
  animation: health-flash-heal 0.8s ease-out;
}

@keyframes health-flash-heal {
  0%, 100% {
    background-color: transparent;
  }
  40% {
    background-color: rgba(51, 255, 102, 0.3);
  }
}

/* Energy Cost Floater - Yellow/Gold, floats up and fades out */
.energy-cost-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 8px rgba(255, 215, 0, 0.8);
  animation: energy-cost-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes energy-cost-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -65px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -110px) scale(0.85);
  }
}

/* VP Gain Floater - Gold, floats up and fades out */
.vp-gain-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2.2rem;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 12px rgba(255, 215, 0, 0.9);
  animation: vp-gain-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes vp-gain-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -70px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -130px) scale(0.9);
  }
}

/* Player Card VP Flash - Gold pulse */
.cmp-player-profile-card.card-vp-flash,
.ppc-mobile.card-vp-flash {
  animation: vp-card-flash 0.6s ease-out;
}

@keyframes vp-card-flash {
  0%, 100% {
    filter: none;
    box-shadow: none;
  }
  30% {
    filter: brightness(1.4) saturate(1.5) hue-rotate(10deg);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
}

/* Energy Gain Floater - Electric blue, floats up and fades out */
.energy-gain-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #64C8FF;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 10px rgba(100, 200, 255, 0.9);
  animation: energy-gain-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes energy-gain-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -65px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -115px) scale(0.85);
  }
}

/* Player Card Energy Flash - Brief yellow pulse */
.cmp-player-profile-card.card-energy-flash,
.ppc-mobile.card-energy-flash {
  animation: energy-flash 0.6s ease-out;
}

@keyframes energy-flash {
  0%, 100% {
    filter: none;
  }
  30% {
    filter: brightness(1.3) sepia(0.4) hue-rotate(30deg);
  }
}

/* VP Stat Flash - Gold glow animation */
.ppc-stat.vp.vp-flash {
  animation: vp-stat-flash 0.6s ease-out;
}

@keyframes vp-stat-flash {
  0%, 100% {
    background-color: transparent;
    box-shadow: none;
  }
  30% {
    background-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
  }
}

/* Energy Stat Flash - Yellow/Blue glow animation */
.ppc-stat.energy.energy-flash {
  animation: energy-stat-flash 0.6s ease-out;
}

@keyframes energy-stat-flash {
  0%, 100% {
    background-color: transparent;
    box-shadow: none;
  }
  30% {
    background-color: rgba(100, 200, 255, 0.4);
    box-shadow: 0 0 12px rgba(100, 200, 255, 0.6);
  }
}

/* Health Bar Flash - Red/Green glow for damage/heal */
.ppc-health-bar.health-flash {
  animation: health-bar-flash 0.6s ease-out;
}

@keyframes health-bar-flash {
  0%, 100% {
    box-shadow: none;
  }
  30% {
    box-shadow: 0 0 12px rgba(51, 255, 102, 0.6);
  }
}