@charset "UTF-8";

/* ============================================================
   明清器物 · 三维展厅
   左标本 / 右名录
   ============================================================ */

:root{
  --paper:   #f2efe9;
  --ink:     #171410;
  --ink-2:   rgba(23,20,16,.72);
  --ink-3:   rgba(23,20,16,.46);
  --rule:    rgba(23,20,16,.14);
  --rule-2:  rgba(23,20,16,.07);
  --accent:  #2c5f66;

  --serif: "Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:  "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --num:   "Bahnschrift","DIN Alternate","Helvetica Neue",Arial,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }

body{
  font-family:var(--sans); color:var(--ink);
  background:var(--paper); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

.wall{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 62% at 38% 46%, #ffffff 0%, #fbfaf6 46%, #f3f0ea 80%, #e9e5dd 100%);
}
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 顶栏 ------------------------------------------------------ */
.bar{
  position:relative; z-index:10;
  height:72px; display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; border-bottom:1px solid var(--rule-2);
}
.brand{ display:flex; align-items:center; gap:14px; }
.mark{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  border:1px solid var(--rule);
  font-family:var(--serif); font-size:15px;
}
.brand h1{
  font-family:var(--serif); font-weight:400; font-size:16px;
  letter-spacing:.22em; line-height:1.2;
}
.brand p{
  margin-top:5px; font-family:var(--num);
  font-size:8px; letter-spacing:.24em; color:var(--ink-3);
}
.place{ font-size:10px; letter-spacing:.18em; color:var(--ink-3); }

/* 版面：左侧舞台 / 右侧名录 -------------------------------- */
.room{
  position:relative; z-index:1;
  height:calc(100dvh - 72px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-rows:1fr auto;
}

.stage{
  grid-column:1; grid-row:1 / span 2;
  position:relative; min-width:0; min-height:0;
}
#canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; cursor:grab;
  opacity:0; transition:opacity .9s ease;
}
#canvas:active{ cursor:grabbing; }
body.is-ready #canvas{ opacity:1; }
#canvas.is-switching{
  opacity:0; transform:scale(.985);
  transition:opacity .3s ease, transform .3s ease;
}

