/**
 * Lightweight Background Variants
 *
 * Performance-optimized alternatives to animated blob backgrounds.
 * Use these on sections that don't need heavy animations to reduce
 * GPU load and improve scrolling performance.
 *
 * Usage:
 * 1. Add one of these classes to a section element
 * 2. Set --bg-color via inline style or CSS:
 *    style="--bg-color: var(--feature-create-bg)"
 *
 * @package AgenticWP
 */

/* ==========================================================================
   Variant 1: Subtle Gradient
   A simple top-to-transparent gradient fade
   ========================================================================== */
.bg-gradient {
	position: relative;
}

.bg-gradient::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		var(--bg-color, #f5f5f5) 0%,
		rgba(255, 255, 255, 0.5) 50%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   Variant 2: Dot Pattern
   A subtle polka dot pattern using radial gradients
   ========================================================================== */
.bg-dots {
	position: relative;
}

.bg-dots::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--bg-color, #f5f5f5) 30%, transparent);
	background-image: radial-gradient(
		circle,
		var(--bg-color, #f5f5f5) 1.5px,
		transparent 1.5px
	);
	background-size: 24px 24px;
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   Variant 3: Soft Glow
   A centered radial gradient that creates a soft spotlight effect
   ========================================================================== */
.bg-glow {
	position: relative;
}

.bg-glow::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 80% 60% at 50% 40%,
		var(--bg-color, #f5f5f5) 0%,
		rgba(255, 255, 255, 0.3) 40%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   Variant 4: Diagonal Stripes
   Subtle diagonal lines for a textured appearance
   ========================================================================== */
.bg-stripes {
	position: relative;
}

.bg-stripes::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		color-mix(in srgb, var(--bg-color, #f5f5f5) 20%, transparent) 10px,
		color-mix(in srgb, var(--bg-color, #f5f5f5) 20%, transparent) 20px
	);
	pointer-events: none;
	z-index: 0;
}

/* ==========================================================================
   Ensure content stays above background
   ========================================================================== */
.bg-gradient > *:not(.blob-container),
.bg-dots > *:not(.blob-container),
.bg-glow > *:not(.blob-container),
.bg-stripes > *:not(.blob-container) {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Reduced Motion: Disable any potential future animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.bg-gradient::before,
	.bg-dots::before,
	.bg-glow::before,
	.bg-stripes::before {
		animation: none;
	}
}