.home-map{
  overflow:hidden;
  touch-action:none;
  user-select:none;
  cursor:grab;
  isolation:isolate;
}

.home-map.map-dragging{
  cursor:grabbing;
}

.home-map.map-pan-ready{
  background-image:none;
  background-color:#eef5fc;
}

.map-pan-layer{
  position:absolute;
  inset:-64px;
  z-index:0;
  background:url('assets/map_wait_silver.png') center/cover no-repeat;
  transform:translate3d(var(--map-pan-x,0),var(--map-pan-y,0),0);
  transition:transform .42s cubic-bezier(.22,.8,.3,1);
  will-change:transform;
}

.home-map.map-dragging .map-pan-layer{
  transition:none;
}

.home-map>.map-weather,
.home-map>.map-status,
.home-map>.map-locate{
  z-index:3;
}

.map-pan-layer .map-route-label{
  z-index:2;
}

.map-current-location{
  position:absolute;
  left:50%;
  top:calc(50% + 45px);
  width:18px;
  height:18px;
  border:4px solid #fff;
  border-radius:50%;
  background:#1677ff;
  box-shadow:0 4px 12px rgba(15,78,155,.38);
  transform:translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
}

.map-current-location:before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background:rgba(22,119,255,.17);
  transform:scale(.4);
  opacity:0;
}

.home-map.map-recentering .map-current-location:before{
  animation:location-pulse 1.25s ease-out;
}

.map-locate{
  border-radius:14px;
  color:#101820;
  font-size:0;
  transition:transform .2s ease,color .2s ease,box-shadow .2s ease;
}

.map-locate:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  border:2px solid #101820;
  border-radius:50%;
  background:radial-gradient(circle,#101820 0 3px,transparent 3.5px);
  transform:translate(-50%,-50%);
  z-index:2;
}

.map-locate:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:30px;
  height:30px;
  background:
    linear-gradient(#101820,#101820) center top/2px 8px no-repeat,
    linear-gradient(#101820,#101820) center bottom/2px 8px no-repeat,
    linear-gradient(90deg,#101820,#101820) left center/8px 2px no-repeat,
    linear-gradient(90deg,#101820,#101820) right center/8px 2px no-repeat;
  transform:translate(-50%,-50%);
}

.map-locate.locating{
  color:#1677ff;
  transform:scale(.92);
  box-shadow:0 6px 20px rgba(22,119,255,.32);
}

@keyframes location-pulse{
  0%{opacity:.9;transform:scale(.35)}
  75%{opacity:.18;transform:scale(1.35)}
  100%{opacity:0;transform:scale(1.55)}
}

@media (prefers-reduced-motion:reduce){
  .map-pan-layer{
    transition:none;
  }

  .home-map.map-recentering .map-current-location:before{
    animation:none;
  }
}