.gmarker {
  position: relative;
  width: 60px;
  height: 60px;
  pointer-events: none;
}

.gmarker-cone-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  transform-origin: 30px 30px; /* stesso centro del dot */
  transition: transform 0.4s ease;
  pointer-events: none;
}

.gmarker-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 3px solid #fff;   /* il bordo bianco resta sempre così, anche animato */
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  z-index: 2; /* sopra al cono */
}

/* Quando il device è in movimento, il colore del dot pulsa
   passando dal colore assegnato al device fino al bianco. */
.gmarker-dot.moving {
  animation: gmarkerPulseColor 1.2s ease-in-out infinite;
}

@keyframes gmarkerPulseColor {
  0%, 100% { background-color: var(--gmarker-color); }
  50%      { background-color: #ffffff; }
}