@charset "utf-8";
/* ==========================================================================
   s7 「云荒剑录地图展」—— 双排交错 · 无限滚动地图长廊 + 大图灯箱
   独立文件，不改动 css.css；index.html 仅新增 2 行引用
   ========================================================================== */

/* ---------- 舞台：整块落在背景的可视空档里（底下是 sm7.jpg 的竹林） ---------- */
.s7 .mapWall{
	position:absolute;
	left:0;
	top:52px;
	width:1920px;
	height:560px;
	user-select:none;
	-webkit-user-select:none;
}

/* 中心聚光 + 四周压暗：把视角收到中间，两侧融进背景的竹林暗部 */
.s7 .mapWall::after{
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:10;
	pointer-events:none;
	background:-webkit-radial-gradient(ellipse 62% 118% at 50% 50%, rgba(4,7,6,0) 40%, rgba(4,7,6,0.20) 74%, rgba(4,7,6,0.58) 100%);
	background:radial-gradient(ellipse 62% 118% at 50% 50%, rgba(4,7,6,0) 40%, rgba(4,7,6,0.20) 74%, rgba(4,7,6,0.58) 100%);
}

/* ---------- 单排：两端渐隐，做出"长廊往画外延伸"的感觉 ---------- */
.s7 .mapRow{
	position:relative;
	width:1920px;
	height:280px;
	overflow:hidden;
	-webkit-mask-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 210px, rgba(0,0,0,1) 1710px, rgba(0,0,0,0) 1920px);
	mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 210px, rgba(0,0,0,1) 1710px, rgba(0,0,0,0) 1920px);
}

/* ---------- 轨道：内容为"一排 + 一排克隆"，位移 -50% 即一整排，无缝衔接 ---------- */
.s7 .mapTrack{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	width:-webkit-max-content;
	width:max-content;
	height:100%;
	will-change:transform;
	-webkit-animation:mapDriftL 108s linear infinite;
	animation:mapDriftL 108s linear infinite;
}

/* 第二排反向，并错开半张卡，形成砖砌错缝 */
.s7 .mapRow--b .mapTrack{
	margin-left:-216px;
	-webkit-animation-name:mapDriftR;
	animation-name:mapDriftR;
}

@-webkit-keyframes mapDriftL{
	from{-webkit-transform:translate3d(0,0,0);}
	to{-webkit-transform:translate3d(-50%,0,0);}
}
@keyframes mapDriftL{
	from{transform:translate3d(0,0,0);}
	to{transform:translate3d(-50%,0,0);}
}
@-webkit-keyframes mapDriftR{
	from{-webkit-transform:translate3d(-50%,0,0);}
	to{-webkit-transform:translate3d(0,0,0);}
}
@keyframes mapDriftR{
	from{transform:translate3d(-50%,0,0);}
	to{transform:translate3d(0,0,0);}
}

/* 鼠标进到任一排、灯箱打开、或整块滚出视口时都停住 */
.s7 .mapRow:hover .mapTrack,
.s7 .mapWall.isPaused .mapTrack,
.s7 .mapWall.isOff .mapTrack{
	-webkit-animation-play-state:paused;
	animation-play-state:paused;
}

/* ---------- 单张地图：400×246 外框 = 3px 金边 + 5px 深色内衬 + 384×230 画面 ---------- */
.s7 .mapCard{
	position:relative;
	-webkit-flex:0 0 auto;
	flex:0 0 auto;
	width:400px;
	height:246px;
	box-sizing:border-box;
	padding:5px;
	margin-right:26px;
	border:3px solid rgba(246,216,151,0.42);
	border-radius:3px;
	background:#090c0a;
	overflow:hidden;
	cursor:pointer;
	outline:none;
	box-shadow:
		0 8px 20px rgba(0,0,0,0.62),
		inset 0 0 0 1px rgba(0,0,0,0.9);
	-webkit-transition:border-color .35s ease, box-shadow .35s ease;
	transition:border-color .35s ease, box-shadow .35s ease;
}

/* 画面单独包一层，放大时被它裁住，不会压到金边和内衬 */
.s7 .mapCard .mapShot{
	display:block;
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#0a0d0b;
}

.s7 .mapCard .mapShot img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	filter:saturate(0.86) brightness(0.94);
	-webkit-user-drag:none;
	-webkit-transition:opacity .65s ease, -webkit-transform .75s cubic-bezier(.22,.61,.36,1), filter .45s ease;
	transition:opacity .65s ease, transform .75s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}
.s7 .mapCard img.isLoaded{
	opacity:1;
}

