/* ============================================================
   长廊模式 —— 手绘素描风展廊（参考 itomdev 的做法）
   刻意不追照片级写实：纸纹底 + 铅笔线稿 + 淡水彩，
   风格本身就是"画出来的"，所以不会有 3D 建模不到位的塑料感。
   展品用 CSS 3D 真实贴在墙面上（和墙共用同一个变换坐标系），
   而不是浮在半空。
   ============================================================ */

/* ---------- 场景容器 ---------- */
#rp-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1250px;
  perspective-origin: 50% 48%;
  background: #f4f1e8;          /* 米白纸张底色 */
}
#rp-root.rp-flat #rp-world { display: none; }

/* 纸纹：细颗粒 + 横纹，铺在整个场景之上 */
#rp-world::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .34;
  background-image: linear-gradient(0deg, rgba(120,110,92,.05) 0 1px, transparent 1px);
  background-size: 100% 3px;
}
/* 四角压暗，像翻开的速写本 */
#rp-world::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 29;
  background: radial-gradient(96% 92% at 50% 46%,
    transparent 0%, transparent 74%, rgba(146,132,104,.20) 100%);
}

#rp-hall {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- 建筑面：全部铅笔线稿 ---------- */
.hl-surface {
  position: absolute;
  transform-style: flat;
  pointer-events: none;
}

/* 地板：手绘方砖 */
.hl-floor {
  width: var(--hall-w);
  left: calc(var(--hall-w) / -2);
  top: 0;
  transform-origin: 50% 0;
  /* 小 tile 平铺代替超大面 repeating-gradient：只栅格化 380px 一小块 */
  background-color: #d6cbaf;
  background-image:
    linear-gradient(0deg, rgba(60,50,32,.30) 0 3px, transparent 3px);
  background-size: 100% 380px;
  background-repeat: repeat-y;
}
/* 中央走道：淡赭石水彩 */
/* 中央地毯：赭红长毯，两侧描边，是走廊最抓地的元素 */
.hl-floor::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg,
    transparent 0 31%,
    rgba(70,58,38,.55) 31% 31.6%,
    rgba(176,116,88,.42) 31.6% 33%,
    rgba(190,132,102,.34) 33% 67%,
    rgba(176,116,88,.42) 67% 68.4%,
    rgba(70,58,38,.55) 68.4% 69%,
    transparent 69%);
}

/* 天花：拱顶，只用线勾 */
.hl-ceil {
  width: var(--hall-w);
  left: calc(var(--hall-w) / -2);
  top: 0;
  transform-origin: 50% 0;
  background-color: #f7f4ec;
  background-image:
    linear-gradient(0deg, rgba(80,68,48,.40) 0 2px, transparent 2px),
    linear-gradient(90deg,
      rgba(176,164,138,.22) 0%, rgba(255,253,246,.5) 50%, rgba(176,164,138,.22) 100%);
  background-size: 100% 300px, 100% 100%;
  background-repeat: repeat-y, no-repeat;
}

/* 天窗带 */
.hl-skylight {
  position: absolute;
  width: calc(var(--hall-w) * .34);
  left: calc(var(--hall-w) * -.17);
  top: 0;
  transform-origin: 50% 0;
  background-image:
    linear-gradient(0deg, rgba(120,108,86,.30) 0 3px, transparent 3px),
    linear-gradient(90deg,
      rgba(255,250,232,.2), rgba(255,252,242,.72), rgba(255,250,232,.2));
  background-size: 100% 200px, 100% 100%;
  background-repeat: repeat-y, no-repeat;
  pointer-events: none;
}

/* ---------- 墙平面：画就挂在它里面 ----------
   关键：画和墙共用同一个变换，所以严丝合缝贴在墙上，
   不会像之前那样浮在半空。 */
