/* Home Hero Background */
@keyframes hero-gradient-animation {
	0% {
		--x-0: 8%;
		--c-0: #d7ff00ff;
		--y-0: 60%;
		--s-start-0: 11%;
		--s-end-0: 24%;
		--y-1: 9%;
		--s-start-1: 7%;
		--s-end-1: 62%;
		--c-1: #d7ff00ff;
		--x-1: 7%;
		--y-2: 33%;
		--s-start-2: 7%;
		--s-end-2: 62%;
		--c-2: #d7ff0005;
		--x-2: 74%;
	}

	100% {
		--x-0: 70%;
		--c-0: #d7ff00ff;
		--y-0: 4%;
		--s-start-0: 6%;
		--s-end-0: 60%;
		--y-1: 53%;
		--s-start-1: 5%;
		--s-end-1: 42%;
		--c-1: #d7ff00ff;
		--x-1: 56%;
		--y-2: 16%;
		--s-start-2: 5%;
		--s-end-2: 42%;
		--c-2: #d7ff00ff;
		--x-2: 15%;
	}
}

@property --x-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 8%;
}

@property --c-0 {
	syntax: "<color>";
	inherits: false;
	initial-value: #d7ff00ff;
}

@property --y-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 60%;
}

@property --s-start-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 11%;
}

@property --s-end-0 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 24%;
}

@property --y-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 9%;
}

@property --s-start-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 7%;
}

@property --s-end-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 62%;
}

@property --c-1 {
	syntax: "<color>";
	inherits: false;
	initial-value: #d7ff00ff;
}

@property --x-1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 7%;
}

@property --y-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 33%;
}

@property --s-start-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 7%;
}

@property --s-end-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 62%;
}

@property --c-2 {
	syntax: "<color>";
	inherits: false;
	initial-value: #d7ff0005;
}

@property --x-2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 74%;
}

.hero {
	--x-0: 8%;
	--c-0: #d7ff00ff;
	--y-0: 60%;
	--y-1: 9%;
	--c-1: #d7ff00ff;
	--x-1: 7%;
	--y-2: 33%;
	--c-2: #d7ff0005;
	--x-2: 74%;
	background-color: hsla(0, 0%, 100%, 0);
	background-image: radial-gradient(
			circle at var(--x-0) var(--y-0),
			var(--c-0) var(--s-start-0),
			transparent var(--s-end-0)
		),
		radial-gradient(
			circle at var(--x-1) var(--y-1),
			var(--c-1) var(--s-start-1),
			transparent var(--s-end-1)
		),
		radial-gradient(
			circle at var(--x-2) var(--y-2),
			var(--c-2) var(--s-start-2),
			transparent var(--s-end-2)
		);
	animation: hero-gradient-animation var(--hero-animation-duration) linear infinite alternate;
	background-blend-mode: normal, normal, normal;
}