.presence{background:var(--surface);}
.presence-map{padding:0;}
.presence-canvas{position:relative;}
.presence-world{
  display:block;width:100%;height:auto;
  color:var(--map-dots);
}
.presence-markers{position:absolute;inset:0;}
.marker{
  position:absolute;
  transform:translate(-50%,-50%);
  width:30px;height:30px;           
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}
.marker:hover{z-index:5;}
.marker-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--mint);
  border:2.5px solid var(--green-deep);
  outline:3px solid var(--surface);
  transition:transform var(--dur) var(--ease);
}
.marker:hover .marker-dot{transform:scale(1.5);}
.marker::after{
  content:'';
  position:absolute;
  width:12px;height:12px;border-radius:50%;
  border:1.5px solid var(--green-deep);
  opacity:0;
}
.marker:hover::after{animation:ping 1.1s var(--ease) infinite;}
@keyframes ping{
  from{transform:scale(1);opacity:0.7;}
  to{transform:scale(3.2);opacity:0;}
}
.marker-label{
  position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(3px);
  white-space:nowrap;
  font-size:0.72rem;font-weight:500;
  color:var(--surface);background:var(--ink);
  padding:4px 8px;border-radius:var(--radius-xs);
  opacity:0;pointer-events:none;z-index:6;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.marker:hover .marker-label{opacity:1;transform:translateX(-50%) translateY(0);}
.js-motion .presence-map .marker{
  opacity:0;
  transform:translate(-50%,-50%) scale(0.4);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease);
  transition-delay:calc(var(--marker-i, 0) * 45ms);
}
.js-motion .presence-map.is-visible .marker{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
@media(prefers-reduced-motion:reduce){
  .js-motion .presence-map .marker{opacity:1;transform:translate(-50%,-50%);transition:none;}
  .marker::after{animation:none!important;}
  .marker:hover .marker-dot{transform:none;}
}