.hl-wallplane {
  position: absolute;
  width: calc(var(--hall-len) + var(--hall-back));
  height: var(--hall-h);
  top: calc(var(--hall-h) / -2);
  left: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.hl-wallplane.left  { transform: translateX(calc(var(--hall-w) / -2)) rotateY(90deg) translateX(calc(var(--hall-back) * -1)); }
.hl-wallplane.right {
  transform: translateX(calc(var(--hall-w) / 2)) rotateY(-90deg)
             translateX(calc(var(--hall-len) * -1));
}

/* 墙身：米白纸 */
.hl-wallface {
  position: absolute; top: 0; bottom: 0;
  background-color: #faf7f0;
  background-image: linear-gradient(0deg, rgba(110,98,74,.07) 0 1px, transparent 1px);
  background-size: 100% 5px;
  box-shadow: inset 0 0 160px rgba(140,124,94,.26);
}
/* 檐口线 */
.hl-wallface::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 74px;
  height: 26px;
  border-top: 2px solid rgba(88,76,54,.72);
  border-bottom: 2px solid rgba(88,76,54,.58);
  background: rgba(224,213,186,.62);
}
/* 墙裙 */
.hl-wallface::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 118px;
  border-top: 2px solid rgba(88,76,54,.72);
  background-color: rgba(222,212,188,.75);
  background-image: linear-gradient(90deg, rgba(96,84,62,.20) 0 1px, transparent 1px);
  background-size: 26px 100%;
}

/* 壁柱：素描双线 + 排线 */
.hl-pilaster {
  position: absolute;
  width: 56px;
  top: 116px; bottom: 138px;
  border-left: 2px solid rgba(88,76,54,.75);
  border-right: 2px solid rgba(88,76,54,.75);
  background-color: rgba(238,231,213,.85);
  background-image: linear-gradient(90deg, rgba(96,84,62,.26) 0 1px, transparent 1px);
  background-size: 9px 100%;
  pointer-events: none;
}
.hl-pilaster::before,
.hl-pilaster::after {
  content: "";
  position: absolute; left: -10px; right: -10px;
  height: 20px;
  border: 2px solid rgba(88,76,54,.75);
  background: rgba(236,229,211,.8);
}
.hl-pilaster::before { top: -20px; }
.hl-pilaster::after  { bottom: -20px; }

/* 拱券：墙上勾出来的半圆线 */
.hl-arch {
  position: absolute;
  top: 100px; height: 150px;
  border: 2px solid rgba(88,76,54,.52);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

/* 吊灯：线稿铃铛 */
.hl-lamp {
  position: absolute;
  width: 54px; height: 40px;
  left: -27px;
  top: calc(var(--hall-h) / -2 + 2px);
  pointer-events: none;
}
.hl-lamp .cord {
  position: absolute; left: 50%; top: 0;
  width: 2px; height: 58px; margin-left: -1px;
  background: rgba(88,76,54,.72);
}
.hl-lamp .shade {
  position: absolute; left: 0; top: 56px;
  width: 54px; height: 30px;
  border: 2px solid rgba(88,76,54,.78);
  border-radius: 0 0 60% 60% / 0 0 90% 90%;
  background: rgba(255,246,214,.62);
}
.hl-lamp .glow {
  position: absolute; left: -50px; top: 66px;
  width: 154px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(255,242,196,.42) 0%, rgba(255,240,200,.12) 48%, transparent 76%);
}

/* 地面淡影 */
.hl-pool {
  position: absolute;
  width: 300px; height: 96px;
  left: -150px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(140,126,100,.14) 0%, transparent 74%);
  pointer-events: none;
}

/* ---------- 展品：挂在墙平面里 ----------
   .hl-piece 是 .hl-wallplane 的子元素，用普通 left/top 定位即可精确贴墙 */
.hl-piece {
  position: absolute;
  contain: layout style paint;
  width: var(--piece-w);
  top: 50%;
  margin-top: calc(var(--piece-h) / -2 - 34px);
  transform: translateZ(6px);          /* 只离墙 6px = 画框厚度 */
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3,.7,.3,1), filter .5s;
  cursor: pointer;
}
.hl-piece:hover { transform: translateZ(24px); }

