/* ===============================
		transition / animation
================================= */

.randBgColor {
	--hue: 0;
	position: relative;
	overflow: hidden;
}

.randBgColor::before {
	content: "";
	position: absolute;
	display: block;

	inset: 0;
	width: 100%;
	height: 100%;

	transform-origin: center;
	opacity: 1;
	z-index: 2;

	pointer-events: none;

	animation: changeColor 30s linear infinite alternate-reverse;
	filter: hue-rotate(calc(var(--hue) * 1deg));
	mix-blend-mode: hue;
}

.randBgColor--fixed::before {
	position: fixed;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 300vw;
	height: 300vh;
	animation-duration: 20s;
}

.randBgColor--fixed {
	position: absolute;
}

@media screen and (min-width: 769px) {
	.randBgColor.hero {
		position: relative;
	}

	.randBgColor.hero::before {
		display: none;
		content: none;
	}
}
@media screen and (max-width: 768px) {
	.hero {
		--hue: 0;
		animation: changeColor 30s linear infinite alternate-reverse;
		filter: hue-rotate(calc(var(--hue) * 1deg));
		background-blend-mode: soft-light;
	}
}

@keyframes changeColor {
	0% {
		background-color: rgb(190, 0, 193);
	}
	10% {
		background-color: rgb(120, 0, 206);
	}
	20% {
		background-color: #dd00d588;
	}
	30% {
		background-color: #c20f0fe8;
	}
	40% {
		background-color: rgb(215, 218, 0);
	}
	50% {
		background-color: rgb(165, 190, 0);
	}
	60% {
		background-color: rgb(0, 209, 87);
	}
	70% {
		background-color: rgb(0, 209, 87);
	}
	80% {
		background-color: rgb(0, 146, 209);
	}
	90% {
		background-color: rgba(127, 0, 218, 0.816);
	}
	100% {
		background-color: rgb(130, 0, 216);
	}
}

@keyframes bgRotate {
	0% {
		rotate: 0deg;
	}
	100% {
		rotate: 360deg;
	}
}
@keyframes bgBrigth {
	0% {
		filter: brightness(100%);
	}
	50% {
		filter: brightness(110%);
	}
	100% {
		filter: hue-rotate(95%);
	}
}