/* ============================================================
   scene-ui.css · 场景交互层
     · .hotspots / .hotspot   药草在画面里的热点（HTML 定位，可点可聚焦）
     · .inspect               360° 查看层（说明卡 + 关闭）
     · .spec-btn              标本卡上的入口
   ============================================================ */

/* ---------- 场景热点 ---------- */
.hotspots{
  position:fixed;inset:0;z-index:22;
  pointer-events:none;
}
.hotspot{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-100%);
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .78rem .4rem .62rem;
  border-radius:var(--r-pill);
  background:rgba(9,16,12,.62);
  border:1px solid rgba(230,200,144,.4);
  color:#f6edd4;
  font-family:var(--font-body);
  font-size:.8rem;letter-spacing:.06em;line-height:1;
  white-space:nowrap;
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.95),0 0 26px -16px rgba(217,168,90,.9);
  transition:opacity .45s var(--ease),border-color .4s var(--ease),
             background .4s var(--ease),box-shadow .4s var(--ease);
  will-change:transform,opacity;
}
.hotspot::after{
  content:"";position:absolute;left:50%;top:100%;
  width:1px;height:.85rem;
  background:linear-gradient(rgba(230,200,144,.55),rgba(230,200,144,0));
  transform:translateX(-50%);
}
.hotspot .hs-dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--c-gold);box-shadow:0 0 0 0 rgba(217,168,90,.6);
  animation:hsPulse 2.6s ease-out infinite;
  animation-delay:var(--pd,0s);
}
@keyframes hsPulse{
  0%{box-shadow:0 0 0 0 rgba(217,168,90,.55)}
  62%{box-shadow:0 0 0 11px rgba(217,168,90,0)}
  100%{box-shadow:0 0 0 0 rgba(217,168,90,0)}
}
.hotspot .hs-en{
  font-family:var(--font-latin);font-style:italic;
  font-size:.9em;letter-spacing:.01em;
  color:rgba(246,237,212,.6);
}
.hotspot .hs-360{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  color:rgba(230,200,144,.82);
  border-left:1px solid rgba(230,200,144,.26);
  padding-left:.5rem;
}
.hotspot:hover,.hotspot:focus-visible{
  border-color:rgba(230,200,144,.85);
  background:rgba(14,23,17,.82);
  box-shadow:0 12px 30px -16px rgba(0,0,0,.95),0 0 34px -12px rgba(217,168,90,.75);
}
.hotspot:focus-visible{outline:2px solid var(--c-gold-soft);outline-offset:3px}
.hotspot.is-hidden{opacity:0;pointer-events:none}
.hotspot.is-near{border-color:rgba(230,200,144,.62)}
@media (max-width:640px){
  .hotspot{font-size:.7rem;padding:.32rem .6rem .32rem .5rem;gap:.36rem}
  .hotspot .hs-en{display:none}
  .hotspot .hs-360{font-size:.52rem;padding-left:.4rem}
}

/* ---------- 标本卡上的入口 ---------- */
.spec-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  align-self:flex-start;
  margin-top:.9rem;
  padding:.5rem .85rem;
  border-radius:var(--r-pill);
  border:1px solid rgba(230,200,144,.32);
  background:rgba(10,17,13,.52);
  color:#f2e7c8;
  font-family:var(--font-body);
  font-size:.78rem;letter-spacing:.08em;
  cursor:pointer;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.spec-btn .sb-dot{
  width:6px;height:6px;border-radius:50%;background:var(--c-gold);
  box-shadow:0 0 0 0 rgba(217,168,90,.6);
  animation:hsPulse 2.6s ease-out infinite;
}
.spec-btn em{
  font-style:normal;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  color:rgba(230,200,144,.85);
  border-left:1px solid rgba(230,200,144,.28);
  padding-left:.5rem;
}
.spec-btn:hover{
  border-color:rgba(230,200,144,.7);
  background:rgba(16,26,19,.82);
  transform:translateY(-1px);
}
.spec-btn:active{transform:translateY(0) scale(.985)}
.spec-btn:focus-visible{outline:2px solid var(--c-gold-soft);outline-offset:3px}

/* ---------- 360° 查看层 ---------- */
.inspect{
  position:fixed;inset:0;z-index:45;
  pointer-events:none;
}
.inspect[hidden]{display:none}
.inspect-veil{
  position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 46%,transparent 34%,rgba(2,5,4,.62) 100%);
  opacity:0;
  transition:opacity .65s var(--ease);
}
.inspect.on .inspect-veil{opacity:1}

.inspect-card{
  position:absolute;
  left:var(--pad-x);
  bottom:clamp(1.2rem,5.5vh,3.4rem);
  width:min(40ch,36vw);
  padding:1.35rem 1.4rem 1.2rem;
  border-radius:var(--r-glass);
  background:
    radial-gradient(rgba(238,240,226,.05) 1.2px,transparent 1.5px) 0 0/7px 7px,
    linear-gradient(165deg,rgba(10,17,12,.93),rgba(6,11,8,.9));
  border:1px solid rgba(238,240,226,.15);
  box-shadow:inset 0 1px rgba(238,240,226,.07),0 30px 60px -40px rgba(0,0,0,.95);
  color:#eee9d8;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease) .12s,transform .6s var(--ease) .12s;
}
.inspect.on .inspect-card{opacity:1;transform:none}