/* 画框：手绘双线木框 + 硬边投影 */
.hl-frame {
  position: relative;
  padding: 13px;
  background: rgba(250,246,236,.96);
  border: 3px solid rgba(72,60,42,.85);
  box-shadow:
    inset 0 0 0 5px rgba(250,246,236,1),
    inset 0 0 0 7px rgba(72,60,42,.5),
    7px 9px 0 rgba(104,90,66,.26);
  transition: box-shadow .4s;
}
.hl-piece:hover .hl-frame {
  box-shadow:
    inset 0 0 0 5px rgba(250,246,236,1),
    inset 0 0 0 7px rgba(72,60,42,.5),
    12px 15px 0 rgba(104,90,66,.32);
}
.hl-mat { background: #fffdf7; }

/* 展签：钉在墙上的小卡片 */
.hl-plate {
  position: absolute;
  bottom: -74px; left: 4px;
  width: 220px;
  padding: 8px 11px;
  background: #fffdf6;
  border: 2px solid rgba(72,60,42,.8);
  box-shadow: 4px 5px 0 rgba(104,90,66,.22);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  color: #4a4132;
}
.hl-plate .n {
  font-family: var(--rp-mono);
  font-size: 10.5px;
  color: #8a7a54;
  letter-spacing: .12em;
}
.hl-plate .t { font-weight: 700; color: #332d22; font-size: 12.5px; }
.hl-plate .d { color: #6f6450; font-size: 11px; }

/* 展品画面 */
.hl-shot {
  width: 100%;
  height: var(--piece-h);
  overflow: hidden;
  position: relative;
  background: #fffdf7;
}
.hl-shot .hl-thumb {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  /* 让照片也带一点素描味，和线稿场景统一 */
  filter: saturate(.72) contrast(1.04) sepia(.12);
}
.hl-poster {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 13px;
  padding: 8% 9%;
  background: #fffdf7;
}
.hl-poster .pk {
  font-family: var(--rp-mono);
  font-size: 15px; letter-spacing: .16em;
  color: #8a7a54;
}
.hl-poster .pt {
  font-size: 40px; font-weight: 800; line-height: 1.18;
  color: #2b2620;
}
.hl-poster .pd { font-size: 18px; color: #6f6450; line-height: 1.6; }
.hl-poster .pl {
  margin-top: 6px; font-size: 16px; color: #6f6450;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.hl-poster .pl i { color: #8a7a54; font-style: normal; }

/* 没走到跟前的画：像"还没画完"——淡、少细节。
   这就是 itomdev 那个 paint-reveal 的思路。 */
.hl-piece .hl-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(246,243,236,.3);
  transition: opacity .7s;
  pointer-events: none;
}
.hl-piece.lit .hl-frame::after { opacity: 0; }
.hl-piece:not(.lit) .hl-frame::after { opacity: 1; }
.hl-piece:not(.lit) { filter: saturate(.35); }

.hl-enter {
  position: absolute;
  right: 12px; bottom: 12px;
  padding: 6px 13px;
  background: #fffdf6;
  border: 2px solid rgba(96,84,64,.6);
  box-shadow: 2px 3px 0 rgba(120,106,82,.2);
  color: #332d22; font-size: 12.5px; font-weight: 700;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.hl-piece.lit:hover .hl-enter { opacity: 1; transform: none; }

/* ---------- 走廊尽头 ---------- */
.hl-end {
  position: absolute;
  width: var(--hall-w); height: var(--hall-h);
  left: calc(var(--hall-w) / -2);
  top: calc(var(--hall-h) / -2);
  background: #f2eee3;
  border: 2px solid rgba(104,92,70,.3);
  pointer-events: none;
}
.hl-end::before {
  content: "";
  position: absolute;
  left: 30%; right: 30%; bottom: 0; top: 26%;
  border: 3px solid rgba(104,92,70,.42);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  background: linear-gradient(180deg, rgba(255,250,230,.5), rgba(228,220,200,.35));
}

/* 远处渐隐：纸色的雾，不是黑 */
#rp-fog {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(26% 22% at 50% 46%,
    rgba(246,243,235,.85) 0%, rgba(246,243,235,.45) 55%, rgba(246,243,235,0) 100%);
}

/* ---------- 抬头信息 ---------- */
#rp-hud {
  position: absolute;
  left: 50%; bottom: 5.4vh;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  padding: 9px 19px;
  background: #fffdf6;
  border: 2px solid rgba(96,84,64,.55);
  box-shadow: 4px 5px 0 rgba(120,106,82,.18);
  font-size: 12.5px; color: #5b5140;
  white-space: nowrap;
  z-index: 31;
  transition: opacity .35s, transform .35s;
}
#rp-hud b { color: #2b2620; font-family: var(--rp-mono); }
#rp-hud .sep { width: 2px; height: 15px; background: rgba(96,84,64,.25); }
#rp-hud kbd {
  font-family: var(--rp-mono); font-size: 11px;
  padding: 2px 6px;
  background: #f2eee2; border: 1px solid rgba(96,84,64,.4);
  color: #4a4132;
}
#rp-dots { display: flex; gap: 7px; }
#rp-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid rgba(96,84,64,.45);
  background: transparent; cursor: pointer;
  transition: background .3s, transform .3s;
}
#rp-dots i.on { background: #6b5c3e; transform: scale(1.25); }

