/**
 * sunzelong
 * 2026年8月21日
 */
body {
	font-family: 'Arial', sans-serif;
	background-color: #0a0a12;
	overflow-x: hidden;
}

.banner {
	/* 添加渐变覆盖层 */
	.gradient-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		/* 渐变科技感颜色 */
		background: linear-gradient(135deg,
				rgba(0, 18, 36, 0.9) 0%,
				rgba(0, 72, 144, 0.7) 30%,
				rgba(0, 198, 255, 0.5) 60%,
				rgba(138, 43, 226, 0.3) 100%);
		animation: gradientShift 8s ease infinite;
	}

	/* 网格背景效果 */
	.grid-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-image:
			linear-gradient(rgba(0, 198, 255, 0.1) 1px, transparent 1px),
			linear-gradient(90deg, rgba(0, 198, 255, 0.1) 1px, transparent 1px);
		background-size: 50px 50px;
		perspective: 500px;
		transform: perspective(500px) rotateX(20deg) scale(1.2);
		animation: gridMove 15s linear infinite;
	}

	/* 光线效果 */
	.light-beam {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* height: 100%; */
		z-index: 2;
		background: radial-gradient(circle at 20% 30%,
				rgba(0, 198, 255, 0.15) 0%,
				transparent 50%),
			radial-gradient(circle at 80% 70%,
				rgba(138, 43, 226, 0.15) 0%,
				transparent 50%);
	}

	/* 动画定义 */
	@keyframes gradientShift {
		0% {
			background: linear-gradient(135deg,
					rgba(0, 18, 36, 0.9) 0%,
					rgba(0, 72, 144, 0.7) 30%,
					rgba(0, 198, 255, 0.5) 60%,
					rgba(138, 43, 226, 0.3) 100%);
		}

		50% {
			background: linear-gradient(135deg,
					rgba(0, 18, 36, 0.9) 0%,
					rgba(0, 100, 180, 0.7) 30%,
					rgba(0, 220, 255, 0.6) 60%,
					rgba(180, 43, 226, 0.4) 100%);
		}

		100% {
			background: linear-gradient(135deg,
					rgba(0, 18, 36, 0.9) 0%,
					rgba(0, 72, 144, 0.7) 30%,
					rgba(0, 198, 255, 0.5) 60%,
					rgba(138, 43, 226, 0.3) 100%);
		}
	}

	@keyframes pulse {
		0% {
			filter: brightness(0.7) drop-shadow(0 0 10px rgba(0, 198, 255, 0.3));
		}

		100% {
			filter: brightness(0.85) drop-shadow(0 0 20px rgba(0, 198, 255, 0.5));
		}
	}

	@keyframes gridMove {
		0% {
			transform: perspective(500px) rotateX(20deg) translateY(0);
		}

		100% {
			transform: perspective(500px) rotateX(20deg) translateY(50px);
		}
	}