/**
 * TETRIVCI - Animations
 * Score popups, level notifications, and visual feedback
 */

.score-popup {
	position: fixed;
	pointer-events: none;
	font-weight: var(--font-weight-extrabold);
	font-size: 24px;
	color: var(--color-success);
	text-shadow: 0 2px 8px rgba(0, 255, 160, 0.5), 0 0 20px rgba(0, 255, 160, 0.3);
	z-index: 100;
	animation: scorePopup 0.8s ease-out forwards;
}

.score-popup.tetris {
	font-size: 32px;
	color: var(--color-yellow);
	text-shadow: 0 2px 12px rgba(255, 200, 0, 0.6), 0 0 30px rgba(255, 200, 0, 0.4);
}

@keyframes scorePopup {
	0% {
		opacity: 1;
		transform: translateY(0) scale(0.8);
	}
	20% {
		transform: translateY(-10px) scale(1.1);
	}
	100% {
		opacity: 0;
		transform: translateY(-60px) scale(0.9);
	}
}

.level-up-notification {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	font-weight: var(--font-weight-extrabold);
	font-size: 28px;
	color: var(--color-white);
	text-shadow: 0 2px 12px rgba(255, 255, 255, 0.5);
	z-index: 99;
	animation: levelUp 1.2s ease-out forwards;
}

@keyframes levelUp {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.5);
	}
	15% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.15);
	}
	30% {
		transform: translate(-50%, -50%) scale(1);
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.9);
	}
}