/**
 * Flavors Aurora Background - pure-CSS animated gradient mesh.
 *
 * Four oversized, heavily-blurred radial-gradient blobs drift and scale to form
 * a soft flowing "aurora". The colors, blur radius and drift speed are supplied
 * per instance as CSS custom properties (--fa-c1..4, --fa-blur, --fa-speed) set
 * inline on .flavor-aurora by the widget; everything else (geometry, keyframes)
 * is static and HTTP-cacheable here. No JavaScript is involved.
 *
 * Box height / base background / radius / border and the content typography,
 * color, alignment, width and padding are applied via Elementor control
 * `selectors`, so there is no per-instance inline <style> block.
 */

.flavor-aurora {
	--fa-c1: #7c5cff;
	--fa-c2: #00d4ff;
	--fa-c3: #ff5c8a;
	--fa-c4: #22e3a5;
	--fa-blur: 70px;
	--fa-speed: 18s;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 120px;
	overflow: hidden;
	isolation: isolate;
	background-color: #070712;
}

/* Shared blob base. Each blob is a soft radial gradient, blurred and blended. */
.flavor-aurora__layer {
	position: absolute;
	width: 70%;
	height: 70%;
	border-radius: 50%;
	filter: blur( var( --fa-blur ) );
	mix-blend-mode: screen;
	opacity: 0.85;
	will-change: transform;
	pointer-events: none;
	transform: translate3d( 0, 0, 0 );
}

.flavor-aurora__layer--1 {
	top: -10%;
	left: -5%;
	background: radial-gradient( circle at center, var( --fa-c1 ) 0%, rgba( 0, 0, 0, 0 ) 70% );
	animation: flavor-aurora-drift-1 var( --fa-speed ) ease-in-out infinite alternate;
}

.flavor-aurora__layer--2 {
	top: -15%;
	right: -10%;
	left: auto;
	background: radial-gradient( circle at center, var( --fa-c2 ) 0%, rgba( 0, 0, 0, 0 ) 70% );
	animation: flavor-aurora-drift-2 calc( var( --fa-speed ) * 1.25 ) ease-in-out infinite alternate;
}

.flavor-aurora__layer--3 {
	bottom: -15%;
	left: 5%;
	top: auto;
	background: radial-gradient( circle at center, var( --fa-c3 ) 0%, rgba( 0, 0, 0, 0 ) 70% );
	animation: flavor-aurora-drift-3 calc( var( --fa-speed ) * 1.5 ) ease-in-out infinite alternate;
}

.flavor-aurora__layer--4 {
	right: -5%;
	bottom: -20%;
	top: auto;
	left: auto;
	background: radial-gradient( circle at center, var( --fa-c4 ) 0%, rgba( 0, 0, 0, 0 ) 70% );
	animation: flavor-aurora-drift-4 calc( var( --fa-speed ) * 1.1 ) ease-in-out infinite alternate;
}

@keyframes flavor-aurora-drift-1 {
	0% {
		transform: translate3d( 0, 0, 0 ) scale( 1 );
	}
	100% {
		transform: translate3d( 25%, 20%, 0 ) scale( 1.3 );
	}
}

@keyframes flavor-aurora-drift-2 {
	0% {
		transform: translate3d( 0, 0, 0 ) scale( 1.1 );
	}
	100% {
		transform: translate3d( -20%, 25%, 0 ) scale( 0.85 );
	}
}

@keyframes flavor-aurora-drift-3 {
	0% {
		transform: translate3d( 0, 0, 0 ) scale( 0.9 );
	}
	100% {
		transform: translate3d( 30%, -20%, 0 ) scale( 1.25 );
	}
}

@keyframes flavor-aurora-drift-4 {
	0% {
		transform: translate3d( 0, 0, 0 ) scale( 1.15 );
	}
	100% {
		transform: translate3d( -25%, -15%, 0 ) scale( 0.9 );
	}
}

/* Optional film-grain overlay (SVG fractal noise, no external asset). */
.flavor-aurora__grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.12;
	mix-blend-mode: overlay;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E" );
	background-size: 160px 160px;
}

.flavor-aurora__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 32px;
	color: #ffffff;
	text-align: center;
}

/*
 * Reduced motion: freeze the drift (the mesh remains visible, just static).
 */
@media ( prefers-reduced-motion: reduce ) {
	.flavor-aurora__layer {
		animation: none !important;
	}
}