/**
 * Shared Blob Background Component
 *
 * Reusable classes for animated blob backgrounds used across sections.
 * Extracted from individual section files to reduce duplication.
 *
 * @package AgenticWP
 */

/* ==========================================
   BLOB CONTAINER BASE CLASS
   ========================================== */

/**
 * Base container for blob backgrounds.
 * Position this absolutely within a relatively positioned parent section.
 */
.blob-container {
	position: absolute;
	inset: 0; /* Shorthand for top: 0, right: 0, bottom: 0, left: 0 */
	overflow: hidden;
	z-index: 0;
	pointer-events: none; /* Allow clicks to pass through to content */
}

/* ==========================================
   BLOB BASE CLASS
   ========================================== */

/**
 * Base blob element - 300px circle with gradient and blend mode.
 * Individual blobs get positioned using .blob-1 through .blob-5 utilities.
 */
.blob {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		currentColor 0%,
		rgba(255, 255, 255, 0.1) 100%
	);
	mix-blend-mode: multiply;
	opacity: 0.7;
	will-change: transform;
}

/* ==========================================
   BLOB POSITIONING UTILITIES
   ========================================== */

/**
 * Standard blob positions used across all sections.
 * These provide consistent placement patterns.
 */

/* Blob 1: Top-left */
.blob-1 {
	top: 10%;
	left: 5%;
}

/* Blob 2: Top-right */
.blob-2 {
	top: 15%;
	right: 10%;
}

/* Blob 3: Bottom-left */
.blob-3 {
	bottom: 20%;
	left: 15%;
}

/* Blob 4: Bottom-right */
.blob-4 {
	bottom: 10%;
	right: 5%;
}

/* Blob 5: Center */
.blob-5 {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* ==========================================
   RESPONSIVE: MOBILE (<680px)
   ========================================== */

@media (max-width: 680px) {
	/* Smaller blobs on mobile for performance */
	.blob {
		width: 200px;
		height: 200px;
	}

	/* Hide blobs 4-5 on small screens for performance */
	.blob-4,
	.blob-5 {
		display: none;
	}
}

/* ==========================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
	/* Remove all blob animations for users who prefer reduced motion */
	.blob {
		animation: none !important;
	}

	/* Keep blobs in static positions */
	.blob-1,
	.blob-2,
	.blob-3,
	.blob-4 {
		transform: none;
	}

	/* Center blob stays centered */
	.blob-5 {
		transform: translate(-50%, -50%);
	}
}