/* 静止态压暗：让 20 张彩色截图统一压进深色场景里，悬停再"点亮" */
.s7 .mapCard::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:1;
	background:-webkit-linear-gradient(top, rgba(5,8,7,0.04) 0%, rgba(5,8,7,0.06) 45%, rgba(5,8,7,0.20) 100%);
	background:linear-gradient(180deg, rgba(5,8,7,0.04) 0%, rgba(5,8,7,0.06) 45%, rgba(5,8,7,0.20) 100%);
	pointer-events:none;
	-webkit-transition:opacity .4s ease;
	transition:opacity .4s ease;
}
.s7 .mapCard:hover::before{
	opacity:0;
}

/* 内层高光，让金边有"嵌进去"的厚度而不是贴纸 */
.s7 .mapCard::after{
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:2;
	box-shadow:inset 0 0 0 1px rgba(255,245,215,0.16);
	pointer-events:none;
}

.s7 .mapCard:hover{
	z-index:3;
	border-color:rgba(246,216,151,0.95);
	box-shadow:
		0 0 0 1px rgba(246,216,151,0.35),
		0 0 24px rgba(246,216,151,0.30),
		0 10px 26px rgba(0,0,0,0.72);
}
.s7 .mapCard:hover img{
	-webkit-transform:scale(1.075);
	transform:scale(1.075);
	filter:brightness(1.14) saturate(1.10);
}

/* ==========================================================================
   大图灯箱
   ========================================================================== */
.s7-lb{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:200000;
	background:rgba(4,6,6,0.93);
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-justify-content:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
	-webkit-transition:opacity .3s ease, visibility .3s ease;
	transition:opacity .3s ease, visibility .3s ease;
}
.s7-lb.isOn{
	opacity:1;
	visibility:visible;
}

.s7-lb .lbFrame{
	position:relative;
	width:940px;
	max-width:90vw;
	border:6px solid #f6d897;
	border-radius:2px;
	background:#0a0c0b;
	box-shadow:
		0 0 0 1px rgba(0,0,0,0.65),
		0 0 46px rgba(246,216,151,0.26),
		0 28px 60px rgba(0,0,0,0.78);
	-webkit-transform:scale(0.94);
	transform:scale(0.94);
	-webkit-transition:-webkit-transform .34s cubic-bezier(.22,.61,.36,1);
	transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.s7-lb.isOn .lbFrame{
	-webkit-transform:scale(1);
	transform:scale(1);
}

.s7-lb .lbFrame img{
	display:block;
	width:100%;
	height:auto;
	max-height:82vh;
	object-fit:contain;
	background:#0a0c0b;
}

/* 左右切换：贴在金边外侧 */
.s7-lb .lbBtn{
	position:absolute;
	top:50%;
	margin-top:-27px;
	width:54px;
	height:54px;
	line-height:54px;
	text-align:center;
	border-radius:50%;
	background:rgba(12,15,14,0.72);
	border:1px solid rgba(246,216,151,0.55);
	color:#f6d897;
	fill:#f6d897;
	-webkit-transition:background .25s ease, border-color .25s ease, -webkit-transform .25s ease;
	transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.s7-lb .lbBtn svg{
	width:22px;
	height:22px;
	vertical-align:middle;
}
.s7-lb .lbBtn:hover{
	background:rgba(246,216,151,0.16);
	border-color:#f6d897;
	-webkit-transform:scale(1.08);
	transform:scale(1.08);
}
.s7-lb .lbPrev{
	right:100%;
	margin-right:26px;
}
.s7-lb .lbNext{
	left:100%;
	margin-left:26px;
}

/* 关闭：右上角固定在屏幕上，不随图移动 */
.s7-lb .lbClose{
	position:fixed;
	top:28px;
	right:34px;
	width:46px;
	height:46px;
	line-height:44px;
	text-align:center;
	border-radius:50%;
	border:1px solid rgba(246,216,151,0.5);
	background:rgba(12,15,14,0.72);
	font-size:26px;
	color:#f6d897;
	font-family:Arial, Helvetica, sans-serif;
	-webkit-transition:background .25s ease, border-color .25s ease, -webkit-transform .25s ease;
	transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.s7-lb .lbClose:hover{
	background:rgba(246,216,151,0.16);
	border-color:#f6d897;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}

/* 序号：放在金边正下方，不压画面 */
.s7-lb .lbIdx{
	position:absolute;
	left:0;
	right:0;
	bottom:-44px;
	height:28px;
	line-height:28px;
	text-align:center;
	color:#f6d897;
	font-size:15px;
	letter-spacing:2px;
	font-family:Arial, "Microsoft YaHei", sans-serif;
}
.s7-lb .lbIdx b{
	font-weight:bold;
	font-size:18px;
}
.s7-lb .lbIdx i{
	font-style:normal;
	color:rgba(246,216,151,0.55);
	margin-left:4px;
}