.wrapper {
	position: absolute;
	inset: 0;
	pointer-events: none;

	transform-origin: center;

	--color-1: rgb(57, 182, 255);
	--color-2: rgb(189, 69, 251);
	--color-3: rgb(255, 87, 51);
	--color-4: rgb(255, 214, 0);

	--blend-mode: screen;
}

.colorLayer {
	position: absolute;
	inset: 0;

	/* 变亮混合模式 */
	/* mix-blend-mode: screen; */
	/* mix-blend-mode: overlay; */
	/* mix-blend-mode: multiply; */
	mix-blend-mode: add;

	/* 边框遮罩 - 中间透明，边缘不透明 */
	mask-image: url(https://img.alicdn.com/imgextra/i2/O1CN01iW1wfX1C0ICvoPbTq_!!6000000000018-2-tps-512-512.png);
	mask-repeat: no-repeat;
	mask-size: calc(100% + 10px) calc(100% + 10px);
}

.borderWrapper {
	position: absolute;
	inset: 0;

	/* filter: blur(10px); */
}

.borderLayer {
	position: absolute;
	inset: 0;

	/* 变亮混合模式 */
	/* mix-blend-mode: overlay; */
	mix-blend-mode: add;

	mask-image:
		linear-gradient(
			to right,
			black 0px,
			black 2px,
			transparent 2px,
			transparent calc(100% - 2px),
			black calc(100% - 2px),
			black 100%
		),
		linear-gradient(
			to top,
			black 0px,
			black 2px,
			transparent 2px,
			transparent calc(100% - 2px),
			black calc(100% - 2px),
			black 100%
		);

	mask-composite: add;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;

	/* filter: blur(100px); */
}

.blueLayer {
	&.colorLayer {
		mask-position: left -5px top -5px;
	}

	&::after {
		content: '';
		position: absolute;
		/* inset: 0; */
		width: calc(max(100vw, 100vh) * 1.5);
		height: 600px;
		top: calc(50% - 300px);
		left: 50%;
		filter: blur(100px);
		background: rgb(57, 182, 255);
		animation: rotate-clockwise 4s linear infinite;
		animation-delay: -3s;
	}
}

.purpleLayer {
	&.colorLayer {
		mask-position: left -3px top -7px;
	}

	&::after {
		content: '';
		position: absolute;
		/* inset: 0; */
		width: calc(max(100vw, 100vh) * 1.5);
		height: 600px;
		top: calc(50% - 300px);
		left: 50%;
		filter: blur(100px);
		background: rgb(189, 69, 251);
		animation: rotate-clockwise 4s linear infinite;
		animation-delay: -2s;
	}
}

.orangeLayer {
	/* opacity: 0.5; */

	&.colorLayer {
		mask-position: left -7px top -2px;
	}

	&::after {
		content: '';
		position: absolute;
		/* inset: 0; */
		width: calc(max(100vw, 100vh) * 1.5);
		height: 600px;
		top: calc(50% - 300px);
		left: 50%;
		filter: blur(100px);
		background: rgb(255, 87, 51);
		animation: rotate-counter-clockwise 3s linear infinite;
		animation-delay: -2s;
	}
}

.yellowLayer {
	/* opacity: 0.5; */

	&.colorLayer {
		mask-position: left -6px top -4px;
	}

	&::after {
		content: '';
		position: absolute;
		/* inset: 0; */
		width: calc(max(100vw, 100vh) * 1.5);
		height: 600px;
		top: calc(50% - 300px);
		left: 50%;
		filter: blur(100px);
		background: rgb(255, 214, 0);
		animation: rotate-counter-clockwise 4s linear infinite;
		animation-delay: -1s;
	}
}

/* 旋转动画 */
@keyframes rotate-clockwise {
	0% {
		transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(360deg);
	}
}

@keyframes rotate-counter-clockwise {
	0% {
		transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(-360deg);
	}
}

@keyframes wrapper-entry {
	from {
		transform: scale(1.1);
	}
	to {
		transform: scale(1);
	}
}

/* 
rgb(57, 182, 255)
rgb(189, 69, 251)
rgb(255, 87, 51)
rgb(255, 214, 0)
*/

@keyframes mask-running {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(100%);
	}
}

@keyframes mask-running-reverse {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0%);
	}
}

.colorWrapper {
	position: absolute;
	inset: 0;

	.colorLayer {
		position: absolute;
		inset: 0;

		mix-blend-mode: var(--blend-mode);

		/* 边框遮罩 - 中间透明，边缘不透明 */
		mask-image: url(https://img.alicdn.com/imgextra/i2/O1CN01iW1wfX1C0ICvoPbTq_!!6000000000018-2-tps-512-512.png);
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}
}

.borderWrapper {
	position: absolute;
	inset: 0;

	--blend-mode: lighten;

	.borderLayer {
		position: absolute;
		inset: 0;

		mix-blend-mode: var(--blend-mode);

		mask-border: url(https://img.alicdn.com/imgextra/i3/O1CN01bFjRug1yssyWEUbKL_!!6000000006635-2-tps-256-256.png)
			25;
		-webkit-mask-box-image: url(https://img.alicdn.com/imgextra/i3/O1CN01bFjRug1yssyWEUbKL_!!6000000006635-2-tps-256-256.png)
			25;

		mask-repeat: no-repeat;
		mask-size: 100% 100%;

		background-color: var(--color-2);
	}
}

.entry .colorWrapper,
.entry .borderWrapper {
	animation: wrapper-entry 0.8s ease-in-out forwards;
}

.exit .colorWrapper,
.exit .borderWrapper {
	animation: wrapper-entry 0.8s ease-in-out reverse forwards;
}

.layerA {
	position: absolute;
	inset: 0;

	&::before {
		mix-blend-mode: var(--blend-mode);
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: -100%;
		top: 0;
		background-image: linear-gradient(
			to right bottom,
			transparent,
			var(--color-1),
			transparent,
			var(--color-1),
			transparent
		);
		animation: mask-running 2s linear infinite;
	}

	&::after {
		mix-blend-mode: var(--blend-mode);
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-image: linear-gradient(
			to right bottom,
			transparent,
			var(--color-1),
			transparent,
			var(--color-1),
			transparent
		);
		animation: mask-running 2s linear infinite;
	}
}

.layerB {
	position: absolute;
	inset: 0;

	&::before {
		mix-blend-mode: var(--blend-mode);
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: -100%;
		top: 0;
		background: linear-gradient(
			to right top,
			transparent,
			var(--color-2),
			transparent,
			var(--color-2),
			transparent
		);
		animation: mask-running-reverse 3s linear infinite;
	}

	&::after {
		mix-blend-mode: var(--blend-mode);
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: linear-gradient(
			to right top,
			transparent,
			var(--color-2),
			transparent,
			var(--color-2),
			transparent
		);
		animation: mask-running-reverse 3s linear infinite;
	}
}

.layerC {
	position: absolute;
	inset: 0;

	opacity: 0.5;

	&::before {
		mix-blend-mode: var(--blend-mode);
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: -100%;
		top: 0;
		background: linear-gradient(
			to right top,
			transparent,
			var(--color-3),
			transparent,
			var(--color-3),
			transparent
		);
		animation: mask-running 1s linear infinite;
	}

	&::after {
		mix-blend-mode: var(--blend-mode);
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: linear-gradient(
			to right top,
			transparent,
			var(--color-3),
			transparent,
			var(--color-3),
			transparent
		);
		animation: mask-running 1s linear infinite;
	}
}