/**
 * Orbs background animation.
 */

.background-animation--orbs {
	--theme-orbs-background-color: #2c3254;
	--theme-orbs-color-1: var(--theme-gradient-color-1, var(--theme-color-brand-secondary, var(--bs-secondary)));
	--theme-orbs-color-2: var(--theme-gradient-color-2, var(--theme-color-brand, var(--bs-primary)));

	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: var(--theme-orbs-background-color);
	pointer-events: none;
}

.background-animation__orb {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	animation: background-animation-orbs-float 20s infinite ease-in-out alternate;
}

.background-animation__orb--1 {
	top: -8rem;
	left: -8rem;
	width: clamp(18rem, 32vw, 28rem);
	aspect-ratio: 1;
	background-color: var(--theme-orbs-color-1);
	animation-duration: 25s;
}

.background-animation__orb--2 {
	right: -8rem;
	bottom: -10rem;
	width: clamp(22rem, 40vw, 34rem);
	aspect-ratio: 1;
	background-color: var(--theme-orbs-color-2);
	animation-duration: 22s;
	animation-delay: -5s;
}

.background-animation__orb--3 {
	top: 35%;
	left: 55%;
	width: clamp(14rem, 24vw, 22rem);
	aspect-ratio: 1;
	background-color: var(--theme-orbs-color-2);
	animation-duration: 18s;
	animation-delay: -10s;
}

@keyframes background-animation-orbs-float {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	33% {
		transform: translate3d(6rem, -3rem, 0) scale(1.2);
	}

	66% {
		transform: translate3d(-3rem, 6rem, 0) scale(.8);
	}

	100% {
		transform: translate3d(3rem, 3rem, 0) scale(1.1);
	}
}

@media screen and (max-width: 767.98px) {
	.background-animation__orb {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.background-animation__orb {
		animation: none;
	}
}