/**
 * 百家 背景扩展画廊
 */

.baijia-eg {
	position: relative;
	width: 100%;
}

/* 背景层：绝对定位覆盖整个 wrapper，默认占容器宽（圆角卡片感） */
.baijia-eg-bg {
	position: absolute;
	inset: 0;
	background-color: #2c2c2c;
	border-radius: 20px;
	z-index: 0;
	transition: left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            right 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            margin 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            border-radius 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 入视口后：背景延伸到视口宽，圆角归零 */
.baijia-eg.has-expand.is-inview .baijia-eg-bg {
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	border-radius: 0;
}

/* 内容层：永远居中于容器内 */
.baijia-eg-inner {
	position: relative;
	z-index: 1;
	padding: 60px 40px;
}

/* ===== 标题区 ===== */
.baijia-eg-header {
	position: relative;
	text-align: center;
	margin-bottom: 50px;
	padding-top: 30px;
}

.baijia-eg-bgtext {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	font-size: 120px;
	font-weight: 900;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.baijia-eg-eyebrow {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #a6ce39;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.baijia-eg-eyebrow::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 14px;
	background-color: currentColor;
	border-radius: 2px;
}

.baijia-eg-heading {
	position: relative;
	z-index: 2;
	margin: 0;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
}

/* ===== 画廊栅格 ===== */
.baijia-eg-gallery {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
}

.baijia-eg-gallery-item {
	--bjeg-delay: 0s;
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	background-color: #1a1a1a;
	grid-column: span 6;
	text-decoration: none;
}

.baijia-eg-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.baijia-eg-gallery-item:hover img {
	transform: scale(1.05);
}

.baijia-eg-placeholder {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, #2a2a2a 0 10px, #333 10px 20px);
}

/* ===== 图片依次淡入（一次性：首次进入视口即显示，后续滚动保持） ===== */
.baijia-eg.has-items-anim .baijia-eg-gallery-item {
	opacity: 0;
	transform: translateY(20px);
	will-change: transform, opacity;
	transition: transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1),
	            opacity 0.7s ease;
	transition-delay: var(--bjeg-delay, 0s);
}

.baijia-eg.has-items-anim.has-entered .baijia-eg-gallery-item {
	opacity: 1;
	transform: none;
}

/* 标题区淡入 */
.baijia-eg .baijia-eg-header {
	opacity: 1;
}

.baijia-eg.has-items-anim .baijia-eg-header > .baijia-eg-eyebrow,
.baijia-eg.has-items-anim .baijia-eg-header > .baijia-eg-heading {
	opacity: 0;
	transform: translateY(20px);
	transition: transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1),
	            opacity 0.7s ease;
}

.baijia-eg.has-items-anim .baijia-eg-header > .baijia-eg-eyebrow { transition-delay: 0.15s; }
.baijia-eg.has-items-anim .baijia-eg-header > .baijia-eg-heading { transition-delay: 0.25s; }

.baijia-eg.has-items-anim.has-entered .baijia-eg-header > .baijia-eg-eyebrow,
.baijia-eg.has-items-anim.has-entered .baijia-eg-header > .baijia-eg-heading {
	opacity: 1;
	transform: none;
}

/* 背景大字 bgtext：保留 translateX(-50%) 居中，transform 与其他元素分开写 */
.baijia-eg.has-items-anim .baijia-eg-header > .baijia-eg-bgtext {
	opacity: 0;
	transform: translate(-50%, 20px);
	transition: transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1),
	            opacity 0.7s ease;
	transition-delay: 0.05s;
}

.baijia-eg.has-items-anim.has-entered .baijia-eg-header > .baijia-eg-bgtext {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* 无障碍 */
@media (prefers-reduced-motion: reduce) {
	.baijia-eg-bg,
	.baijia-eg-gallery-item,
	.baijia-eg-header > .baijia-eg-eyebrow,
	.baijia-eg-header > .baijia-eg-heading {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.baijia-eg-header > .baijia-eg-bgtext {
		transition: none !important;
		opacity: 1 !important;
		transform: translateX(-50%) !important;
	}
	.baijia-eg.has-expand .baijia-eg-bg {
		left: 0; right: 0; border-radius: 0;
	}
}

/* 响应式 */
@media (max-width: 1024px) {
	.baijia-eg-bgtext { font-size: 80px; }
	.baijia-eg-heading { font-size: 28px; }
	.baijia-eg-inner { padding: 40px 24px; }
}

@media (max-width: 600px) {
	.baijia-eg-bgtext { font-size: 50px; }
	.baijia-eg-heading { font-size: 22px; }
	.baijia-eg-inner { padding: 32px 16px; }
	.baijia-eg-header { margin-bottom: 30px; padding-top: 16px; }

	/* 小屏画廊降级为 2 列（每项 span 6） */
	.baijia-eg-gallery-item {
		grid-column: span 6 !important;
	}
}