/*
 * Background Name: Christmas Aurora
 * Description: Festive green, red and gold aurora ribbons with soft ambient glows.
 * Category: Christmas
 */

.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
	background: linear-gradient(146deg, #071b2b 0%, #0b403b 50%, #191d32 100%) !important;
}

.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero > *,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero > *,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero-grid,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-grid {
	position: relative;
	z-index: 5 !important;
}

.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-panel,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-card {
	position: relative;
	z-index: 6 !important;
}

.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::before,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::after,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::before,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::after {
	position: absolute !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	pointer-events: none !important;
	box-shadow: none !important;
	content: "" !important;
	will-change: transform, opacity, background-position, background-size !important;
}

.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::before,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::before {
	z-index: 1 !important;
	inset: -30% -12% !important;
	background:
		linear-gradient(72deg, transparent 0 14%, rgba(46, 211, 163, 0.2) 23%, transparent 35%, rgba(247, 202, 91, 0.15) 48%, transparent 59%, rgba(229, 37, 42, 0.2) 72%, transparent 86%),
		linear-gradient(112deg, transparent 0 21%, rgba(255, 255, 255, 0.07) 35%, transparent 47%, rgba(48, 210, 184, 0.18) 64%, transparent 82%);
	background-size: 190% 180%, 220% 190%;
	opacity: 0.82;
	transform: skewY(-8deg);
	animation: thdp-christmas-aurora-ribbon 15s ease-in-out infinite;
}

.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::after,
.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::after {
	z-index: 2 !important;
	inset: -22% !important;
	background:
		radial-gradient(ellipse at 84% 18%, rgba(229, 37, 42, 0.24), transparent 32%),
		radial-gradient(ellipse at 15% 78%, rgba(48, 210, 184, 0.26), transparent 38%),
		radial-gradient(ellipse at 62% 62%, rgba(247, 202, 91, 0.13), transparent 30%);
	opacity: 0.66;
	animation: thdp-christmas-aurora-glow 11s ease-in-out infinite alternate;
}

@keyframes thdp-christmas-aurora-ribbon {
	0%,
	100% {
		background-position: 0% 50%, 100% 45%;
		transform: skewY(-8deg) translate3d(0, 0, 0);
	}

	50% {
		background-position: 100% 50%, 0% 55%;
		transform: skewY(-4deg) translate3d(-2%, 1%, 0);
	}
}

@keyframes thdp-christmas-aurora-glow {
	0% {
		opacity: 0.5;
		transform: translate3d(-1%, 1%, 0) scale(1);
	}

	100% {
		opacity: 0.82;
		transform: translate3d(2%, -2%, 0) scale(1.06);
	}
}

@media (max-width: 720px) {
	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::before,
	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::before {
		opacity: 0.56;
	}

	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::after,
	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::after {
		opacity: 0.42;
	}
}

@media (prefers-reduced-motion: reduce) {
	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::before,
	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-hero::after,
	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::before,
	.thdp-v2.thdp-hero-bg--christmas-aurora .thdp-gate-hero::after {
		animation: none !important;
		transform: none !important;
	}
}