﻿
/* ========== 主容器 ========== */
.ad-banner {
	width: 100%;
	max-width: 1300px;
	height: auto;
	aspect-ratio: 1300 / 300;
	margin: 0 auto;
	overflow: hidden;
}

/* ========== 第一层 - 箭头横幅 + 紫白扫光 + 黄色渐变文字 ========== */
.ad-banner-layer1 {
	width: 100%;
	height: auto;
	aspect-ratio: 1300 / 110;
	text-align: center;
	overflow: hidden;
}
.ad-banner-layer1-bar {
	display: inline-block;
	width: 100%;
	max-width: 1300px;
	height: auto;
	aspect-ratio: 1300 / 70;
	margin-top: 1.54vw; /* 20/1300 */
	overflow: hidden;
	background: linear-gradient(90deg, #0e0018 0%, #200838 20%, #380860 40%, #480878 50%, #380860 60%, #200838 80%, #0e0018 100%);
	clip-path: polygon(2.31vw 0%, calc(100% - 2.31vw) 0%, 100% 50%, calc(100% - 2.31vw) 100%, 2.31vw 100%, 0% 50%);
	animation: ad-banner-float1 3s ease-in-out infinite;
	border-image: linear-gradient(90deg, transparent, rgba(100,180,255,0.3), transparent) 1;
}
.ad-banner-layer1-sweep {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(105deg,
			transparent 0%,
			transparent 30%,
			rgba(180,100,255,0.04) 38%,
			rgba(200,140,255,0.10) 43%,
			rgba(220,180,255,0.22) 47%,
			rgba(240,220,255,0.35) 50%,
			rgba(220,180,255,0.22) 53%,
			rgba(200,140,255,0.10) 57%,
			rgba(180,100,255,0.04) 62%,
			transparent 70%,
			transparent 100%
		),
		linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.02) 100%);
	background-size: 220% 100%, 100% 100%;
	animation: ad-banner-sweep1 3.5s ease-in-out infinite;
	text-align: center;
}
@keyframes ad-banner-sweep1 {
	0%   { background-position: 140% 0, 0 0; }
	100% { background-position: -40% 0, 0 0; }
}
.ad-banner-layer1-text {
	display: inline-block;
	font-family: 'Noto Serif SC', serif;
	font-weight: 900;
	font-size: clamp(18px, 3.23vw, 42px);
	letter-spacing: clamp(4px, 0.77vw, 10px);
	margin-top: 0.62vw; /* 8/1300 */
	background: linear-gradient(180deg, #fff8c0 0%, #ffe840 18%, #ffd000 35%, #ffb800 50%, #e89800 68%, #c07000 82%, #906000 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(2px 2px 0px #1a0030) drop-shadow(-1px -1px 0px #100020) drop-shadow(0px 0px 6px rgba(255,180,0,0.25));
	animation: ad-banner-float1 3s ease-in-out infinite, ad-banner-glow1 4s ease-in-out infinite;
}
@keyframes ad-banner-float1 {
	0%, 100% { transform: translateY(0px); }
	50%      { transform: translateY(-4px); }
}
@keyframes ad-banner-glow1 {
	0%, 100% { filter: drop-shadow(2px 2px 0px #1a0030) drop-shadow(-1px -1px 0px #100020) drop-shadow(0px 0px 6px rgba(255,180,0,0.2)); }
	50%      { filter: drop-shadow(2px 2px 0px #1a0030) drop-shadow(-1px -1px 0px #100020) drop-shadow(0px 0px 14px rgba(255,180,0,0.5)); }
}

/* ========== 第二层 - 黄色渐变文字 ========== */
.ad-banner-layer2 {
	width: 100%;
	height: auto;
	aspect-ratio: 1300 / 60;
	overflow: hidden;
	text-align: center;
	padding: 0 1vw;
	box-sizing: border-box;
}
.ad-banner-layer2-text {
	display: inline-block;
	font-family: 'ZCOOL XiaoWei', serif;
	font-size: clamp(16px, 2.92vw, 38px);
	letter-spacing: clamp(4px, 1.08vw, 14px);
	margin-top: 1.08vw; /* 14/1300 */
	background: linear-gradient(180deg, #fff8c0 0%, #ffe840 18%, #ffd000 35%, #ffb800 50%, #e89800 68%, #c07000 82%, #906000 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(2px 2px 0px #1a0030) drop-shadow(-1px -1px 0px #100020) drop-shadow(0px 0px 5px rgba(255,180,0,0.2));
	animation: ad-banner-float2 3.5s ease-in-out infinite, ad-banner-glow2 5s ease-in-out infinite;
}
@keyframes ad-banner-float2 {
	0%, 100% { transform: translateY(0px); }
	50%      { transform: translateY(-3px) scale(1.01); }
}
@keyframes ad-banner-glow2 {
	0%, 100% { filter: drop-shadow(2px 2px 0px #1a0030) drop-shadow(-1px -1px 0px #100020) drop-shadow(0px 0px 5px rgba(255,180,0,0.15)); }
	50%      { filter: drop-shadow(2px 2px 0px #1a0030) drop-shadow(-1px -1px 0px #100020) drop-shadow(0px 0px 16px rgba(255,180,0,0.45)); }
}

/* ========== 第三层 - 深紫圆角按钮 + 黄色文字发光 ========== */
.ad-banner-layer3 {
	width: 100%;
	height: auto;
	aspect-ratio: 1300 / 110;
	overflow: hidden;
	text-align: center;
}
.ad-banner-layer3-inner {
	display: inline-block;
	margin-top: 1.69vw; /* 22/1300 */
}
.ad-banner-layer3-btn {
	display: inline-block;
	font-family: 'Noto Serif SC', serif;
	font-weight: 700;
	font-size: clamp(14px, 1.85vw, 24px);
	letter-spacing: clamp(2px, 0.31vw, 4px);
	color: #ffe000;
	margin-left: 1.23vw; /* 16/1300 */
	margin-right: 1.23vw;
	background: linear-gradient(180deg, #9040e0 0%, #7020c8 25%, #5808a8 50%, #440088 75%, #300068 100%);
	border-radius: 30px;
	text-shadow: 0px 0px 10px rgba(255,220,0,0.9), 0px 0px 4px rgba(255,240,0,0.8), 0px 0px 20px rgba(255,200,0,0.5), 1px 1px 0px rgba(255,180,0,0.4);
	overflow: hidden;
	box-shadow: 0px 2px 0px #200040, 0px -1px 0px rgba(200,160,255,0.3) inset, 0px 4px 12px rgba(80,0,160,0.35);
	cursor: pointer;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ad-banner-layer3-btn:hover {
	box-shadow: 0px 2px 0px #200040, 0px -1px 0px rgba(200,160,255,0.4) inset, 0px 4px 20px rgba(120,0,220,0.65);
	transform: translateY(-2px);
}
.ad-banner-layer3-btn-sweep {
	display: block;
	background:
		linear-gradient(105deg,
			transparent 0%,
			transparent 35%,
			rgba(255,255,255,0.05) 42%,
			rgba(255,255,255,0.12) 47%,
			rgba(255,255,255,0.22) 50%,
			rgba(255,255,255,0.12) 53%,
			rgba(255,255,255,0.05) 58%,
			transparent 65%,
			transparent 100%
		);
	background-size: 250% 100%;
	animation: ad-banner-sweep3 4.5s ease-in-out infinite;
}
@keyframes ad-banner-sweep3 {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}
.ad-banner-layer3-btn-text {
	display: inline-block;
	margin-left: 1.85vw; /* 24/1300 */
	margin-right: 1.85vw;
	margin-top: 0.92vw; /* 12/1300 */
	margin-bottom: 0.92vw;
}
.ad-banner-layer3-btn:nth-child(1) { animation: ad-banner-float3a 2.8s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(2) { animation: ad-banner-float3b 3.2s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(3) { animation: ad-banner-float3c 2.5s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(4) { animation: ad-banner-float3d 3.6s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(2) .ad-banner-layer3-btn-sweep { animation-delay: 0.8s; }
.ad-banner-layer3-btn:nth-child(3) .ad-banner-layer3-btn-sweep { animation-delay: 1.6s; }
.ad-banner-layer3-btn:nth-child(4) .ad-banner-layer3-btn-sweep { animation-delay: 2.4s; }
@keyframes ad-banner-float3a {
	0%, 100% { transform: translateY(0px); }
	50%      { transform: translateY(-5px); }
}
@keyframes ad-banner-float3b {
	0%, 100% { transform: translateY(0px); }
	50%      { transform: translateY(4px); }
}
@keyframes ad-banner-float3c {
	0%, 100% { transform: translateY(0px); }
	50%      { transform: translateY(-6px); }
}
@keyframes ad-banner-float3d {
	0%, 100% { transform: translateY(0px); }
	50%      { transform: translateY(5px); }
}