/* ========================================
   FORM MASCOT ANIMATION SYSTEM
   ======================================== */

/* Form Mascot Animation */
.form-mascot {
	position: fixed;
	bottom: 25px;
	right: 25px;
	width: 120px;
	height: 120px;
	background: url('../img/mascot-form.webp') center/contain no-repeat;
	filter: drop-shadow(0 4px 12px rgba(45,27,78,0.15));
	transform-origin: center;
	transition: all 0.3s ease;
	z-index: 9999;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8) translateY(20px);
	pointer-events: none;
}

.form-mascot.is-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

.form-mascot.is-happy {
	animation: formCelebration 2s ease-in-out;
}

.form-mascot.is-celebrating {
	animation: formCelebration 2s ease-in-out;
}

.form-mascot.is-error {
	animation: formError 1.5s ease-in-out;
	filter: drop-shadow(0 4px 12px rgba(220, 38, 38, 0.2));
}

/* Form Mascot Speech Bubble */
.form-mascot::before {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 0;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid #ffffff;
	opacity: var(--speech-tail-opacity, 0);
	transition: opacity 0.3s ease;
}

.form-mascot .form-speech-bubble {
	position: absolute;
	bottom: 100%;
	right: 0;
	background: #ffffff;
	border: 2px solid var(--text);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.8);
	transition: all 0.3s ease;
	pointer-events: none;
	z-index: 10000;
	box-shadow: 0 4px 12px rgba(31, 25, 61, 0.15);
	max-width: 200px;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 8px;
}

.form-mascot .form-speech-bubble.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.form-mascot .form-speech-bubble.is-popping {
	animation: formBubblePop 0.4s ease-out;
}

/* Form Celebration Animation */
@keyframes formCelebration {
	0% {
		transform: scale(1) translateY(0) rotate(0deg);
	}
	15% {
		transform: scale(1.2) translateY(-10px) rotate(5deg);
	}
	30% {
		transform: scale(1.1) translateY(-5px) rotate(-3deg);
	}
	45% {
		transform: scale(1.3) translateY(-15px) rotate(8deg);
	}
	60% {
		transform: scale(1.1) translateY(-8px) rotate(-2deg);
	}
	75% {
		transform: scale(1.2) translateY(-12px) rotate(4deg);
	}
	90% {
		transform: scale(1.05) translateY(-3px) rotate(-1deg);
	}
	100% {
		transform: scale(1) translateY(0) rotate(0deg);
	}
}

/* Form Bubble Pop Animation */
@keyframes formBubblePop {
	0% {
		transform: translateY(10px) scale(0.8);
		opacity: 0;
	}
	50% {
		transform: translateY(-5px) scale(1.1);
		opacity: 1;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Form Mascot Hover Effects */
/* Form mascot hover effect removed for consistency */

/* Form Error Animation */
@keyframes formError {
	0% { transform: scale(1) translateY(0); }
	25% { transform: scale(1.1) translateY(-5px); }
	50% { transform: scale(0.95) translateY(2px); }
	75% { transform: scale(1.05) translateY(-2px); }
	100% { transform: scale(1) translateY(0); }
}

/* Mobile Responsive */
@media (max-width: 720px) {
	.form-mascot {
		width: 100px;
		height: 100px;
		bottom: 20px;
		right: 20px;
	}
	
	.form-mascot .form-speech-bubble {
		font-size: 12px;
		padding: 10px 12px;
		max-width: 150px;
	}
}