/* CSS @property rules removed for better browser compatibility */

.panel {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #1a1616;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	opacity: 1;
}


.panel-image::before {
	
}

.panel-lore::before {
	
}

.panel-content {
	position: relative;
	z-index: 2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}


@keyframes moveGradientsImage {
	0%,
	100% {
		--yellow-x: -20%;
		--yellow-y: 75%;
		--purple-x: 65%;
		--purple-y: -40%;
		--red-x: 20%;
		--red-y: 110%;
		--orange-x: 85%;
		--orange-y: 15%;
		--green-x: -10%;
		--green-y: -30%;
		--yellow2-x: 55%;
		--yellow2-y: 80%;
	}
	25% {
		--yellow-x: 40%;
		--yellow-y: 130%;
		--purple-x: 10%;
		--purple-y: 25%;
		--red-x: -40%;
		--red-y: -20%;
		--orange-x: 60%;
		--orange-y: 90%;
		--green-x: 30%;
		--green-y: -60%;
		--yellow2-x: 95%;
		--yellow2-y: 45%;
	}
	50% {
		--yellow-x: 85%;
		--yellow-y: 65%;
		--purple-x: 45%;
		--purple-y: 110%;
		--red-x: 15%;
		--red-y: -70%;
		--orange-x: -25%;
		--orange-y: 35%;
		--green-x: 75%;
		--green-y: 25%;
		--yellow2-x: 10%;
		--yellow2-y: -45%;
	}
	75% {
		--yellow-x: 60%;
		--yellow-y: -20%;
		--purple-x: -15%;
		--purple-y: 60%;
		--red-x: 80%;
		--red-y: 40%;
		--orange-x: 25%;
		--orange-y: -50%;
		--green-x: 70%;
		--green-y: 120%;
		--yellow-x: -30%;
		--yellow-y: 20%;
	}
}

@keyframes moveGradientsLore {
	0%,
	100% {
		--yellow-x: 25%;
		--yellow-y: -30%;
		--purple-x: -20%;
		--purple-y: 85%;
		--red-x: 90%;
		--red-y: 50%;
		--orange-x: 15%;
		--orange-y: 120%;
		--green-x: 70%;
		--green-y: -15%;
		--yellow-x: -40%;
		--yellow-y: 35%;
	}
	25% {
		--yellow-x: 80%;
		--yellow-y: 85%;
		--purple-x: 35%;
		--purple-y: -45%;
		--red-x: -30%;
		--red-y: 15%;
		--orange-x: 95%;
		--orange-y: 70%;
		--green-x: 20%;
		--green-y: 140%;
		--yellow-x: 65%;
		--yellow-y: -25%;
	}
	50% {
		--yellow-x: -15%;
		--yellow2-y: 45%;
		--purple-x: 75%;
		--purple-y: 30%;
		--red-x: 40%;
		--red-y: -80%;
		--orange-x: -35%;
		--orange-y: -20%;
		--green-x: 55%;
		--green-y: 95%;
		--yellow-x: 85%;
		--yellow-y: 60%;
	}
	75% {
		--yellow-x: 50%;
		--yellow-y: 110%;
		--purple-x: 5%;
		--purple-y: -60%;
		--red-x: 70%;
		--red-y: 25%;
		--orange-x: 45%;
		--orange-y: -70%;
		--green-x: -25%;
		--green-y: 10%;
		--yellow-x: 20%;
		--yellow-y: 130%;
	}
}