/* ================================================
   CARDS - Battle Card Components & Animations
   ================================================ */

/* Battle Card Base */
.battle-card {
	display: grid;
	place-items: stretch;
	width: 100%;
	height: 100%;
	pointer-events: auto;
	cursor: pointer;
	position: relative;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.battle-card--animation-hidden > :not(.status-effects) {
	visibility: hidden !important;
}

.battle-card--animation-hidden > .status-effects {
	visibility: visible !important;
}

.battle-card:active {
	transform: scale(0.98);
}

.battle-card:focus-visible {
	outline: 2px solid rgba(255, 170, 214, 0.85);
	outline-offset: 4px;
}

.battle-slot[data-state="filled"] .battle-card:hover {
	box-shadow: 0 0 18px rgba(255, 82, 120, 0.35);
}

.battle-card img {
	background-color: transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* Compact Card (Portrait View) */
.battle-card.card--compact .portrait-img {
	width: 100%;
	height: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: linear-gradient(135deg, #2b0006 0%, #160006 100%);
}

.battle-card .card__name {
	font-size: clamp(0.85rem, 2.4vw, 1.05rem);
}

.battle-card.card--compact,
.battle-slot .card--compact {
	--compact-pad: calc(var(--slot-size, 32px) * 0.06);
}

.battle-card.card--compact .card__name {
	position: absolute;
	left: var(--compact-pad, 0.5rem);
	bottom: var(--compact-pad, 0.5rem);
	margin: 0;
	padding: calc(var(--compact-pad, 0.5rem) * 0.45) calc(var(--compact-pad, 0.5rem) * 0.9);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35));
	color: var(--text-primary);
	font-size: clamp(0.75rem, 2.2vw, 0.95rem);
	border-radius: 6px;
	pointer-events: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - (var(--compact-pad, 0.5rem) * 2));
}

/* Battle Particle Effect */
.battle-particle {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 22%;
	height: 22%;
	transform: translate(-50%, -50%) scale(0.6);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255, 196, 214, 0.95) 0%, rgba(255, 82, 120, 0.75) 45%, rgba(255, 82, 120, 0) 75%);
	box-shadow: 0 0 22px rgba(255, 82, 120, 0.55), 0 0 48px rgba(255, 120, 160, 0.32);
	mix-blend-mode: screen;
	will-change: transform, opacity;
	z-index: 520;
}

.battle-particle::after,
.battle-particle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 82, 120, 0.35) 55%, rgba(255, 82, 120, 0) 90%);
	opacity: 0.65;
}

.battle-particle::before {
	filter: blur(6px);
}

.battle-particle--active {
	animation: battleParticleBurst 420ms ease-out forwards;
}

@keyframes battleParticleBurst {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
	40% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

/* Battle Card Animations */
.battle-card--animating {
	z-index: 800;
	pointer-events: none;
	will-change: transform;
}

.battle-card--charge {
	animation: battleCardCharge var(--battle-charge-duration, 650ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes battleCardCharge {
	/* WIND-UP PHASE (0-45%): Build energy and lean back */
	0% { 
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1) saturate(1);
	}
	20% { 
		/* Subtle pullback */
		transform: translate3d(calc(var(--attack-dx, 0px) * -0.08), calc(var(--attack-dy, 0px) * -0.08), 0) scale(0.96);
		filter: brightness(1.1) saturate(1.15);
	}
	45% { 
		/* Peak wind-up energy */
		transform: translate3d(calc(var(--attack-dx, 0px) * -0.15), calc(var(--attack-dy, 0px) * -0.15), 0) scale(0.92);
		filter: brightness(1.2) saturate(1.3);
	}
	
	/* IMPACT PHASE (45-60%): Explosive forward movement and strike */
	50% { 
		transform: translate3d(calc(var(--attack-dx, 0px) * 0.9), calc(var(--attack-dy, 0px) * 0.9), 0) scale(1.12);
		filter: brightness(1.5) saturate(1.5);
	}
	60% { 
		/* Full impact - card at target */
		transform: translate3d(var(--attack-dx, 0px), var(--attack-dy, 0px), 0) scale(1.08);
		filter: brightness(1.3) saturate(1.25);
	}
	
	/* RECOVERY PHASE (60-100%): Return to home with settling bounce */
	75% { 
		transform: translate3d(calc(var(--attack-dx, 0px) * 0.25), calc(var(--attack-dy, 0px) * 0.25), 0) scale(1.02);
		filter: brightness(1.05) saturate(1.05);
	}
	90% { 
		transform: translate3d(calc(var(--attack-dx, 0px) * 0.05), calc(var(--attack-dy, 0px) * 0.05), 0) scale(1);
		filter: brightness(1) saturate(1);
	}
	100% { 
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1) saturate(1);
	}
}

.battle-card--critical-hit {
	animation: battleCardCriticalHit 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes battleCardCriticalHit {
	0% { 
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1) drop-shadow(0 0 0 rgba(255, 100, 80, 0));
	}
	10% { 
		transform: translate3d(0, -6px, 0) scale(0.95);
		filter: brightness(2) drop-shadow(0 0 18px rgba(255, 100, 80, 0.8));
	}
	25% { 
		transform: translate3d(0, 4px, 0) scale(1.05);
		filter: brightness(1.6) drop-shadow(0 0 24px rgba(255, 150, 100, 0.9));
	}
	40% { 
		transform: translate3d(0, -3px, 0) scale(1.02);
		filter: brightness(1.3) drop-shadow(0 0 16px rgba(255, 100, 80, 0.6));
	}
	60% { 
		transform: translate3d(0, 1px, 0) scale(0.99);
		filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 80, 60, 0.4));
	}
	85% { 
		transform: translate3d(0, 0px, 0) scale(1);
		filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 60, 40, 0.15));
	}
	100% { 
		transform: translate3d(0, 0, 0) scale(1);
		filter: brightness(1) drop-shadow(0 0 0 rgba(255, 0, 0, 0));
	}
}

