/* history.css — 由 style.css 第 613-808 行切分（模块化②，保持原顺序）。link 顺序即层叠顺序，勿乱序。 */
/* ── 方舟历史（苹果风滚动叙事：固定背景 + 双栏时间轴）── */
/* 面板自身占满 view 区域，背景固定不动，内容在 hist-scroll 内滚动 */
.panel[data-panel="history"]{position:relative; padding:0; overflow:hidden}
.panel[data-panel="history"]{overflow:hidden}
.hist-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#060b0e}
/* ASE/ASA 双背景图层：背景全程静止不动（不随时间轴滚动）。
   只在滚到 ASA 发布点时，ASA 图层从下方"滚动切图"上来覆盖一次（一次性、不回退）。*/
/* 两图都参与过渡：JS 按滚动进度设 opacity + scale（交叉溶解+视差缩放，Ken Burns dissolve）。
   无 CSS 过渡=跟手不滞后；transform-origin 居中做缩放。*/
.hist-bg-layer{position:absolute; inset:0; background-size:cover; background-position:center;
  transform-origin:center; will-change:opacity, transform; backface-visibility:hidden}
.hist-bg-ase{background-image:url("/img/hist-ase.webp"); opacity:1}
.hist-bg-asa{background-image:url("/img/hist-asa.webp"); opacity:0}
/* 暗化遮罩：保证时间轴文字可读（图上压渐变）*/
.hist-bg-scrim{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,14,.82), rgba(6,11,14,.7) 42%, rgba(6,11,14,.88))}
.hist-bg-glow{position:absolute; inset:0;
  background:radial-gradient(50% 40% at 50% 30%, rgba(224,179,65,.06), transparent 70%);
  animation:histGlow 18s ease-in-out infinite alternate}
@keyframes histGlow{from{opacity:.5; transform:translateY(0)} to{opacity:1; transform:translateY(-3%)}}

.hist-scroll{position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto;
  padding:0 40px 24vh; scroll-behavior:smooth}
/* 中央时间轴：贯穿整个滚动区的竖线，用 hist-scroll 的伪元素绘制 */
.hist-scroll::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:2px;
  transform:translateX(-1px);
  background:linear-gradient(180deg, transparent, rgba(214,207,191,.18)8%, rgba(214,207,191,.18) 92%, transparent);
  z-index:0}

