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

/* ================================================================
   变体 B — 切角八边形，各层紧包文字
   Layer1：波浪字（直接对整体文字做动画，无需拆 span）
   Layer2：蓝白渐变滑入
   Layer3：切角平行四边形按钮，Hover 亮度+投影
   ================================================================ */

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

/* ---- Layer 1 ---- */
.ad-banner-layer1 {
	display: block;
	text-align: center;
	filter:
		drop-shadow(0  2px 0px #ff7700)
		drop-shadow(0 -2px 0px #ff7700)
		drop-shadow( 2px 0  0px #ff7700)
		drop-shadow(-2px 0  0px #ff7700)
		drop-shadow(0 0 6px rgba(255,120,0,0.45));
}
.ad-banner-layer1-bar {
	display: inline-block;
	padding: 10px 48px;
	background: linear-gradient(90deg, #020e28 0%, #0a1e55 25%, #001e6e 50%, #0a1e55 75%, #020e28 100%);
	clip-path: polygon(
		24px 0%, calc(100% - 24px) 0%,
		100% 24px, 100% calc(100% - 24px),
		calc(100% - 24px) 100%, 24px 100%,
		0% calc(100% - 24px), 0% 24px
	);
	padding-left: 60px;
	padding-right: 60px;
	position: relative;
	overflow: hidden;
}
/* 流光边 */
.ad-banner-layer1-bar::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		transparent 30%, rgba(255,150,0,0.06) 40%,
		rgba(0,150,255,0.18) 50%, rgba(255,150,0,0.06) 60%, transparent 70%
	);
	background-size: 220% 100%;
	animation: b-sweep1 3.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes b-sweep1 {
	0%   { background-position: 140% 0; }
	100% { background-position: -40% 0; }
}
.ad-banner-layer1-sweep {
	display: inline-block;
}
/* 整体文字波浪+变色 */
.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(180deg, #ffffff 0%, #d8eeff 30%, #90c8ff 60%, #4da6ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(2px 2px 0 #001440);
	animation: b-wave 3s ease-in-out infinite, b-glow 4s ease-in-out infinite;
}
@keyframes b-wave {
	0%,100% { transform: translateY(0); }
	25%     { transform: translateY(-6px); }
	75%     { transform: translateY(4px); }
}
@keyframes b-glow {
	0%,100% { filter: drop-shadow(2px 2px 0 #001440) drop-shadow(0 0 6px rgba(30,120,255,0.2)); }
	50%     { filter: drop-shadow(2px 2px 0 #001440) drop-shadow(0 0 16px rgba(255,140,0,0.5)); }
}

/* ---- Layer 2 ---- */
.ad-banner-layer2 {
	display: block;
	text-align: center;
	margin-top: 6px;
}
.ad-banner-layer2-text {
	display: inline-block;
	font-family: 'Ma Shan Zheng', cursive;
	font-size: 60px;
	letter-spacing: 18px;
	padding: 6px 40px;
	background: linear-gradient(180deg, #ffffff 0%, #c8e8ff 50%, #60b8ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(2px 2px 0 #001840);
	animation: b-slidein 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes b-slidein {
	from { opacity: 0; transform: translateX(-50px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ---- Layer 3 ---- */
.ad-banner-layer3 {
	display: block;
	text-align: center;
	margin-top: 10px;
}
.ad-banner-layer3-inner {
	display: inline-flex;
	gap: 0;
	padding: 4px 0;
}
/* 切角按钮，奇蓝偶橙 */
.ad-banner-layer3-btn {
	display: inline-block;
	margin: 0 8px;
	background: linear-gradient(135deg, #0055dd 0%, #0033aa 100%);
	clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: filter 0.25s, transform 0.25s;
}
.ad-banner-layer3-btn:nth-child(even) {
	background: linear-gradient(135deg, #ff7700 0%, #cc4400 100%);
}
.ad-banner-layer3-btn:hover {
	filter: brightness(1.35) drop-shadow(0 0 12px rgba(0,120,255,0.7));
	transform: scale(1.08);
	animation: none;
}
.ad-banner-layer3-btn:nth-child(even):hover {
	filter: brightness(1.3) drop-shadow(0 0 12px rgba(255,100,0,0.75));
}
.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: b-sweep3 4s ease-in-out infinite;
}
@keyframes b-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: 30px;
	letter-spacing: 4px;
	color: #ffffff;
	padding: 10px 28px;
}
.ad-banner-layer3-btn:nth-child(1) { animation: b-f1 2.8s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(2) { animation: b-f2 3.2s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(3) { animation: b-f3 2.5s ease-in-out infinite; }
.ad-banner-layer3-btn:nth-child(4) { animation: b-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 b-f1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes b-f2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)}  }
@keyframes b-f3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes b-f4 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}  }

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