@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@700;900&display=swap');

/* ================================================================
   变体 C — 双侧实心三角 + 深蓝渐变主背景
   Layer1：橙白蓝三段流光，左右各一个脉冲菱形装饰
   Layer2：橙色底框 + 白字，整体左右扫光
   Layer3：圆角橙蓝交替按钮，Hover 上弹+发光
   ================================================================ */

.ad-banner {
	display: block;
	text-align: center;
	position: relative;
	overflow: visible;
}

/* ======================================================
   Layer 1
   ====================================================== */
.ad-banner-layer1 {
	display: block;
	text-align: center;
}

.ad-banner-layer1-bar {
	display: inline-block;
	position: relative;
	background: none;
}

/* 主体蓝色背景块：左右两侧都是剪刀角 */
.ad-banner-layer1-sweep {
	display: inline-block;
	padding: 12px 60px;
	background: linear-gradient(90deg,
		#001a44 0%, #002e88 20%, #0044bb 50%, #002e88 80%, #001a44 100%
	);
	border-top: 2px solid #ff7700;
	border-bottom: 2px solid #ff7700;
	position: relative;
	overflow: hidden;

	/* 左右都是内凹剪刀角 */
	clip-path: polygon(
		0 0,
		100% 0,
		calc(100% - 28px) 50%,
		100% 100%,
		0 100%,
		28px 50%
	);
}

/* 蓝色扫光 */
.ad-banner-layer1-sweep::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		transparent 0%, transparent 30%,
		rgba(100,180,255,0.04) 38%,
		rgba(150,210,255,0.12) 45%,
		rgba(200,230,255,0.22) 50%,
		rgba(150,210,255,0.12) 55%,
		rgba(100,180,255,0.04) 62%,
		transparent 70%, transparent 100%
	);
	background-size: 220% 100%;
	animation: c-sweep 3.5s ease-in-out infinite;
	pointer-events: none;
	clip-path: inherit;
}

@keyframes c-sweep {
	0%   { background-position: 140% 0; }
	100% { background-position: -40% 0; }
}

/* 左侧实心橙三角（朝右）—— right:100% 永远贴在蓝框左边缘 */
.ad-banner-layer1-bar::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 72px;
	background: #ff6600;
	clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
	pointer-events: none;
}

/* 右侧实心橙三角（朝左）—— left:100% 永远贴在蓝框右边缘 */
.ad-banner-layer1-bar::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 72px;
	background: #ff6600;
	clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
	pointer-events: none;
}

/* 橙→白→蓝流光主标题 */
.ad-banner-layer1-text {
	display: inline-block;
	font-family: 'Noto Serif SC', serif;
	font-weight: 900;
	font-size: 42px;
	letter-spacing: 10px;
	background: linear-gradient(90deg,
		#ff8800  0%,
		#ffcc55 16%,
		#ffffff 36%,
		#ffffff 64%,
		#66ccff 84%,
		#0099ff 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(2px 2px 0 rgba(0,0,60,0.5));
	animation: c-shine 4s ease-in-out infinite, c-float1 3s ease-in-out infinite;
	position: relative;
}
@keyframes c-shine {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
@keyframes c-float1 {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-4px); }
}



/* ======================================================
   Layer 2
   ====================================================== */
.ad-banner-layer2 {
	display: block;
	text-align: center;
	margin-top: 8px;
}

.ad-banner-layer2-text {
	display: inline-block;
	font-family: 'ZCOOL XiaoWei', serif;
	font-size: 38px;
	letter-spacing: 14px;
	padding: 7px 20px;
	color: #ffffff;
	background: linear-gradient(90deg,
		rgba(255,100,0,0.15) 0%,
		rgba(255,130,0,0.28) 20%,
		rgba(255,160,0,0.20) 50%,
		rgba(255,130,0,0.28) 80%,
		rgba(255,100,0,0.15) 100%
	);
	border-top: 1px solid rgba(255,140,0,0.5);
	border-bottom: 1px solid rgba(255,140,0,0.5);
	border-left: 1px solid rgba(255,140,0,0.5);
	border-right: 1px solid rgba(255,140,0,0.5);
	text-shadow: 0 0 10px rgba(255,180,0,0.4), 1px 1px 0 rgba(0,20,80,0.5);
	position: relative;
	overflow: hidden;
	animation: c-float2 3.8s ease-in-out infinite;
}
/* 扫光 */
.ad-banner-layer2-text::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		transparent 30%, rgba(255,220,100,0.12) 45%,
		rgba(255,255,200,0.25) 50%, rgba(255,220,100,0.12) 55%, transparent 70%
	);
	background-size: 220% 100%;
	animation: c-sweep2 4s ease-in-out infinite 1s;
	pointer-events: none;
}
@keyframes c-sweep2 {
	0%   { background-position: 140% 0; }
	100% { background-position: -40% 0; }
}
@keyframes c-float2 {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-3px) scale(1.005); }
}

/* ======================================================
   Layer 3
   ====================================================== */
.ad-banner-layer3 {
	display: block;
	text-align: center;
	margin-top: 10px;
}
.ad-banner-layer3-inner {
	display: inline-flex;
	gap: 14px;
	padding: 4px 0;
}

/* 圆角按钮，奇蓝偶橙 */
.ad-banner-layer3-btn {
	display: inline-block;
	border-radius: 0px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	background: linear-gradient(180deg, #1188ff 0%, #0055cc 60%, #003aaa 100%);
	box-shadow: 0 3px 0 #001880, 0 6px 16px rgba(0,80,200,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
	transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
}
.ad-banner-layer3-btn:nth-child(even) {
	background: linear-gradient(180deg, #ff9900 0%, #ff6600 60%, #cc4400 100%);
	box-shadow: 0 3px 0 #882200, 0 6px 16px rgba(200,80,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
}
.ad-banner-layer3-btn:hover {
	transform: translateY(-6px) scale(1.06);
	animation: none;
}
.ad-banner-layer3-btn:nth-child(odd):hover {
	box-shadow: 0 8px 0 #001880, 0 14px 28px rgba(0,100,255,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.ad-banner-layer3-btn:nth-child(even):hover {
	box-shadow: 0 8px 0 #882200, 0 14px 28px rgba(255,100,0,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.ad-banner-layer3-btn:active { transform: translateY(0) scale(0.97); }

.ad-banner-layer3-btn-sweep {
	display: block;
	background: linear-gradient(105deg,
		transparent 35%, rgba(255,255,255,0.20) 50%, transparent 65%
	);
	background-size: 250% 100%;
	animation: c-sweep3 4s ease-in-out infinite;
}
@keyframes c-sweep3 {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

.ad-banner-layer3-btn-text {
	display: inline-block;
	font-family: 'Noto Serif SC', serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 4px;
	color: #ffffff;
	padding: 10px 28px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* 错落浮动 */
.ad-banner-layer3-btn:nth-child(1) { animation: c-f1 2.8s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(2) { animation: c-f2 3.2s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(3) { animation: c-f3 2.5s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(4) { animation: c-f4 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 c-f1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes c-f2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)}  }
@keyframes c-f3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes c-f4 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}  }

@media (prefers-reduced-motion: reduce) {
	.ad-banner-layer1-sweep::after,
	.ad-banner-layer2-text::before,
	.ad-banner-layer3-btn-sweep { animation: none; }
	.ad-banner-layer1-text { animation: none; background-position: 0 0; }
	.ad-banner-layer1-bar::before,
	.ad-banner-layer1-bar::after { animation: none; }
	.ad-banner-layer2-text { animation: none; }
	.ad-banner-layer3-btn  { animation: none; transition: none; }
}