.stage-hint{
  position:absolute; left:48px; top:26px; z-index:3;
  font-size:9.5px; letter-spacing:.2em; color:var(--ink-3);
  transition:opacity .5s ease;
}
.zoom{
  position:absolute; right:28px; bottom:156px; z-index:3;
  display:flex; flex-direction:column; gap:1px;
}
.zoom button{
  width:30px; height:30px; border:1px solid var(--rule); background:rgba(255,255,255,.5);
  color:var(--ink-2); font-size:15px; line-height:1; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.zoom button:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.zoom button:active{ transform:translateY(1px); }

/* 名录 ------------------------------------------------------ */
.rail{
  grid-column:2; grid-row:1 / span 2;
  display:flex; flex-direction:column; min-height:0;
  border-left:1px solid var(--rule);
  padding:30px 0 18px;
  background:rgba(255,255,255,.3);
}
.rail-head{ padding:0 28px 20px; border-bottom:1px solid var(--rule-2); }
.rail-head .era{
  font-size:10px; letter-spacing:.26em; color:var(--accent); margin-bottom:10px;
}
.rail-head h2{
  font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:.2em;
}

.rail-list{
  list-style:none; flex:1; min-height:0;
  overflow-y:auto; scrollbar-width:thin;
  padding:10px 0 4px;
}
.rail-group{
  display:flex; align-items:center; gap:12px;
  padding:15px 28px 7px;
  font-size:9px; letter-spacing:.26em; color:var(--accent);
}
.rail-group i{ display:block; flex:1; height:1px; background:var(--rule-2); }
.rail-group:first-child{ padding-top:6px; }
.rail-item{ display:block; }

.rail-item button{
  position:relative; width:100%;
  display:grid; grid-template-columns:32px 1fr auto; align-items:start; gap:8px;
  padding:11px 28px;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--ink-2); font-family:var(--sans);
  transition:color .3s ease, background .3s ease, padding .3s ease;
}
.rail-item .no{
  font-family:var(--num); font-size:9.5px; letter-spacing:.12em;
  color:var(--ink-3); transition:color .3s ease;
}
.rail-item .nm{
  font-size:12.5px; line-height:1.6; letter-spacing:.02em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rail-item .er{
  font-size:9.5px; letter-spacing:.14em; color:var(--ink-3);
  transition:color .3s ease;
}
.rail-item button::before{
  content:""; position:absolute; left:0; top:50%; width:2px; height:0;
  background:var(--accent); transform:translateY(-50%);
  transition:height .32s cubic-bezier(.2,.75,.2,1);
}
.rail-item button:hover{ color:var(--ink); background:rgba(255,255,255,.5); }
.rail-item button:hover .no{ color:var(--ink-2); }
.rail-item button:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
.rail-item.is-on button{ color:var(--ink); background:#fff; padding-left:34px; box-shadow:0 1px 0 rgba(23,20,16,.025), 0 7px 22px -18px rgba(23,20,16,.28); }
.rail-item.is-on button::before{ height:60%; }
.rail-item.is-on .no,
.rail-item.is-on .er{ color:var(--accent); }
.rail-item.is-on .nm{ font-weight:500; letter-spacing:.01em; }

.rail-foot{
  padding:16px 28px 0; border-top:1px solid var(--rule-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.specimen{
  font-family:var(--num); font-size:9px; letter-spacing:.16em; color:var(--ink-3);
  white-space:nowrap;
}
.auto{
  background:none; border:1px solid var(--rule); padding:6px 10px;
  font-family:var(--sans); font-size:9.5px; letter-spacing:.16em;
  color:var(--ink-3); cursor:pointer;
  transition:color .25s, border-color .25s, background .25s;
}
.auto[aria-pressed="true"]{ color:var(--accent); border-color:rgba(44,95,102,.4); }
.auto:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* 器物铭牌 -------------------------------------------------- */
.plate{
  position:relative;
  grid-column:1; grid-row:2;
  padding:0 48px 38px;
  pointer-events:none;
}
.plate .no{
  font-family:var(--num); font-size:9.5px; letter-spacing:.24em; color:var(--ink-3);
  margin-bottom:10px;
}
.plate h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(21px, 1.85vw, 28px); letter-spacing:.08em; line-height:1.4;
  max-width:22em;
}
.plate .meta{
  margin-top:12px; font-size:10.5px; letter-spacing:.14em; color:var(--ink-3);
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
.plate .meta > * + *::before{
  content:""; display:inline-block; width:3px; height:3px;
  margin:0 13px; border-radius:50%; background:var(--rule); vertical-align:2px;
}
.plate .meta b{ font-weight:400; color:var(--accent); }

/* 切换动效 -------------------------------------------------- */
.plate.is-out, .stage.is-out #canvas{ opacity:0; }
.plate{
  opacity:1; transform:none;
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.75,.2,1);
}
.plate.is-out{ transform:translateY(6px); }

/* 载入层 ---------------------------------------------------- */
.boot{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:#f5f2ed;
  transition:opacity .9s ease, visibility .9s ease;
}
body.is-ready .boot{ opacity:0; visibility:hidden; }
.boot-inner{ width:260px; text-align:center; }
.boot-seal{
  width:52px; height:52px; margin:0 auto 26px;
  display:grid; place-items:center; border:1px solid var(--rule);
  font-family:var(--serif); font-size:21px;
  animation:sealIn 1.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sealIn{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:none } }
.boot-title{
  font-family:var(--serif); font-size:19px; letter-spacing:.28em; text-indent:.28em;
  margin-bottom:24px;
}
.boot-bar{ position:relative; height:1px; background:var(--rule-2); }
.boot-bar i{
  position:absolute; left:0; top:0; height:1px; width:0; background:var(--accent);
  transition:width .4s cubic-bezier(.3,.8,.3,1);
}
.boot-meta{
  display:flex; justify-content:space-between; margin-top:11px;
  font-family:var(--num); font-size:9px; letter-spacing:.18em; color:var(--ink-3);
}

/* 窄屏 ------------------------------------------------------ */
@media (max-width:1180px){
  .room{ grid-template-columns:1fr 300px; }
  .rail-head, .rail-item button{ padding-left:22px; padding-right:22px; }
  .rail-foot{ padding-left:22px; padding-right:22px; }
  .bar{ padding:0 28px; }
  .plate{ padding:0 28px 30px; }
  .stage-hint{ left:28px; }
}
@media (max-width:860px){
  body{ overflow:auto; }
  .room{
    height:auto; grid-template-columns:1fr;
    grid-template-rows:56vh auto auto;
  }
  .stage{ grid-row:1; grid-column:1; height:56vh; }
  .plate{ grid-row:2; grid-column:1; padding:22px 20px 18px; }
  .rail{
    grid-row:3; grid-column:1; border-left:0; border-top:1px solid var(--rule);
    padding:18px 0 24px;
  }
  .rail-list{ overflow:visible; }
  .bar{ height:60px; padding:0 20px; }
  .place{ display:none; }
  .brand p{ display:none; }
  .stage-hint{ display:none; }
  .zoom{ right:16px; bottom:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  #canvas{ opacity:1; }
}