/* 进场动画（原生 IntersectionObserver 加 .in 触发） */
.hist-reveal{opacity:0; transform:translateY(34px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.hist-reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.hist-reveal{opacity:1; transform:none; transition:none}}

/* 开场标题（铺满首屏） */
.hist-intro{position:relative; z-index:2; max-width:760px; margin:0 auto; min-height:74vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.hist-intro-kicker{font-family:var(--sans); font-size:var(--fs-12); letter-spacing:6px; color:var(--gold); text-transform:uppercase}
.hist-intro-title{font-family:var(--serif); font-size:var(--fs-hero); font-weight:900; line-height:1.2; letter-spacing:4px; margin:.6rem 0 .4rem; color:#fff}
.hist-intro-sub{font-size:var(--fs-14); letter-spacing:2px; color:var(--muted)}
.hist-intro-note{font-size:var(--fs-16); line-height:1.9; color:var(--text-reading); max-width:560px; margin:1.4rem auto 0; font-style:italic}
@media(min-width:881px){.hist-intro-note{max-width:none; white-space:nowrap}}
.hist-cols-head{display:flex; gap:0; width:100%; max-width:680px; margin:3rem auto 0;
  font-family:var(--sans); font-size:var(--fs-14); letter-spacing:3px; color:var(--muted)}
.hist-cols-head span{flex:1; padding:10px 0; border-top:1px solid var(--line)}
.hist-col-l{text-align:right; padding-right:24px!important; color:var(--green)}
.hist-col-r{text-align:left; padding-left:24px!important; color:var(--blue)}
/* 一行 = 左半(ASE) + 中轴 + 右半(ASA) */
.hist-row{position:relative; z-index:1; display:grid; grid-template-columns:1fr 56px 1fr; align-items:start;
  max-width:1080px; margin:0 auto 7vh}
.hist-cell{min-width:0}
.hist-cell.left{padding-right:8px}
.hist-cell.right{padding-left:8px}
.hist-axis{display:flex; justify-content:center; padding-top:30px}
.hist-dot{width:14px; height:14px; border-radius:50%; background:var(--obsidian-2);
  border:2px solid var(--stone-dim); box-shadow:0 0 0 4px rgba(6,12,15,.9); position:relative}
.hist-row.in .hist-dot{animation:histDotPop .5s ease}
@keyframes histDotPop{from{transform:scale(0)} to{transform:scale(1)}}

/* 地图卡片 */
.hist-card{background:rgba(10,20,25,.72); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; backdrop-filter:blur(4px); box-shadow:0 14px 40px rgba(0,0,0,.4)}
.hist-card-date{font-family:var(--sans); font-size:var(--fs-12); letter-spacing:2px; color:var(--muted)}
.hist-card-title{font-family:var(--serif); font-size:var(--fs-24); font-weight:700; line-height:1.2; margin:.3rem 0 .6rem}
.hist-card-title small{display:block; font-family:var(--sans); font-size:var(--fs-12); font-weight:500; letter-spacing:2px; color:var(--muted); margin-top:3px}
.hist-card-desc{font-size:var(--fs-14); line-height:1.85; color:var(--text-reading); margin-bottom:14px}
/* 无影像占位（既无 video 又非里程碑的条目，罕见） */
.hist-video.vph{display:flex; align-items:center; justify-content:center; color:var(--muted-2);
  font-size:var(--fs-14); letter-spacing:2px; background:rgba(0,0,0,.3); border-radius:10px;
  border:1px solid var(--line); padding:14px; aspect-ratio:16/9}

/* CG 封面：点击进剧场放大播放（lightbox）。卡片保持紧凑，视频按需超大。 */
.hist-cg-cover{display:flex; align-items:center; gap:12px; width:100%; margin-top:4px;
  padding:11px 14px; border-radius:11px; cursor:pointer; text-align:left;
  background:linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line); color:var(--txt); font:inherit;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s, background .25s}
.hist-cg-cover:hover{transform:translateY(-2px); border-color:rgba(224,179,65,.5);
  background:linear-gradient(120deg, rgba(224,179,65,.14), rgba(255,255,255,.03))}
.hist-cg-cover .cg-play{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(224,179,65,.18); color:var(--gold); font-size:var(--fs-14); padding-left:2px;
  border:1px solid rgba(224,179,65,.4)}
.hist-cg-cover:hover .cg-play{background:var(--gold); color:#1a1206}
.hist-cg-cover .cg-cover-label{font-size:var(--fs-14); font-weight:600; line-height:1.25}
.hist-cg-cover .cg-cover-label small{display:block; font-size:var(--fs-11); font-weight:400; letter-spacing:1px;
  color:var(--muted); margin-top:2px}

/* 左侧条目卡片靠右贴轴，右侧条目卡片靠左贴轴（苹果交错叙事感）。卡片始终紧凑。 */
.left-item .hist-card{margin-left:auto; max-width:440px}
.right-item .hist-card{margin-right:auto; max-width:440px}

/* 主题色描边：左缘色条对齐编年史 token */
.hist-card.theme-island{border-left:3px solid var(--green)}
.hist-card.theme-scorched{border-left:3px solid var(--gold)}
.hist-card.theme-aberration{border-left:3px solid #a07fc0}
.hist-card.theme-extinction{border-left:3px solid var(--red)}
.hist-card.theme-genesis{border-left:3px solid #5e9fd4}

/* 「ASA 尚未发布」占位（右侧）*/
.hist-pending{max-width:440px; margin-right:auto; padding:16px 18px; border:1px dashed var(--line);
  border-radius:12px; color:var(--muted-2); font-size:var(--fs-14); letter-spacing:2px; text-align:center;
  background:rgba(255,255,255,.012)}

/* 跨栏里程碑事件（官服停服 / 回归）*/
.hist-row.ev .hist-axis{padding-top:26px}
.hist-dot.ev-dot{width:18px; height:18px}
.hist-row.ev.ev-shutdown .hist-dot{border-color:var(--red); box-shadow:0 0 14px var(--red),0 0 0 4px rgba(6,12,15,.9)}
.hist-row.ev.ev-revive .hist-dot{border-color:var(--gold); box-shadow:0 0 14px var(--gold),0 0 0 4px rgba(6,12,15,.9)}
.hist-aside{max-width:440px; margin-left:auto; text-align:right; font-size:var(--fs-12); line-height:1.7;
  color:var(--muted-2); font-style:italic; padding-top:30px}
.hist-event-card{max-width:480px; margin-left:auto; padding:18px 22px; border-radius:14px;
  background:rgba(14,26,31,.82); border:1px solid var(--line); box-shadow:0 14px 44px rgba(0,0,0,.5)}
.ev-shutdown .hist-event-card{border-top:3px solid var(--red)}
.ev-revive .hist-event-card{border-top:3px solid var(--gold)}
.hist-event-date{font-size:var(--fs-12); letter-spacing:2px; color:var(--muted)}
.hist-event-title{font-family:var(--serif); font-size:var(--fs-24); font-weight:700; margin:.3rem 0 .6rem}
.ev-shutdown .hist-event-title{color:var(--red)} .ev-revive .hist-event-title{color:var(--gold)}
.hist-event-title small{display:block; font-family:var(--sans); font-size:var(--fs-11); font-weight:500; letter-spacing:2px; color:var(--muted); margin-top:3px}
.hist-event-desc{font-size:var(--fs-14); line-height:1.85; color:var(--text-reading)}

/* 收尾 */
.hist-foot{max-width:760px; margin:6vh auto 0; text-align:center}
.hist-foot p{font-size:var(--fs-14); letter-spacing:2px; color:var(--muted); margin-bottom:14px}
.hist-foot-link{display:inline-block; padding:10px 22px; border:1px solid rgba(63,169,245,.35);
  border-radius:8px; color:var(--blue); text-decoration:none; font-size:var(--fs-14); letter-spacing:1px; transition:.2s}
.hist-foot-link:hover{background:rgba(63,169,245,.1)}

/* ════ CG 剧场 lightbox：全屏遮罩 + 居中大播放器（点击封面打开）════ */
.cg-modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  opacity:0; transition:opacity .28s ease; padding:5vh 4vw}
.cg-modal.on{opacity:1}
.cg-modal[hidden]{display:none}
.cg-modal-back{position:absolute; inset:0; background:rgba(2,5,7,.86); backdrop-filter:blur(6px); cursor:zoom-out}
.cg-modal-box{position:relative; z-index:1; width:min(92vw, 1280px);
  transform:scale(.96); transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.cg-modal.on .cg-modal-box{transform:scale(1)}
.cg-modal-player{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px;
  overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.75); border:1px solid rgba(255,255,255,.12)}
.cg-modal-player iframe{width:100%; height:100%; border:none; display:block}
.cg-modal-cap{margin-top:14px; text-align:center; font-size:var(--fs-14); letter-spacing:2px; color:var(--muted)}
.cg-modal-x{position:absolute; top:-48px; right:0; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:var(--fs-20);
  cursor:pointer; line-height:1; transition:.2s}
.cg-modal-x:hover{background:rgba(255,255,255,.24); transform:rotate(90deg)}
body.cg-open{overflow:hidden}

/* 方舟历史：平板与手机改单栏，时间轴移到左侧，所有内容靠右排。 */
@media(max-width:880px){
  .hist-scroll{padding:0 18px 24vh}
  .hist-scroll::before{left:17px}
  /* 轴在左列，左右两半内容都堆进右列（DOM 顺序：left → axis → right）。
     用 flex 重排：axis 提到最前，左右 cell 顺序展示，空 cell 自动塌缩。 */
  .hist-row{display:flex; align-items:flex-start; gap:12px; max-width:560px}
  .hist-axis{order:0; flex:0 0 auto; padding-top:24px; width:14px; justify-content:flex-start}
  .hist-cell{order:1; flex:1; padding:0!important}
  .left-item .hist-cell.right,.right-item .hist-cell.left,.hist-row.ev .hist-cell.right{display:none}
  .hist-pending{display:none}              /* 单栏下「尚未发布」占位省略，避免割裂 */
  .left-item .hist-card,.right-item .hist-card,.hist-event-card,.hist-aside{max-width:none; margin:0; text-align:left}
  .cg-modal-x{top:6px; right:6px}            /* 手机端关闭键移进框内右上 */
  .hist-aside{padding-top:0; margin-bottom:10px}
  .hist-cols-head{display:none}
}

@media(max-width:520px){
  .hist-intro{min-height:calc(100dvh - var(--mobile-header-h) - 24px)}
  .hist-intro-title{font-size:var(--fs-hero); letter-spacing:2px}
  .hist-intro-sub{font-size:var(--fs-12); line-height:1.7; letter-spacing:1px}
  .hist-intro-note{font-size:var(--fs-14); line-height:1.85}
  .hist-card,.hist-event-card{padding:16px}
}