/* ---------- 展品放大 ---------- */
#rp-view {
  position: absolute; inset: 0;
  z-index: 40;
  display: none;
  padding: 4.5vh 4vw 9vh;
  background: #f4f5f9;
  overflow-y: auto;
}
#rp-view.on { display: block; animation: hlZoomIn .28s ease-out; }
/* 详情页立刻可读：取消逐块错序动画 */
#rp-view .rp-slide.rp-active > * { animation: none !important; opacity: 1 !important; transform: none !important; }
@keyframes hlZoomIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#rp-view .rp-slide {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 0;
  inset: auto;
  overflow: visible;
}
#rp-back {
  position: fixed;
  left: 2.6vw; top: 2.6vh;
  z-index: 44;
  display: none;
  align-items: center; gap: 8px;
  padding: 9px 17px;
  border: 2px solid rgba(96,84,64,.55);
  background: #fffdf6;
  box-shadow: 3px 4px 0 rgba(120,106,82,.18);
  color: #332d22;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: transform .2s;
}
#rp-back.on { display: inline-flex; }
#rp-back:hover { transform: translate(-3px, -1px); }

#rp-root.rp-zoom #rp-hud { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); }
/* 详情态：长廊直接不渲染，省掉 3D 合成开销 */
#rp-root.rp-zoom #rp-world,
#rp-root.rp-zoom #rp-fog,
#rp-root.rp-zoom #rp-hud { display: none; }
#rp-root:not(.rp-flat) #rp-nav,
#rp-root:not(.rp-flat) #rp-hint { display: none; }

@keyframes hlEnterHall { from { opacity: 0; } to { opacity: 1; } }
#rp-world.entering { animation: hlEnterHall .9s ease both; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  #rp-world { perspective: 700px; perspective-origin: 50% 48%; }
  .hl-plate { width: 150px; bottom: -66px; font-size: 11px; padding: 6px 9px; }
  .hl-poster .pt { font-size: 26px; }
  .hl-poster .pd { font-size: 14px; }
  .hl-poster .pl { font-size: 13px; }
  .hl-frame { padding: 9px; }
  #rp-hud { gap: 10px; padding: 7px 13px; font-size: 11.5px; bottom: 3.4vh; }
  #rp-hud .hide-sm { display: none; }
  #rp-view { padding: 7vh 5vw 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  #rp-hall, .hl-piece { transition: none !important; }
  #rp-view.on { animation: none; }
}