/**
 * Anyfor Login / Register aurora background.
 * Scoped through the body class added by anyfor-auth-aurora.php.
 */

body.anyfor-auth-aurora {
	--anyfor-auth-silver: #f3f6f5;
	--anyfor-auth-blue: 22, 140, 245;
	--anyfor-auth-teal: 38, 198, 181;
	--anyfor-auth-magenta: 216, 11, 239;
	--anyfor-auth-gold: 223, 193, 59;
	background: var(--anyfor-auth-silver);
}

body.anyfor-auth-aurora .elementor > .elementor-top-section {
	position: relative;
	isolation: isolate;
	overflow: hidden !important;
	background:
		radial-gradient(circle at 78% 18%, rgba(var(--anyfor-auth-blue), .10), transparent 33%),
		radial-gradient(circle at 88% 82%, rgba(var(--anyfor-auth-teal), .12), transparent 36%),
		linear-gradient(135deg, #f7f9f8 0%, var(--anyfor-auth-silver) 48%, #edf3f4 100%) !important;
}

body.anyfor-auth-aurora .elementor > .elementor-top-section::before,
body.anyfor-auth-aurora .elementor > .elementor-top-section::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

body.anyfor-auth-aurora .elementor > .elementor-top-section::before {
	top: -34%;
	right: -18%;
	bottom: -34%;
	left: 30%;
	background:
		radial-gradient(circle at 18% 28%, rgba(var(--anyfor-auth-blue), .22) 0, rgba(var(--anyfor-auth-blue), 0) 35%),
		radial-gradient(circle at 70% 26%, rgba(var(--anyfor-auth-magenta), .12) 0, rgba(var(--anyfor-auth-magenta), 0) 31%),
		radial-gradient(circle at 58% 76%, rgba(var(--anyfor-auth-teal), .22) 0, rgba(var(--anyfor-auth-teal), 0) 38%),
		radial-gradient(circle at 90% 58%, rgba(var(--anyfor-auth-gold), .10) 0, rgba(var(--anyfor-auth-gold), 0) 25%);
	filter: blur(42px);
	opacity: .82;
	transform: translate3d(0, 0, 0) scale(1.03);
	transform-origin: center;
	will-change: transform, opacity;
	animation: anyfor-auth-aurora-float 22s ease-in-out infinite alternate;
}

body.anyfor-auth-aurora .elementor > .elementor-top-section::after {
	inset: 0;
	background-image: radial-gradient(circle, rgba(20, 67, 76, .18) 1px, transparent 1.35px);
	background-position: 0 0;
	background-size: 42px 42px;
	opacity: .16;
	-webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 64%, rgba(0, 0, 0, .72));
	mask-image: linear-gradient(90deg, transparent 34%, #000 64%, rgba(0, 0, 0, .72));
	will-change: background-position;
	animation: anyfor-auth-particles-drift 30s linear infinite;
}

body.anyfor-auth-aurora .elementor > .elementor-top-section > .elementor-container {
	position: relative;
	z-index: 1;
}

/*
 * Use one translucent surface for the whole authentication card. Keeping the
 * nested Workreap container transparent prevents two white alpha layers from
 * compositing into visibly different shades.
 */
body.anyfor-auth-aurora .elementor > .elementor-top-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
	position: relative;
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, .76);
	border-radius: 16px;
	background: rgba(255, 255, 255, .75) !important;
	box-shadow: 0 24px 70px rgba(31, 67, 73, .10);
	-webkit-backdrop-filter: blur(12px) saturate(115%);
	backdrop-filter: blur(12px) saturate(115%);
}

body.anyfor-auth-aurora .wr-loginconatiner {
	position: relative;
	z-index: 2;
	border: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@keyframes anyfor-auth-aurora-float {
	0% {
		transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-1deg);
		opacity: .72;
	}
	45% {
		transform: translate3d(3%, 2%, 0) scale(1.08) rotate(1deg);
		opacity: .88;
	}
	100% {
		transform: translate3d(-1%, 4%, 0) scale(1.04) rotate(-.5deg);
		opacity: .78;
	}
}

@keyframes anyfor-auth-particles-drift {
	to { background-position: 84px 42px; }
}

@media (max-width: 1024px) {
	body.anyfor-auth-aurora .elementor > .elementor-top-section::before {
		right: -36%;
		left: -12%;
		opacity: .62;
	}

	body.anyfor-auth-aurora .elementor > .elementor-top-section::after {
		opacity: .10;
		-webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 58%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 8%, #000 58%, transparent 100%);
	}
}

@media (max-width: 767px) {
	body.anyfor-auth-aurora .elementor > .elementor-top-section::before {
		top: -25%;
		right: -65%;
		bottom: -20%;
		left: -45%;
		filter: blur(34px);
		opacity: .52;
		animation-duration: 26s;
	}

	body.anyfor-auth-aurora .elementor > .elementor-top-section::after {
		background-size: 48px 48px;
		opacity: .07;
	}

	body.anyfor-auth-aurora .elementor > .elementor-top-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
		background: rgba(255, 255, 255, .75) !important;
		box-shadow: 0 18px 48px rgba(31, 67, 73, .09);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.anyfor-auth-aurora .elementor > .elementor-top-section::before,
	body.anyfor-auth-aurora .elementor > .elementor-top-section::after {
		animation: none !important;
		will-change: auto;
	}
}