/**
 * Shared Animations
 * Generic animations used across multiple sections.
 * @package AgenticWP
 */

/* ========================================================================
   Blob Float Animations
   Generic floating animations for background blobs
   ======================================================================== */

@keyframes blob-float-1 {
	0%, 100% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(60px, -50px);
	}
	50% {
		transform: translate(120px, 20px);
	}
	75% {
		transform: translate(40px, 80px);
	}
}

@keyframes blob-float-2 {
	0%, 100% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(-80px, 40px);
	}
	40% {
		transform: translate(-120px, -30px);
	}
	60% {
		transform: translate(-60px, -90px);
	}
	80% {
		transform: translate(-20px, 10px);
	}
}

@keyframes blob-float-3 {
	0%, 100% {
		transform: translate(0, 0);
	}
	33% {
		transform: translate(-70px, -60px);
	}
	66% {
		transform: translate(90px, -40px);
	}
}

@keyframes blob-float-4 {
	0%, 100% {
		transform: translate(0, 0);
	}
	30% {
		transform: translate(100px, 70px);
	}
	60% {
		transform: translate(-50px, 100px);
	}
}

@keyframes blob-float-5 {
	0%, 100% {
		transform: translate(-50%, -50%);
	}
	25% {
		transform: translate(calc(-50% + 80px), calc(-50% - 60px));
	}
	50% {
		transform: translate(calc(-50% - 70px), calc(-50% + 50px));
	}
	75% {
		transform: translate(calc(-50% + 40px), calc(-50% + 80px));
	}
}

/* ========================================================================
   UI Animations
   General purpose animations for UI elements
   ======================================================================== */

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

@keyframes icon-pop-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

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

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes flow-pulse-anim {
	0% {
		width: 100%;
		height: 100%;
		opacity: 0.2;
	}
	100% {
		width: 250%;
		height: 250%;
		opacity: 0;
	}
}

/* ========================================================================
   Accessibility
   ======================================================================== */

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