/*!
 * pano-room.css — 360° concept-room stage.
 * Default state = the fallback/pre-init strip (native horizontal scroll over
 * the flat pano with the pins positioned by their authored percentages).
 * .is-webgl hides the strip and shows the canvas + projected-pin overlay.
 */
.pr{position:relative;background:var(--ink,#191817)}
.pr__stage{position:relative;height:min(86svh,860px);overflow:hidden;outline:none;cursor:grab}
.pr__stage:active{cursor:grabbing}
.pr__stage:focus-visible{outline:2px solid var(--gold,#A98B4F);outline-offset:-2px}

/* ---------- strip (no-JS / pre-init / fallback) ---------- */
.pr__strip{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pr__flat{position:relative;height:100%;width:max-content}
.pr__img{height:100%;width:auto;display:block}

/* ---------- webgl ---------- */
.pr canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:pan-y}
.pr__pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pr__pins .spot{pointer-events:auto;left:0;top:0;will-change:transform,opacity}
.pr.is-webgl .pr__strip{display:none}
.pr:not(.is-webgl) canvas,.pr:not(.is-webgl) .pr__pins{display:none}

/* ---------- chrome ---------- */
.pr__badge{
  position:absolute;left:clamp(20px,4vw,48px);top:22px;z-index:8;pointer-events:none;
  font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold,#A98B4F);border:1px solid var(--gold,#A98B4F);
  background:rgba(25,24,23,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:7px 12px;border-radius:2px;
}
.pr__hint{
  position:absolute;right:clamp(20px,4vw,48px);bottom:20px;z-index:8;pointer-events:none;
  margin:0;color:rgba(247,245,241,.75);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.pr:not(.is-webgl) .pr__hint{display:none} /* strip mode: native scroll needs no drag hint */
.pr__tap{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:9;
  background:var(--accent,#4A5A43);color:#fff;border:1px solid var(--accent,#4A5A43);
  font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:12px 22px;border-radius:2px;cursor:pointer;
}

/* subtle top/bottom scrims so badge + pins read on any texture */
.pr__stage::before,.pr__stage::after{
  content:"";position:absolute;left:0;right:0;height:90px;pointer-events:none;z-index:6;
}
.pr__stage::before{top:0;background:linear-gradient(rgba(25,24,23,.42),transparent)}
.pr__stage::after{bottom:0;background:linear-gradient(transparent,rgba(25,24,23,.42))}