/* ============================================================================
   DOWNTOWN TBILISI — masterplan picker
   ---------------------------------------------------------------------------
   GEOMETRY CONTRACT (do not break):
     .mp-frame is locked to the master image's own ratio (4096x2304 = 16/9),
     sized so it always covers the viewport, and the stage pans in whichever
     axis overflows. Because the frame ratio equals the image ratio, the img
     (object-fit:cover) and the overlay <svg> (viewBox="0 0 4096 2304",
     preserveAspectRatio="xMidYMid slice") resolve to the SAME transform, so
     a trace drawn at x/y in Figma lands there at every viewport size.

   The hotspots carry NO resting state: they are transparent until pointed at.
   ============================================================================ */
body.mp{background:var(--ink);color:var(--stone-2);overflow:hidden;
  --fg:var(--stone-2);--muted:#9A968E;--hair:rgba(240,235,231,.17)}

/* ---------- stage: the image owns the whole viewport ---------- */
.mp-stage{position:fixed;inset:0;display:flex;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;background:var(--ink)}
.mp-stage::-webkit-scrollbar{display:none}
.mp-frame{flex:0 0 auto;margin:auto;position:relative;overflow:hidden;background:var(--sunk);
  aspect-ratio:16/9;height:100%;width:auto}
@media(min-aspect-ratio:16/9){.mp-frame{width:100%;height:auto}}
.mp-img{width:100%;height:100%;object-fit:cover;display:block;
  transition:filter .85s var(--ease-out)}
.mp-frame.is-active .mp-img{filter:brightness(.6) saturate(.82) contrast(1.02)}
.mp-svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- hotspots: invisible until pointed at ---------- */
.hs{cursor:pointer;outline:none}
.hs .hs-fill{opacity:0;transition:opacity .5s var(--ease-out)}
.hs .hs-line{fill:none;stroke:#FFE9A8;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
  opacity:0;transition:opacity .45s var(--ease-out)}
.hs .hs-hit{fill:transparent;stroke:transparent;stroke-width:26}
.hs.on .hs-fill{opacity:1}
.hs.on .hs-line{opacity:.92}
.hs:focus-visible .hs-line{opacity:1;stroke-dasharray:14 10}

/* ---------- top bar: back + logo, nothing else ---------- */
.mp-bar{position:fixed;inset:0 0 auto;z-index:30;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(14px,2.2vw,24px) clamp(14px,4vw,44px);
  background:linear-gradient(180deg,rgba(20,21,15,.82),rgba(20,21,15,0))}
.mp-back{justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:1px solid rgba(240,235,231,.26);border-radius:50%;
  color:var(--stone-2);
  transition:border-color .45s ease,background-color .45s ease,transform .55s var(--ease-out)}
.mp-back svg{width:17px;height:9px;stroke:currentColor;stroke-width:1;fill:none}
.mp-back:hover,.mp-back:focus-visible{border-color:var(--accent-2);
  background:rgba(240,235,231,.06);transform:translateX(-3px)}
.mp-bar .lockup{--lk:14px;justify-self:center;color:var(--stone-2)}
@media(max-width:600px){.mp-back{width:40px;height:40px}}

/* ---------- index rail (unchanged behaviour, still on the right) ---------- */
.mp-index{position:fixed;z-index:30;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);
  display:grid;gap:1px;isolation:isolate}
.mp-index::before{content:"";position:absolute;pointer-events:none;z-index:-1;
  inset:-34px -46px -34px -48px;
  background:radial-gradient(126% 84% at 100% 50%,rgba(20,21,15,.92) 0%,rgba(20,21,15,.68) 44%,rgba(20,21,15,0) 100%)}
.mp-i{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;
  background:none;border:0;padding:11px 0;cursor:pointer;text-align:left;color:var(--stone-2);
  opacity:.62;transition:opacity .45s var(--ease-out),transform .5s var(--ease-out);
  text-shadow:0 1px 10px rgba(20,21,15,.6)}
.mp-i .i{font-size:10px;letter-spacing:.18em;font-variant-numeric:tabular-nums;opacity:.7}
.mp-i .n{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.mp-i .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;
  transition:opacity .4s,transform .4s var(--ease-out),background-color .4s}
.mp-i[data-pending] .dot{background:none;border:1px dashed currentColor;opacity:.4}
.mp-i:hover,.mp-i:focus-visible{opacity:1;transform:translateX(-6px);outline:none}
.mp-i.on{opacity:1;transform:translateX(-6px)}
.mp-i.on .dot{opacity:1;transform:scale(1.5);background:var(--accent-2)}
.mp-i.on .n{color:var(--accent-2)}
@media(max-width:600px){
  .mp-index{right:clamp(10px,3vw,20px);gap:0}
  .mp-i{gap:10px;padding:9px 0}
  .mp-i .n{font-size:10px;letter-spacing:.1em}
  .mp-i .i{font-size:9px}
}

/* ---------- popup: rides the cursor, never intercepts it ---------- */
.mp-pop{position:fixed;left:0;top:0;z-index:28;width:min(310px,72vw);pointer-events:none;
  opacity:0;transition:opacity .3s ease;will-change:transform}
.mp-pop.show{opacity:1}
.mp-card{position:absolute;left:0;top:0;width:100%;
  padding:17px 20px 18px;background:rgba(18,19,14,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid rgba(240,235,231,.16);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .25s ease,transform .32s var(--ease-out)}
.mp-card.on{opacity:1;transform:none}
.mp-card .k{display:flex;align-items:baseline;gap:11px;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-2)}
.mp-card .k b{font-family:var(--display);font-variation-settings:var(--wide);font-weight:300;
  font-size:19px;letter-spacing:0}
.mp-card h2{margin-top:9px;font-family:var(--display);font-variation-settings:var(--wide);
  font-weight:400;text-transform:uppercase;font-size:18px;line-height:1.08;
  letter-spacing:-.01em;color:var(--stone-2)}
.mp-card .m{margin-top:9px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9A968E}
.mp-card p:not(.k):not(.m):not(.go){margin-top:11px;font-size:12px;line-height:1.65;color:#B5ADA3}
.mp-card .go{margin-top:13px;padding-top:12px;border-top:1px solid rgba(240,235,231,.14);
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2);
  display:flex;align-items:center;gap:9px}
.mp-card .go i{flex:1;height:1px;background:currentColor;opacity:.4;max-width:44px}

/* keyboard activation parks the popup bottom-left instead of following.
   JS clears the inline transform when it parks, so no !important is needed —
   which matters, because the touch rule below has to be able to win. */
.mp-pop.at-rest{transform:none;left:clamp(16px,4vw,44px);top:auto;
  bottom:clamp(16px,4vh,44px);width:min(340px,74vw)}
.mp-pop.at-rest .mp-card{top:auto;bottom:0}

/* ---------- touch: no cursor to follow, so it parks at the bottom ---------- */
body.mp.is-touch .mp-pop{left:50%;top:auto;bottom:clamp(14px,4vw,26px);
  transform:translateX(-50%);width:min(420px,calc(100vw - 84px))}
body.mp.is-touch .mp-card{top:auto;bottom:0;padding:15px 18px 16px}
body.mp.is-touch .mp-card p:not(.k):not(.m):not(.go){margin-top:9px;font-size:11.5px;line-height:1.6}
body.mp.is-touch .mp-card .go{margin-top:11px;padding-top:10px}

@media(prefers-reduced-motion:reduce){
  .mp-img,.hs .hs-fill,.hs .hs-line,.mp-card,.mp-pop,.mp-i{transition-duration:.01ms!important}
}