/* ================================================
   EFFECTS - LP/MP/Status Animations
   ================================================ */

/* LP Damage Indicators */
.lp-damage-indicator {
	position: fixed;
	font-size: clamp(1.2rem, 3.5vw, 1.8rem);
	font-weight: 900;
	color: #ff4b6e;
	text-shadow: 0 0 8px rgba(255, 75, 110, 0.8), 0 0 16px rgba(255, 75, 110, 0.4);
	pointer-events: none;
	z-index: 1000;
	opacity: 0;
	transform: translateY(0) translateX(-50%);
	animation: lp-damage-float 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
	will-change: transform, opacity;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
}

.lp-damage-indicator--opponent {
	animation: lp-damage-float-down 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.lp-damage-indicator--counter {
	color: #00d4ff;
	font-size: clamp(1.4rem, 4vw, 2rem);
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.9), 0 0 20px rgba(0, 212, 255, 0.5);
	animation: lp-damage-float-counter 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.lp-damage-indicator--opponent.lp-damage-indicator--counter {
	animation: lp-damage-float-down-counter 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.lp-damage-indicator--ultimate {
	color: #ffaa00;
	font-size: clamp(1.6rem, 4.5vw, 2.4rem);
	text-shadow: 0 0 12px rgba(255, 170, 0, 1), 0 0 24px rgba(255, 100, 0, 0.6);
	animation: lp-damage-float-ultimate 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.lp-damage-indicator--opponent.lp-damage-indicator--ultimate {
	animation: lp-damage-float-down-ultimate 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

/* LP Damage Animations */
@keyframes lp-damage-float {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.8); }
	20% { opacity: 1; transform: translateY(-20px) translateX(-50%) scale(1); }
	80% { opacity: 0.9; transform: translateY(-60px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(-80px) translateX(-50%) scale(0.9); }
}

@keyframes lp-damage-float-down {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.8); }
	20% { opacity: 1; transform: translateY(20px) translateX(-50%) scale(1); }
	80% { opacity: 0.9; transform: translateY(60px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(80px) translateX(-50%) scale(0.9); }
}

@keyframes lp-damage-float-counter {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.7) rotate(-5deg); }
	15% { opacity: 1; transform: translateY(-25px) translateX(-50%) scale(1.1) rotate(2deg); }
	85% { opacity: 0.9; transform: translateY(-70px) translateX(-50%) scale(1) rotate(-2deg); }
	100% { opacity: 0; transform: translateY(-95px) translateX(-50%) scale(0.8) rotate(5deg); }
}

@keyframes lp-damage-float-down-counter {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.7) rotate(5deg); }
	15% { opacity: 1; transform: translateY(25px) translateX(-50%) scale(1.1) rotate(-2deg); }
	85% { opacity: 0.9; transform: translateY(70px) translateX(-50%) scale(1) rotate(2deg); }
	100% { opacity: 0; transform: translateY(95px) translateX(-50%) scale(0.8) rotate(-5deg); }
}

@keyframes lp-damage-float-ultimate {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.6) rotate(0deg); }
	10% { opacity: 1; transform: translateY(-30px) translateX(-50%) scale(1.2) rotate(-3deg); }
	20% { transform: translateY(-35px) translateX(-50%) scale(1.15) rotate(2deg); }
	85% { opacity: 1; transform: translateY(-85px) translateX(-50%) scale(1) rotate(-1deg); }
	100% { opacity: 0; transform: translateY(-110px) translateX(-50%) scale(0.7) rotate(3deg); }
}

@keyframes lp-damage-float-down-ultimate {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.6) rotate(0deg); }
	10% { opacity: 1; transform: translateY(30px) translateX(-50%) scale(1.2) rotate(3deg); }
	20% { transform: translateY(35px) translateX(-50%) scale(1.15) rotate(-2deg); }
	85% { opacity: 1; transform: translateY(85px) translateX(-50%) scale(1) rotate(1deg); }
	100% { opacity: 0; transform: translateY(110px) translateX(-50%) scale(0.7) rotate(-3deg); }
}

/* LP Value Hit Animations */
.lp-value--hit {
	animation: lp-hit-flash 0.4s ease-out;
}

.lp-value--counter-hit {
	animation: lp-counter-flash 0.6s ease-out;
}

.lp-value--ultimate-hit {
	animation: lp-ultimate-flash 0.8s ease-out;
}

