.article-title,
.breadcrumb {
	display: none;
}

.baiyun-zibll-article-hero {
	position: relative;
	width: 100%;
	height: clamp(400px, 50vh, 620px);
	margin: -20px 0 20px;
	overflow: hidden;
	color: #fff;
	background: var(--baiyun-hero-bg);
	text-align: center;
}

.baiyun-zibll-article-hero__background {
	position: absolute;
	inset: 0 0 0 50%;
	overflow: hidden;
	background: var(--baiyun-hero-bg);
}

.baiyun-zibll-article-hero__background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(257.4deg, rgba(255,255,255,.2) 2%, var(--baiyun-hero-bg) 80%);
}

.baiyun-zibll-article-hero__background img {
	position: absolute;
	inset: -8%;
	width: 116%;
	height: 116%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	opacity: .82;
	filter: blur(4px);
	transform: rotate(16deg) scale(1.04);
}

.baiyun-zibll-article-hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	height: 100%;
	padding: 76px 24px 92px;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.baiyun-zibll-article-hero__chips,
.baiyun-zibll-article-hero__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.baiyun-zibll-article-hero__chips span,
.baiyun-zibll-article-hero__chips a {
	padding: 7px 10px;
	border-radius: 10px;
	background: rgba(255,255,255,.2);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.baiyun-zibll-article-hero h1 {
	max-width: 980px;
	margin: 16px 0;
	color: #fff;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.2;
}

.baiyun-zibll-article-hero__meta {
	margin-top: 12px;
	color: var(--baiyun-hero-text);
	font-size: 14px;
}

.baiyun-zibll-article-hero__meta a {
	color: var(--baiyun-hero-text);
	text-decoration: none;
}

.baiyun-zibll-article-hero__waves {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: clamp(58px, 8vh, 100px);
	overflow: hidden;
}

.baiyun-zibll-article-hero__waves svg {
	display: block;
	width: 100%;
	height: 100%;
}

.baiyun-zibll-article-hero__parallax use {
	animation: baiyun-zibll-hero-wave 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.baiyun-zibll-article-hero__parallax use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}

.baiyun-zibll-article-hero__parallax use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}

.baiyun-zibll-article-hero__parallax use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}

.baiyun-zibll-article-hero__parallax use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}

@keyframes baiyun-zibll-hero-wave {
	0% { transform: translate3d(-90px, 0, 0); }
	100% { transform: translate3d(85px, 0, 0); }
}

.baiyun-zibll-reduced-motion .baiyun-zibll-article-hero__parallax use {
	animation: none;
}

@media (max-width: 1024px) {
	.baiyun-zibll-article-hero {
		height: clamp(320px, 40vh, 430px);
	}

	.baiyun-zibll-article-hero__body {
		padding: 54px 20px 76px;
	}
}

@media (max-width: 767px) {
	.baiyun-zibll-article-hero {
		height: clamp(300px, 40vh, 360px);
		margin-bottom: 16px;
	}

	.baiyun-zibll-article-hero__background {
		inset: 0 0 0 42%;
	}

	.baiyun-zibll-article-hero__body {
		padding: 42px 16px 64px;
	}

	.baiyun-zibll-article-hero__chips a:nth-of-type(n+2) {
		display: none;
	}

	.baiyun-zibll-article-hero h1 {
		margin: 12px 0;
		font-size: 28px;
	}

	.baiyun-zibll-article-hero__meta {
		margin-top: 6px;
		font-size: 13px;
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.baiyun-zibll-article-hero__parallax use {
		animation: none;
	}
}