/* Virtual Museum v6 (diorama scene, assets/vm/js/main.js) — replaces home-virtual.css on the home page.
   Every rule is scoped to .route.vm, so nothing leaks into the rest of the site; the site's :root variables and
   LINE Seed @font-face (home.css) are reused. The old home-virtual.css hid #info on the home page; v6 shows the card.
   .vm-tip / .vm-tree-link (Sri Trang tree tooltip + keyboard link) are also used on exhibitions.html, so they carry fallbacks. */
.route.vm{
  --seed:"LINE Seed Sans TH","Noto Sans Thai",system-ui,sans-serif;--top:96px;
  position:relative;display:block;height:100vh;height:100svh;min-height:640px;padding:0;overflow:clip;font-family:var(--seed);
  background:radial-gradient(120% 90% at 55% 45%,#f6f6f3 0%,#ececea 55%,#e2e3e0 100%);
}
.route.vm .vm-arch{position:absolute;inset:0}
.route.vm .vm-arch canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.route.vm .vm-arch canvas:active{cursor:grabbing}
.route.vm .vm-title{position:absolute;z-index:1;left:calc(var(--g) + 110px);bottom:24px;margin:0;color:var(--brand);font:400 clamp(56px,8vw,120px)/.85 var(--disp);pointer-events:none}
.route.vm .vm-hl{position:absolute;z-index:2;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;margin:0;color:var(--mute);font-size:14px;transition:opacity .5s}
.route.vm.gl-ready .vm-hl{opacity:0;pointer-events:none}
.route.vm .vm-track{width:140px;height:2px;background:#0001}
.route.vm .vm-track i{display:block;height:100%;width:0;background:var(--brand);transition:width .25s}
.route.vm .vm-hint,.route.vm .vm-glass,.route.vm #info{border:1px solid #ffffffd9;background:#ffffff9e;box-shadow:inset 0 1px 0 #fff,0 10px 30px #00000014;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.route.vm .vm-hint{position:absolute;z-index:3;top:var(--top);left:calc(var(--g) + 110px);margin:0;padding:8px 12px;border-radius:999px;font-size:14px}
.route.vm .vm-glass{position:absolute;z-index:3;top:var(--top);right:var(--g);width:min(300px,calc(100% - 48px));max-height:calc(100% - 140px);overflow:visible;padding:14px;border-radius:var(--r)}
.route.vm .vm-glass h3{margin:0 0 4px;font:700 16px/1.3 var(--seed)}
.route.vm .vm-glass p{margin:0 0 10px;color:var(--mute);font-size:13px}
.route.vm .vm-glass a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;border-radius:var(--r);color:var(--ink)}
.route.vm .vm-glass a:hover,.route.vm .vm-glass a.on{background:#ffffffc0}
.route.vm .vm-glass a:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.route.vm .vm-glass i{width:10px;height:10px;border-radius:50%;flex:none}
.route.vm .dot-f1{background:#c45a4a}.route.vm .dot-f2{background:#e07a2f}.route.vm .dot-f3{background:#3d8f4a}.route.vm .dot-tower{background:#7a8088}.route.vm .dot-garden{background:#4f9a3a}.route.vm .dot-road{background:#e0a020}
/* info card (garden / road / neighbours) — the home page aside#info has no class, so it is styled by id; shown on home now */
.route.vm #info{display:block}
.route.vm #info[hidden]{display:none}
.route.vm #info{position:absolute;z-index:3;right:var(--g);bottom:28px;width:300px;padding:18px 20px;border-radius:14px;font-size:13px;transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.route.vm #info.open{transform:none;opacity:1;pointer-events:auto}
.route.vm #info .dot{display:block;width:12px;height:12px;border-radius:50%;margin-bottom:10px}
.route.vm #info h3{margin:0;font:700 20px/1.25 var(--seed)}
.route.vm #info .en{color:var(--mute);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:2px 0 12px}
.route.vm #info .body p{margin:0 0 10px;line-height:1.6}
.route.vm #info .close{all:unset;position:absolute;right:14px;top:12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--mute)}
.route.vm .sample{display:inline-block;border:1px dashed var(--brand-dark);color:var(--brand-dark);padding:5px 8px;border-radius:6px;font-size:12px}
/* phones + tablets (<=900px): the site's fixed chrome takes the top-left tab (16-56px x 16-118px), the top-right buttons
   and the bottom-left "Scroll" hint, so: title sits right of the tab (high enough for the split-title reveal at 'top 85%'),
   the zone list becomes one swipeable row of chips at the bottom, the info card sits above the chips. Desktop is unchanged. */
@media (max-width:900px){
  .route.vm .vm-title{left:calc(var(--g) + 56px);top:76px;bottom:auto;font-size:clamp(34px,10vw,48px)}
  .route.vm .vm-hint{left:var(--g);right:auto;top:auto;bottom:100px;max-width:calc(100% - 2 * var(--g));padding:6px 11px;font-size:12px;line-height:1.35}
  .route.vm .vm-glass{top:auto;bottom:44px;left:0;right:0;width:auto;max-height:none;padding:4px var(--g);border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 var(--g);scrollbar-width:none;touch-action:pan-x;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - var(--g)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - var(--g)),transparent 100%)}
  .route.vm .vm-glass::-webkit-scrollbar{display:none}
  .route.vm .vm-glass h3,.route.vm .vm-glass p{display:none}
  .route.vm .vm-glass a{flex:none;scroll-snap-align:start;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;font-size:14px;white-space:nowrap;
    border:1px solid #ffffffd9;background:#ffffffc7;box-shadow:inset 0 1px 0 #fff,0 6px 18px #00000014;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .route.vm .vm-glass a:hover,.route.vm .vm-glass a.on{background:#fff;color:var(--brand-dark)}
  .route.vm #info{left:12px;right:12px;bottom:100px;width:auto;max-height:44%;overflow:auto;z-index:4}
  .route.vm .vm-tree-link{left:var(--g);top:auto;bottom:150px}
}
/* จอแนวตั้ง: main.js ยกโมเดลขึ้นชิดหัวข้อ (ขอบล่างโมเดล ~70% ของความสูง) จึงยกคำแนะนำ+ชิปโซนตามขึ้นมาใต้โมเดล
   ใช้ % ให้ไปตามสัดส่วนเดียวกับกล้อง และพ้นแถบเมนูล่างของมือถือ */
@media (max-width:900px) and (orientation:portrait){
  .route.vm .vm-hint{bottom:24%}
  .route.vm .vm-glass{bottom:17%}
  .route.vm #info{bottom:calc(17% + 56px)}
  .route.vm .vm-tree-link{bottom:calc(24% + 44px)}
}
/* ชิปโซนมือถือ: เงา+เบลอถูกตัดที่ขอบแถวเลื่อนจนเห็นเป็นแถบไม่ต่อกับพื้น จึงใช้พื้นขาวเรียบ
   เฟดขอบขวากว้างขึ้นให้เห็นว่ามีชิปต่อ + จุดบอกตำแหน่ง (สร้างโดย mobile-nav.js) */
@media (max-width:900px){
  .route.vm .vm-glass{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - 48px),transparent 100%)}
  .route.vm .vm-glass a{border:0;background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .route.vm .vm-glass + .scroll-dots{position:absolute;z-index:3;left:0;right:0;bottom:28px;margin:0}
}
@media (max-width:900px) and (orientation:portrait){
  .route.vm .vm-glass + .scroll-dots{bottom:calc(17% - 16px)}
}
@media (prefers-reduced-motion:reduce){.route.vm #info,.route.vm .vm-hl{transition:none}}

/* Sri Trang tree: hover tooltip that follows the pointer + keyboard link that only shows when focused */
.vm-tip{position:absolute;z-index:4;left:0;top:0;margin:0;padding:6px 11px;border-radius:999px;font:700 13px/1.2 "LINE Seed Sans TH","Noto Sans Thai",system-ui,sans-serif;color:var(--brand-dark,#7d4485);white-space:nowrap;pointer-events:none;
  border:1px solid #ffffffd9;background:#ffffffd1;box-shadow:inset 0 1px 0 #fff,0 8px 22px #0000001f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translate(14px,6px) scale(.96);transition:opacity .18s,transform .18s}
.vm-tip.on{opacity:1;transform:translate(14px,-2px) scale(1)}
.vm-tree-link{position:absolute;z-index:4;left:calc(var(--g,24px) + 110px);top:calc(var(--top,96px) + 48px);padding:8px 14px;border-radius:999px;font:700 14px/1.2 "LINE Seed Sans TH","Noto Sans Thai",system-ui,sans-serif;color:var(--brand-dark,#7d4485);text-decoration:none;
  background:#fff;box-shadow:0 8px 22px #0000001f;outline:2px solid var(--brand,#9e5da5);outline-offset:2px;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.vm-tree-link:focus-visible,.vm-tree-link:focus{clip-path:none;width:auto;height:auto}
@media (prefers-reduced-motion:reduce){.vm-tip{transition:none}}