/**
 * Shared Tool Animations
 *
 * Reusable animations for tool components.
 * Includes gauge reveals, score animations, and transitions.
 *
 * @package AgenticWP
 */

/* ============================================
   Gauge Reveal Animation
   ============================================ */

@keyframes gauge-reveal {
	0% {
		stroke-dashoffset: var(--gauge-circumference);
	}
	100% {
		stroke-dashoffset: var(--gauge-offset);
	}
}

.tool-gauge--animate .tool-gauge__progress {
	animation: gauge-reveal 0.8s ease-out forwards;
}

/* ============================================
   Number Count-Up Animation
   ============================================ */

@keyframes count-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

.tool-gauge--animate .tool-gauge__number,
.tool-stat--animate .tool-stat__value,
.tool-score-badge--animate .tool-score-badge__value {
	animation: count-pulse 0.3s ease-out;
}

/* ============================================
   Score Reveal Animation
   ============================================ */

@keyframes score-reveal {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.tool-score-badge--reveal {
	animation: score-reveal 0.4s ease-out forwards;
}

/* ============================================
   Fade In/Out
   ============================================ */

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.fade-in {
	animation: fade-in 0.3s ease-out forwards;
}

.fade-out {
	animation: fade-out 0.3s ease-out forwards;
}

/* ============================================
   Slide Animations
   ============================================ */

@keyframes slide-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slide-in-down {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slide-out-up {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-20px);
	}
}

@keyframes slide-out-down {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(20px);
	}
}

.slide-in-up {
	animation: slide-in-up 0.4s ease-out forwards;
}

.slide-in-down {
	animation: slide-in-down 0.4s ease-out forwards;
}

/* ============================================
   Stagger Animations
   ============================================ */

.stagger-item {
	opacity: 0;
	animation: slide-in-up 0.4s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.3s; }
.stagger-item:nth-child(7) { animation-delay: 0.35s; }
.stagger-item:nth-child(8) { animation-delay: 0.4s; }

/* ============================================
   Loading States
   ============================================ */

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.loading-pulse {
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.loading-shimmer {
	background: linear-gradient(
		90deg,
		var(--tool-bg-subtle) 0%,
		var(--tool-bg) 50%,
		var(--tool-bg-subtle) 100%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
}

/* ============================================
   Button Success State
   ============================================ */

@keyframes button-success {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.tool-export-btn--success {
	animation: button-success 0.3s ease-out;
}

/* ============================================
   Shake Animation (for errors)
   ============================================ */

@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-5px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}

.shake {
	animation: shake 0.5s ease-in-out;
}

/* ============================================
   Bounce Animation
   ============================================ */

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.bounce {
	animation: bounce 0.5s ease-in-out;
}

/* ============================================
   Progress Bar Animation
   ============================================ */

@keyframes progress-indeterminate {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}

.progress-indeterminate::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 25%;
	height: 100%;
	background: var(--accent, #050E39);
	animation: progress-indeterminate 1.5s ease-in-out infinite;
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.tool-gauge--animate .tool-gauge__progress {
		animation: none;
		stroke-dashoffset: var(--gauge-offset);
	}

	.stagger-item {
		opacity: 1;
		animation: none;
	}
}