/* ===========================================================
   GLOBE — photos on the map (gallery landing hero).
   A dotted Three.js globe in the site's ink; photo pins are DOM
   buttons projected onto it every frame, Apple-Photos style:
   country pins first, click India → its states fan out, click a
   state → that series. globe.js builds everything inside #gm.
   =========================================================== */

.gm-hero{
  position:relative;
  height:min(82svh, 880px);
  width:min(100%, 1200px);              /* body is a flex column — explicit
                                           width, or auto margins collapse it */
  align-self:center;
  margin:clamp(6px,2vh,20px) auto clamp(10px,3vh,30px);
  padding:0 var(--container-pad,36px);
}
.gm-hero[data-off]{ display:none; }

/* the globe is the navigation now — once it's live, the series-card grid
   below is redundant. It stays visible as the fallback whenever the globe
   can't render (no WebGL / no JS), so browsing never dead-ends. */
body.gm-live .gx-grid{ display:none; }

.gm-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  cursor:grab; touch-action:none;
}
.gm-canvas.is-drag{ cursor:grabbing; }

.gm-pins{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }

/* ---- photo pin ---- */
.gm-pin{
  position:absolute; left:0; top:0;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:0; border:0; background:transparent; cursor:pointer;
  pointer-events:auto; -webkit-tap-highlight-color:transparent;
  will-change:transform;
}
.gm-pin__card{
  position:relative; width:52px; height:52px;
  background:var(--gx-frame,#e9e6df) center/cover no-repeat;
  border:2px solid var(--text); box-shadow:0 10px 24px -10px rgba(20,18,14,.55);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.gm-pin__card::after{               /* stem */
  content:""; position:absolute; left:50%; top:100%;
  width:2px; height:9px; background:var(--text); transform:translateX(-50%);
}
.gm-pin__count{
  position:absolute; top:-8px; right:-10px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
  background:var(--accent); color:var(--text);
  border:2px solid var(--text); padding:1px 5px; line-height:1.3;
}
.gm-pin__name{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text); white-space:nowrap;
  background:var(--gx-canvas,#f4f3ef); padding:2px 6px;
}
.gm-pin:hover .gm-pin__card,
.gm-pin:focus-visible .gm-pin__card{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 16px 30px -12px rgba(20,18,14,.6);
}
.gm-pin:focus{ outline:none; }
.gm-pin:focus-visible .gm-pin__name{ outline:1px solid var(--text); }
.gm-pin--state .gm-pin__card{ width:46px; height:46px; }

/* ---- chrome ---- */
.gm-label{
  position:absolute; left:2px; top:2px; z-index:2; pointer-events:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text);
}
.gm-label em{ font-style:normal; color:var(--gx-cap,#8c887e); margin-left:10px; }
.gm-back{
  position:absolute; left:0; top:26px; z-index:2;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; background:var(--text); color:var(--gx-canvas,#f4f3ef);
  border:2px solid var(--text); padding:6px 11px; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease, background .15s, color .15s;
}
.gm-back:hover{ background:var(--accent); color:var(--text); }
.gm-hero.is-country .gm-back{ opacity:1; pointer-events:auto; transform:none; }
.gm-hint{
  position:absolute; right:2px; bottom:6px; z-index:2; pointer-events:none;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gx-cap,#8c887e);
}

/* the travelling photograph (globe → series hand-off) */
.gm-travel{
  position:fixed; z-index:600;
  background:#0b0a08 center/cover no-repeat;
  box-shadow:0 40px 120px -30px rgba(20,18,14,.6);
  will-change:left,top,width,height;
}

@media (max-width:720px){
  .gm-hero{ height:62svh; }
  .gm-pin__card{ width:46px; height:46px; }
  .gm-pin--state .gm-pin__card{ width:42px; height:42px; }
  .gm-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .gm-pin__card{ transition:none; }
}