/*
 * Background Name: Christmas Aurora - Seamless Loop
 * Description: Dealer-portal green ribbons with emerald, mint and pale-green highlights drift around a vivid closed path.
 * Category: Christmas
 */

.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-hero,
.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-gate-hero {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
	background:
		radial-gradient(ellipse at 12% 84%, rgba(26, 170, 142, 0.34), transparent 42%),
		radial-gradient(ellipse at 88% 15%, rgba(145, 226, 193, 0.14), transparent 38%),
		radial-gradient(ellipse at 58% 76%, rgba(9, 116, 110, 0.08), transparent 36%),
		linear-gradient(145deg, #022c29 0%, #043f3b 54%, #075c55 100%) !important;
}

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

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

.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-hero::before,
.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-hero::after,
.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-gate-hero::before,
.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-gate-hero::after {
	position: absolute !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	pointer-events: none !important;
	box-shadow: none !important;
	content: "" !important;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 0 50%, rgba(0, 0, 0, 0.86) 61%, rgba(0, 0, 0, 0.42) 72%, transparent 84%);
	mask-image: radial-gradient(ellipse at center, #000 0 50%, rgba(0, 0, 0, 0.86) 61%, rgba(0, 0, 0, 0.42) 72%, transparent 84%);
	will-change: transform, opacity !important;
}

.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-hero::before,
.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-gate-hero::before {
	z-index: 1 !important;
	inset: -74% -46% !important;
	background:
		linear-gradient(72deg, transparent 0 5%, rgba(26, 170, 142, 0.14) 11%, rgba(26, 170, 142, 0.44) 19%, rgba(145, 226, 193, 0.18) 29%, transparent 39%, rgba(4, 63, 59, 0.42) 51%, rgba(9, 116, 110, 0.12) 63%, transparent 72%, rgba(26, 170, 142, 0.28) 82%, rgba(214, 247, 229, 0.13) 91%, transparent 100%),
		linear-gradient(108deg, transparent 0 15%, rgba(214, 247, 229, 0.18) 27%, transparent 39%, rgba(145, 226, 193, 0.17) 51%, rgba(26, 170, 142, 0.24) 59%, transparent 69%, rgba(4, 63, 59, 0.32) 80%, rgba(9, 116, 110, 0.08) 88%, transparent 100%),
		radial-gradient(ellipse at 18% 74%, rgba(26, 170, 142, 0.34), transparent 35%),
		radial-gradient(ellipse at 84% 24%, rgba(4, 63, 59, 0.32), transparent 29%);
	filter: blur(14px);
	opacity: 0.98;
	transform: translate3d(-12%, 0, 0) skewY(-7deg) scale(1.08);
	animation: thdp-christmas-aurora-ribbon-orbit 14s linear infinite;
}

.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-hero::after,
.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-gate-hero::after {
	z-index: 2 !important;
	inset: -64% -40% !important;
	background:
		radial-gradient(ellipse at 20% 73%, rgba(26, 170, 142, 0.36), transparent 36%),
		radial-gradient(ellipse at 80% 23%, rgba(4, 63, 59, 0.34), transparent 30%),
		radial-gradient(ellipse at 67% 79%, rgba(9, 116, 110, 0.12), transparent 27%),
		radial-gradient(ellipse at 38% 27%, rgba(214, 247, 229, 0.18), transparent 25%),
		radial-gradient(ellipse at 53% 54%, rgba(26, 170, 142, 0.18), transparent 23%);
	filter: blur(11px);
	opacity: 0.84;
	transform: translate3d(9%, -16%, 0) scale(1.04);
	animation: thdp-christmas-aurora-glow-orbit 18s linear infinite;
}

@keyframes thdp-christmas-aurora-ribbon-orbit {
	0%,
	100% {
		transform: translate3d(-12%, 0, 0) skewY(-7deg) scale(1.08);
	}

	12.5% {
		transform: translate3d(-8.5%, -14.1%, 0) skewY(-6deg) scale(1.09);
	}

	25% {
		transform: translate3d(0%, -20%, 0) skewY(-5deg) scale(1.1);
	}

	37.5% {
		transform: translate3d(8.5%, -14.1%, 0) skewY(-4deg) scale(1.09);
	}

	50% {
		transform: translate3d(12%, 0, 0) skewY(-3deg) scale(1.08);
	}

	62.5% {
		transform: translate3d(8.5%, 14.1%, 0) skewY(-4deg) scale(1.07);
	}

	75% {
		transform: translate3d(0%, 20%, 0) skewY(-5deg) scale(1.06);
	}

	87.5% {
		transform: translate3d(-8.5%, 14.1%, 0) skewY(-6deg) scale(1.07);
	}
}

@keyframes thdp-christmas-aurora-glow-orbit {
	0%,
	100% {
		transform: translate3d(9%, -16%, 0) scale(1.04);
	}

	25% {
		transform: translate3d(12%, 13%, 0) scale(1.06);
	}

	50% {
		transform: translate3d(-9%, 16%, 0) scale(1.03);
	}

	75% {
		transform: translate3d(-12%, -13%, 0) scale(1.01);
	}
}

@media (max-width: 720px) {
	.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-hero::before,
	.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-gate-hero::before {
		filter: blur(11px);
		opacity: 0.74;
	}

	.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-hero::after,
	.thdp-v2.thdp-hero-bg--christmas-aurora-seamless-loop .thdp-gate-hero::after {
		filter: blur(9px);
		opacity: 0.58;
	}
}

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