/* =============================================
   SHARED TOAST NOTIFICATION
   Used by: _chain, _classique, _family, _golden
   ============================================= */

/* =====================
   KEYFRAMES – DESKTOP
   ===================== */
@keyframes toastSlideInBounce {
	0%   { transform: translateX(400px); opacity: 0; }
	60%  { transform: translateX(-10px); }
	100% { transform: translateX(0);     opacity: 1; }
}

@keyframes toastShakeIn {
	0%   { transform: translateX(400px); opacity: 0; }
	50%  { transform: translateX(0);     opacity: 1; }
	60%  { transform: translateX(-8px);  }
	70%  { transform: translateX(8px);   }
	80%  { transform: translateX(-4px);  }
	90%  { transform: translateX(4px);   }
	100% { transform: translateX(0);     }
}

@keyframes toastSlideOut {
	0%   { transform: translateX(0);     opacity: 1; }
	100% { transform: translateX(450px); opacity: 0; }
}

/* =====================
   KEYFRAMES – MOBILE
   ===================== */
@keyframes toastSlideInBounceMobile {
	0%   { transform: translateY(-100px); opacity: 0; }
	70%  { transform: translateY(3px);    }
	100% { transform: translateY(0);      opacity: 1; }
}

@keyframes toastShakeInMobile {
	0%   { transform: translateY(-100px); opacity: 0; }
	60%  { transform: translateY(0);      opacity: 1; }
	70%  { transform: translateY(-3px);   }
	80%  { transform: translateY(3px);    }
	90%  { transform: translateY(-2px);   }
	100% { transform: translateY(0);      }
}

@keyframes toastSlideOutMobile {
	0%   { transform: translateY(0);      opacity: 1; }
	100% { transform: translateY(-120px); opacity: 0; }
}

/* =====================
   BASE TOAST
   ===================== */
.toast-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 14px 20px;
	border-radius: 12px;
	color: #f5f7fa;
	z-index: 99999;
	font-weight: 600;
	font-size: 14px;
	font-family: 'Exo 2', sans-serif;
	min-width: 320px;
	max-width: 420px;
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(20, 24, 30, 0.88);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
	will-change: transform, opacity;
	overflow: hidden;
	letter-spacing: 0.2px;
	pointer-events: none;
	animation: toastSlideInBounce 0.4s ease-out forwards;
}

/* =====================
   TYPE VARIANTS
   ===================== */
.toast-notification.success {
	background: linear-gradient(135deg, rgba(46, 96, 64, 0.28) 0%, rgba(32, 74, 48, 0.28) 100%);
	border-color: rgba(122, 191, 148, 0.7);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
	animation: toastSlideInBounce 0.4s ease-out forwards;
}

.toast-notification.error {
	background: linear-gradient(135deg, rgba(120, 52, 52, 0.28) 0%, rgba(92, 38, 38, 0.28) 100%);
	border-color: rgba(226, 139, 139, 0.75);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
	animation: toastShakeIn 0.45s ease-out forwards;
}

.toast-notification.info {
	background: linear-gradient(135deg, rgba(30, 64, 120, 0.28) 0%, rgba(20, 48, 96, 0.28) 100%);
	border-color: rgba(99, 179, 237, 0.7);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
	animation: toastSlideInBounce 0.4s ease-out forwards;
}

.toast-notification.warning {
	background: linear-gradient(135deg, rgba(120, 90, 20, 0.28) 0%, rgba(96, 68, 10, 0.28) 100%);
	border-color: rgba(245, 200, 90, 0.7);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
	animation: toastSlideInBounce 0.4s ease-out forwards;
}

/* =====================
   SLIDE OUT
   ===================== */
.toast-notification.slide-out {
	animation: toastSlideOut 0.3s ease-in forwards;
}

/* =====================
   RICH TEXT HELPERS
   ===================== */
.toast-answer {
	font-weight: 700;
	font-size: 1.05em;
	color: #f1d28a;
	letter-spacing: 0.3px;
	padding: 0 4px;
}

.toast-streak {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
	font-size: 0.95em;
	color: #c9d7ff;
	letter-spacing: 0.3px;
}

/* =====================
   MOBILE (≤ 640px)
   ===================== */
@media (max-width: 640px) {
	.toast-notification {
		left: 16px;
		right: 16px;
		top: 16px;
		min-width: auto;
		max-width: none;
		width: calc(100% - 32px);
		padding: 14px 16px;
		font-size: 13px;
		animation: toastSlideInBounceMobile 0.4s ease-out forwards;
	}

	.toast-notification.error {
		animation: toastShakeInMobile 0.5s ease-out forwards;
	}

	.toast-notification.slide-out {
		animation: toastSlideOutMobile 0.3s ease-in forwards;
	}
}