/**
 * HBL Animated Background
 *
 * Adds a static or animated gradient background that can be enabled on Avada
 * containers and columns. Colors are driven by CSS custom properties so they can
 * be overridden per element from the builder. The values below are the defaults.
 *
 * @package HBL_Expansion_Pack_For_Avada
 */

:root {
	--cg-color-left: #fde68a;   /* amber-yellow, left */
	--cg-color-mid: #faf5ff;    /* cream base */
	--cg-color-right: #e9d5ff;  /* lavender, right */
	--cg-color-corner: #dbb6fd; /* richer purple accent */
	--cg-radius: 1.25rem;
	--cg-duration: 12s;
}

@keyframes cgRotate {
	from {
		rotate: 0deg;
	}

	to {
		rotate: 360deg;
	}
}

/* Static gradient — applies to the element itself (containers) and to the inner
   column wrapper (columns), so it works for both. */
.bg-gradient-default,
.bg-gradient-default > .fusion-column-wrapper,
.bg-gradient-default-aside {
	background:
		radial-gradient(ellipse 80% 120% at 0% 60%,
			var(--cg-color-left) 0%, transparent 70%),
		radial-gradient(ellipse 80% 120% at 100% 40%,
			var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 70%),
		var(--cg-color-mid) !important;
}

.bg-gradient-default-aside {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Animated gradient — works on any element with the class. */
.bg-gradient-animated {
	position: relative !important;
	overflow: hidden !important;
	background: var(--cg-color-mid);
}

.bg-gradient-animated::before {
	content: "";
	position: absolute;
	width: 200vmax;
	height: 200vmax;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	background:
		radial-gradient(ellipse 80% 120% at 20% 60%,
			var(--cg-color-left) 0%, transparent 50%),
		radial-gradient(ellipse 80% 120% at 80% 40%,
			var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 50%),
		var(--cg-color-mid);
	animation: cgRotate var(--cg-duration) linear infinite;
	pointer-events: none;
	z-index: 0;
	filter: blur(60px);
}

.bg-gradient-animated::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 40%,
		#ffffff 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Keep the actual content above the animated gradient layers. */
.bg-gradient-animated > * {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.bg-gradient-animated::before {
		animation: none;
	}
}