/*
 * Pet Evolution Animation — full-screen overlay fired on successful evolve
 * AJAX. Sequence:
 *   0.0s → overlay fades in, backdrop darkens
 *   0.3s → old sprite appears, starts glowing + bouncing
 *   1.5s → flash + old sprite fades out
 *   2.0s → new sprite fades in, scales up with ray burst
 *   3.0s → "Evolution!" title + stage name slide in
 *   3.6s → overlay fades out, caller's onComplete fires (page reload)
 */

.inv-evo-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.inv-evo-overlay--play { opacity: 1; pointer-events: auto; }
.inv-evo-overlay--fade { opacity: 0; }

.inv-evo-backdrop {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(30, 30, 80, 0.88) 0%, rgba(8, 13, 26, 0.96) 80%);
}

.inv-evo-stage {
	position: relative;
	width: 320px;
	height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	z-index: 1;
}

/* Radial light rays — rotate behind the sprite for a "chosen one" vibe */
.inv-evo-rays {
	position: absolute;
	inset: -40px;
	background:
		conic-gradient(
			from 0deg,
			transparent 0deg,
			rgba(245, 158, 11, 0.35) 10deg,
			transparent 30deg,
			rgba(245, 158, 11, 0.15) 60deg,
			transparent 90deg,
			rgba(251, 191, 36, 0.35) 120deg,
			transparent 150deg,
			rgba(245, 158, 11, 0.15) 180deg,
			transparent 210deg,
			rgba(251, 191, 36, 0.35) 240deg,
			transparent 270deg,
			rgba(245, 158, 11, 0.15) 300deg,
			transparent 330deg
		);
	border-radius: 50%;
	opacity: 0;
	transform: rotate(0deg);
	animation: invEvoRays 4s linear forwards;
	filter: blur(6px);
}
@keyframes invEvoRays {
	0%   { opacity: 0; transform: rotate(0deg) scale(0.8); }
	15%  { opacity: 1; transform: rotate(90deg) scale(1); }
	50%  { opacity: 1; transform: rotate(360deg) scale(1.1); }
	80%  { opacity: 1; transform: rotate(620deg) scale(1); }
	100% { opacity: 0; transform: rotate(720deg) scale(0.9); }
}

.inv-evo-sprite {
	position: absolute;
	width: 220px;
	height: 220px;
	object-fit: contain;
	filter: drop-shadow(0 8px 24px rgba(245, 158, 11, 0.6));
}

/* Old sprite — appears first, bounces while glowing, then fades out on flash */
.inv-evo-sprite--old {
	opacity: 0;
	transform: scale(0.6);
	animation: invEvoOldSprite 3.6s ease-in-out forwards;
}
@keyframes invEvoOldSprite {
	0%   { opacity: 0;   transform: scale(0.6);                 filter: drop-shadow(0 0 0 #f59e0b); }
	10%  { opacity: 1;   transform: scale(1);                    filter: drop-shadow(0 0 12px #f59e0b); }
	30%  { opacity: 1;   transform: scale(1.05) translateY(-4px);filter: drop-shadow(0 0 24px #f59e0b); }
	40%  { opacity: 1;   transform: scale(0.95) translateY(4px); filter: drop-shadow(0 0 18px #f59e0b); }
	50%  { opacity: 1;   transform: scale(1.1)  translateY(-4px);filter: drop-shadow(0 0 40px #fbbf24); }
	55%  { opacity: 0.8; transform: scale(1.2);                  filter: brightness(3) drop-shadow(0 0 60px #ffffff); }
	60%  { opacity: 0;   transform: scale(1.5);                  filter: brightness(6) drop-shadow(0 0 80px #ffffff); }
	100% { opacity: 0;   transform: scale(1.5); }
}

/* New sprite — appears after the flash, scales up from 0 with bounce */
.inv-evo-sprite--new {
	opacity: 0;
	transform: scale(0);
	animation: invEvoNewSprite 3.6s ease-out forwards;
}
@keyframes invEvoNewSprite {
	0%,  55%  { opacity: 0; transform: scale(0); }
	60%       { opacity: 1; transform: scale(0.3); filter: brightness(3) drop-shadow(0 0 80px #ffffff); }
	70%       { opacity: 1; transform: scale(1.2); filter: brightness(1.5) drop-shadow(0 0 40px #fbbf24); }
	78%       { opacity: 1; transform: scale(0.95); filter: brightness(1.1) drop-shadow(0 0 30px #f59e0b); }
	85%       { opacity: 1; transform: scale(1.05); filter: brightness(1) drop-shadow(0 0 24px #f59e0b); }
	100%      { opacity: 1; transform: scale(1);   filter: drop-shadow(0 8px 24px rgba(245, 158, 11, 0.6)); }
}

/* White flash between old + new sprites */
.inv-evo-flash {
	position: absolute;
	inset: -40px;
	background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 60%);
	opacity: 0;
	border-radius: 50%;
	animation: invEvoFlash 3.6s ease-out forwards;
}
@keyframes invEvoFlash {
	0%, 45% { opacity: 0; transform: scale(0.4); }
	55%     { opacity: 1; transform: scale(1.4); }
	70%     { opacity: 0; transform: scale(2); }
	100%    { opacity: 0; transform: scale(2); }
}

/* Text: "Evolution!" title + stage name subtitle */
.inv-evo-text {
	position: relative;
	z-index: 2;
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	animation: invEvoText 3.6s ease-out forwards;
}
@keyframes invEvoText {
	0%, 75% { opacity: 0; transform: translateY(20px); }
	85%     { opacity: 1; transform: translateY(0); }
	100%    { opacity: 1; transform: translateY(0); }
}
.inv-evo-text__title {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: 44px;
	color: #f59e0b;
	text-shadow: 0 0 24px rgba(245, 158, 11, 0.6);
	margin-bottom: 6px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.inv-evo-text__subtitle {
	font-size: 18px;
	color: #e5e7eb;
	font-weight: 500;
}

@media (max-width: 640px) {
	.inv-evo-stage { width: 240px; height: 240px; }
	.inv-evo-sprite { width: 170px; height: 170px; }
	.inv-evo-text__title { font-size: 34px; }
	.inv-evo-text__subtitle { font-size: 15px; }
}