@charset "UTF-8";
/* =========================================================
   新天龙八部 · 页面自定义样式
   1~7 动态背景层（只做动画与图层，不改变原有排版尺寸）
   8~  版式修正
   ========================================================= */

/* ---------- 1. 顶部通栏底图：缓慢推移 + 轻微缩放 ---------- */
@keyframes tlbbKenBurns {
	0%   { transform: scale(1.05) translate3d(-1.4%, -1.0%, 0); }
	50%  { transform: scale(1.11) translate3d(1.4%, 0.8%, 0); }
	100% { transform: scale(1.05) translate3d(-1.4%, -1.0%, 0); }
}
#Version #Header img {
	animation: tlbbKenBurns 48s ease-in-out infinite;
	transform-origin: 50% 38%;
	will-change: transform;
}

/* ---------- 2. 通栏云雾：缓慢横向流动 ---------- */
@keyframes tlbbMistDrift {
	0%   { transform: translate3d(-5%, 1%, 0) scale(1.06); opacity: .45; }
	50%  { transform: translate3d(5%, -2%, 0) scale(1.13); opacity: .85; }
	100% { transform: translate3d(-5%, 1%, 0) scale(1.06); opacity: .45; }
}
#Version::after {
	content: "";
	position: absolute;
	left: -15%;
	top: -10%;
	width: 130%;
	height: 122%;
	pointer-events: none;
	background:
		radial-gradient(42% 26% at 22% 26%, rgba(186, 214, 255, .20), rgba(186, 214, 255, 0) 70%),
		radial-gradient(36% 22% at 72% 18%, rgba(255, 226, 168, .18), rgba(255, 226, 168, 0) 70%),
		radial-gradient(48% 30% at 48% 68%, rgba(150, 190, 245, .16), rgba(150, 190, 245, 0) 72%),
		radial-gradient(30% 18% at 84% 62%, rgba(120, 220, 200, .12), rgba(120, 220, 200, 0) 70%);
	mix-blend-mode: screen;
	animation: tlbbMistDrift 40s ease-in-out infinite;
}

/* ---------- 3. 首屏主视觉 #m1：底图交给伪元素，缓慢横向漂移 ---------- */
@keyframes tlbbHeroDrift {
	0%   { transform: translate3d(-8px, 0, 0); }
	50%  { transform: translate3d(8px, 0, 0); }
	100% { transform: translate3d(-8px, 0, 0); }
}
#m1 {
	overflow: hidden;
	background-image: none;
}
#m1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1300px;
	height: 918px;
	margin-left: -650px;
	background: url(../images/O1CN01ZAePAb1LmgcBSQMkd_!!1788071342.jpg) center top no-repeat;
	background-size: 1300px 918px;
	animation: tlbbHeroDrift 44s ease-in-out infinite;
	will-change: transform;
}

/* ---------- 4. 首屏描金流光：扫过底部云纹 ---------- */
@keyframes tlbbSheen {
	0%   { background-position: -340px 736px; }
	100% { background-position: 1340px 736px; }
}
#m1::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1300px;
	height: 918px;
	margin-left: -650px;
	pointer-events: none;
	background-image: linear-gradient(100deg,
		rgba(255, 242, 196, 0) 40%,
		rgba(255, 247, 216, .30) 50%,
		rgba(255, 242, 196, 0) 60%);
	background-repeat: no-repeat;
	background-size: 300px 150px;
	background-position: -340px 736px;
	animation: tlbbSheen 8s linear infinite;
}

/* ---------- 5. 装备区底纹 #m2：缓慢上移（纹样竖向无缝） ---------- */
@keyframes tlbbTexScroll {
	0%   { background-position: center 0; }
	100% { background-position: center -900px; }
}
#m2 {
	animation: tlbbTexScroll 80s linear infinite;
}

/* ---------- 6. 龙纹带 #m3：缓慢横向游动 ---------- */
@keyframes tlbbBandDrift {
	0%   { transform: translate3d(-28px, 0, 0); }
	50%  { transform: translate3d(28px, 0, 0); }
	100% { transform: translate3d(-28px, 0, 0); }
}
#m3 {
	background: none;
	z-index: 0;
}
#m3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2200px;
	height: 470px;
	margin-left: -1100px;
	z-index: -1;
	pointer-events: none;
	background: url(../images/O1CN01BVpUfe1LmgcB1o5GG_!!1788071342.png) center top no-repeat;
	animation: tlbbBandDrift 54s ease-in-out infinite;
	will-change: transform;
}

/* ---------- 7. 全屏飘浮火星 / 灵光画布（由 tlbb_dongtai.js 创建） ---------- */
#tlbb-fx {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9998;
	pointer-events: none;
}

/* ---------- 8. 装备展示截图：窗口不够宽时等比缩小，避免右侧被裁掉 ---------- */
.role-itemst img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- 9. 用户关闭动效时全部静止 ---------- */
@media (prefers-reduced-motion: reduce) {
	#Version #Header img,
	#Version::after,
	#m1::before,
	#m1::after,
	#m2,
	#m3::before {
		animation: none !important;
	}
	#tlbb-fx {
		display: none;
	}
}