@keyframes lp-hit-flash {
	0%, 100% { transform: scale(1); color: var(--text-primary); }
	15% { transform: scale(1.15); color: #ff4b6e; text-shadow: 0 0 8px rgba(255, 75, 110, 0.8); }
	30% { transform: scale(1.05); }
	50% { transform: scale(1.1); color: #ff4b6e; }
}

@keyframes lp-counter-flash {
	0%, 100% { transform: scale(1) rotate(0deg); color: var(--text-primary); }
	10% { transform: scale(1.25) rotate(-3deg); color: #00d4ff; text-shadow: 0 0 12px rgba(0, 212, 255, 1); }
	20% { transform: scale(1.15) rotate(2deg); }
	40% { transform: scale(1.2) rotate(-2deg); color: #00d4ff; }
	60% { transform: scale(1.1) rotate(1deg); }
}

@keyframes lp-ultimate-flash {
	0%, 100% { transform: scale(1) rotate(0deg); color: var(--text-primary); }
	8% { transform: scale(1.35) rotate(-5deg); color: #ffaa00; text-shadow: 0 0 16px rgba(255, 170, 0, 1); }
	16% { transform: scale(1.25) rotate(3deg); }
	24% { transform: scale(1.3) rotate(-3deg); color: #ff6b00; }
	40% { transform: scale(1.2) rotate(2deg); color: #ffaa00; }
	60% { transform: scale(1.15) rotate(-1deg); }
	80% { transform: scale(1.08); }
}

/* MP Cost Indicators */
.mp-cost-indicator {
	position: fixed;
	font-size: clamp(1rem, 3vw, 1.5rem);
	font-weight: 800;
	color: #4db8ff;
	text-shadow: 0 0 8px rgba(77, 184, 255, 0.8), 0 0 16px rgba(77, 184, 255, 0.4);
	pointer-events: none;
	z-index: 1000;
	opacity: 0;
	animation: mp-cost-float 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
	will-change: transform, opacity;
	margin: 0;
	padding: 0;
}

.mp-cost-indicator--opponent {
	animation: mp-cost-float-down 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes mp-cost-float {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.8); }
	20% { opacity: 1; transform: translateY(-15px) translateX(-50%) scale(1); }
	80% { opacity: 0.9; transform: translateY(-50px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(-70px) translateX(-50%) scale(0.9); }
}

@keyframes mp-cost-float-down {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.8); }
	20% { opacity: 1; transform: translateY(15px) translateX(-50%) scale(1); }
	80% { opacity: 0.9; transform: translateY(50px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(70px) translateX(-50%) scale(0.9); }
}

.mp-value--spent {
	animation: mp-spent-flash 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes mp-spent-flash {
	0% { transform: scale(1); color: inherit; }
	25% { transform: scale(1.15); color: #4db8ff; text-shadow: 0 0 8px rgba(77, 184, 255, 0.8); }
	50% { transform: scale(1.08); }
	100% { transform: scale(1); color: inherit; text-shadow: none; }
}

/* MP Gain Indicators */
.mp-gain-indicator {
	position: fixed;
	font-size: clamp(1rem, 3vw, 1.5rem);
	font-weight: 800;
	color: #4affb8;
	text-shadow: 0 0 8px rgba(74, 255, 184, 0.8), 0 0 16px rgba(74, 255, 184, 0.4);
	pointer-events: none;
	z-index: 1000;
	opacity: 0;
	animation: mp-gain-float 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
	will-change: transform, opacity;
	margin: 0;
	padding: 0;
}

.mp-gain-indicator--opponent {
	animation: mp-gain-float-down 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes mp-gain-float {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.8); }
	20% { opacity: 1; transform: translateY(-15px) translateX(-50%) scale(1.05); }
	80% { opacity: 0.9; transform: translateY(-50px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(-70px) translateX(-50%) scale(0.9); }
}

@keyframes mp-gain-float-down {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.8); }
	20% { opacity: 1; transform: translateY(15px) translateX(-50%) scale(1.05); }
	80% { opacity: 0.9; transform: translateY(50px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(70px) translateX(-50%) scale(0.9); }
}

.mp-value--gained {
	animation: mp-gained-flash 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes mp-gained-flash {
	0% { transform: scale(1); color: inherit; }
	25% { transform: scale(1.15); color: #4affb8; text-shadow: 0 0 8px rgba(74, 255, 184, 0.8); }
	50% { transform: scale(1.08); }
	100% { transform: scale(1); color: inherit; text-shadow: none; }
}

/* Status Badge Indicators */
.status-badge-indicator {
	position: fixed;
	font-size: clamp(0.8rem, 2.5vw, 1.2rem);
	font-weight: 700;
	color: #ffd700;
	background: rgba(0, 0, 0, 0.85);
	border: 2px solid #ffd700;
	padding: 0.3rem 0.7rem;
	text-shadow: 0 0 6px rgba(255, 215, 0, 0.8), 0 0 12px rgba(255, 215, 0, 0.4);
	box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
	pointer-events: none;
	z-index: 1000;
	opacity: 0;
	animation: status-badge-float 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
	will-change: transform, opacity;
	white-space: nowrap;
	margin: 0;
}

.status-badge-indicator--lost {
	color: #ff6b6b;
	border-color: #ff6b6b;
	text-shadow: 0 0 6px rgba(255, 107, 107, 0.8), 0 0 12px rgba(255, 107, 107, 0.4);
	box-shadow: 0 0 12px rgba(255, 107, 107, 0.4);
}

.status-badge-indicator--gained {
	color: #4affb8;
	border-color: #4affb8;
	text-shadow: 0 0 6px rgba(74, 255, 184, 0.8), 0 0 12px rgba(74, 255, 184, 0.4);
	box-shadow: 0 0 12px rgba(74, 255, 184, 0.4);
}

.status-badge-indicator--opponent {
	animation: status-badge-float-down 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes status-badge-float {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.7); }
	15% { opacity: 1; transform: translateY(-20px) translateX(-50%) scale(1.1); }
	25% { transform: translateY(-30px) translateX(-50%) scale(1); }
	75% { opacity: 1; transform: translateY(-60px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(-85px) translateX(-50%) scale(0.85); }
}

@keyframes status-badge-float-down {
	0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.7); }
	15% { opacity: 1; transform: translateY(20px) translateX(-50%) scale(1.1); }
	25% { transform: translateY(30px) translateX(-50%) scale(1); }
	75% { opacity: 1; transform: translateY(60px) translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(85px) translateX(-50%) scale(0.85); }
}

@keyframes status-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(0.9); }
}

@keyframes status-pulse-error {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.85); }
}