.battle-card--turn-glow {
	animation: battleCardTurnGlow 1200ms ease-in-out;
}

@keyframes battleCardTurnGlow {
	0% { box-shadow: none; }
	30% { box-shadow: 0 8px 28px rgba(255, 82, 120, 0.35), 0 0 20px rgba(255, 82, 120, 0.25); }
	50% { box-shadow: 0 12px 38px rgba(255, 82, 120, 0.45), 0 0 26px rgba(255, 82, 120, 0.35); }
	70% { box-shadow: 0 8px 28px rgba(255, 82, 120, 0.3), 0 0 18px rgba(255, 82, 120, 0.2); }
	85% { box-shadow: 0 4px 16px rgba(255, 82, 120, 0.15), 0 0 10px rgba(255, 82, 120, 0.1); }
	100% { box-shadow: none; }
}

/* Card Detail View (Full Card) */
.card {
	font-family: var(--font-family);
	letter-spacing: 0.08em;
	position: relative;
	padding: 1.1rem;
	background: linear-gradient(150deg, rgba(60, 0, 12, 0.65), rgba(20, 0, 6, 0.9));
	border: 1px solid rgba(255, 81, 104, 0.4);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
	border-radius: 10px;
	display: grid;
	gap: 0.35rem;
	cursor: pointer;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:focus-visible,
.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(255, 0, 34, 0.28);
}

.card__name {
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	margin: 0;
}

.card__title {
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.card__stats {
	display: flex;
	gap: 0.75rem;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 204, 212, 0.78);
}

.card__passive {
	margin: 0.45rem 0 0;
	font-size: 0.85rem;
	color: rgba(255, 220, 226, 0.9);
}

.card__quote {
	margin: 0.45rem 0 0.2rem;
	font-style: italic;
	font-size: 0.82rem;
	color: rgba(255, 200, 210, 0.82);
	letter-spacing: 0.08em;
}

.card__tag {
	padding: 0.18rem 0.45rem;
	border-radius: 999px;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: rgba(255, 54, 95, 0.35);
	color: rgba(255, 240, 244, 0.85);
}

/* Compact Card for Selector */
.card--compact {
	display: grid;
	place-items: center;
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	padding: 0;
	border-radius: 8px;
	--compact-pad: calc(var(--selector-slot-size) * 0.06);
	--compact-name-font: calc(var(--selector-slot-size) * 0.12);
	overflow: hidden;
	background: transparent;
	box-shadow: none;
	min-height: 0;
}

.card--compact .portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	max-width: none;
	border-radius: 0;
	box-shadow: none;
	-webkit-user-drag: none;
	background: linear-gradient(135deg, #2b0006 0%, #160006 100%);
}

.card--compact .card__name {
	position: absolute;
	left: var(--compact-pad);
	bottom: var(--compact-pad);
	margin: 0;
	padding: calc(var(--compact-pad) * 0.45) calc(var(--compact-pad) * 0.9);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35));
	color: var(--text-primary);
	font-size: var(--compact-name-font);
	border-radius: 6px;
	pointer-events: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}