.inspect-kicker{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  color:rgba(217,168,90,.85);
  margin-bottom:.55rem;
}
.inspect-kicker em{
  font-family:var(--font-latin);font-style:italic;letter-spacing:.02em;
  color:rgba(238,240,226,.45);
  padding-left:.4rem;
}
.inspect-name{
  font-family:var(--font-display);
  font-weight:400;font-size:1.75rem;line-height:1.15;
  letter-spacing:.06em;color:#f8f2e0;
}
.inspect-latin{
  font-family:var(--font-latin);font-style:italic;
  font-size:.95rem;color:rgba(230,200,144,.82);
  margin-top:.15rem;
}
.inspect-xing{
  margin-top:.85rem;
  font-family:var(--font-kai);font-size:.98rem;
  color:rgba(238,240,226,.9);
}
.inspect-xing-en{
  font-size:.76rem;line-height:1.6;letter-spacing:.01em;
  color:rgba(226,232,210,.5);
  margin-top:.2rem;
}
.inspect-note{
  margin-top:.85rem;
  font-size:.86rem;line-height:1.75;
  color:rgba(238,242,220,.86);
}
.inspect-note-en{
  margin-top:.35rem;
  font-size:.78rem;line-height:1.7;
  color:rgba(226,232,210,.48);
}
.inspect-hint{
  margin-top:1rem;padding-top:.8rem;
  border-top:1px solid rgba(238,240,226,.1);
  font-size:.72rem;letter-spacing:.08em;
  color:rgba(232,236,214,.62);
  line-height:1.7;
}
.inspect-hint span{
  font-family:var(--font-latin);font-style:italic;
  font-size:.92em;color:rgba(232,236,214,.42);
}

.inspect-close{
  position:absolute;
  right:var(--pad-x);
  top:calc(1.2rem + 3.2rem);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(238,240,226,.24);
  background:rgba(9,16,12,.7);
  color:#f4eeda;
  font-size:1.5rem;line-height:1;
  cursor:pointer;
  pointer-events:auto;
  opacity:0;transform:scale(.9);
  transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s,
             border-color .4s var(--ease),background .4s var(--ease);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.inspect.on .inspect-close{opacity:1;transform:none}
.inspect-close:hover{border-color:rgba(230,200,144,.8);background:rgba(16,26,19,.88)}
.inspect-close:focus-visible{outline:2px solid var(--c-gold-soft);outline-offset:3px}

/* 查看时：把页面上的小字收起来，让模型独占视觉 */
/* 展示厅：页面文字整层退场，画布换成独立的标本场景 */
body.is-inspecting #scroll,
body.is-inspecting #main-nav,
body.is-inspecting .hud,
body.is-inspecting .rail,
body.is-inspecting .stamp,
body.is-inspecting .hotspots{
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
body.is-inspecting .dap{opacity:.16;transition:opacity .6s var(--ease)}
body.is-inspecting{cursor:grab}
body.is-inspecting.is-dragging{cursor:grabbing}

@media (max-width:860px){
  .inspect-card{
    left:var(--pad-x);right:var(--pad-x);
    width:auto;
    bottom:1rem;
    padding:1.1rem 1.15rem 1rem;
  }
  .inspect-name{font-size:1.45rem}
  .inspect-note,.inspect-note-en{display:none}
  .inspect-close{top:auto;bottom:auto;top:calc(4.6rem);right:1rem;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .hotspot .hs-dot,.spec-btn .sb-dot{animation:none}
  .inspect-veil,.inspect-card,.inspect-close{transition-duration:.001ms}
}

/* 没有 3D 能力时：入口与热点都不必出现 */
.no-scene .spec-btn,
.no-scene .hotspots{display:none}

/* 查看时锁住拖拽手势，避免和页面滚动抢 */
body.is-inspecting{touch-action:none}

/* ---------- 药圃提示条（只在本草段出现） ---------- */
.herb-hint{
  position:fixed;left:50%;bottom:clamp(3.2rem,7vh,5rem);
  transform:translateX(-50%);
  z-index:23;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem 1.05rem;
  border-radius:100px;
  font-size:.8rem;letter-spacing:.06em;line-height:1.2;
  color:#f4ecd6;
  background:rgba(9,16,12,.66);
  border:1px solid rgba(230,200,144,.34);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.9);
  pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.herb-hint.is-hidden{opacity:0;transform:translate(-50%,8px)}
.herb-hint .hh-ico{color:var(--c-gold);font-size:.9rem}
.herb-hint em{
  font-family:var(--font-latin);font-style:italic;
  color:rgba(232,236,214,.55);
  font-size:.94em;
}
@media (max-width:740px){
  .herb-hint{font-size:.72rem;padding:.45rem .85rem;bottom:2.6rem}
  .herb-hint em{display:none}
}