@charset "UTF-8";

/* 애니메이션 마커 스타일 */
.marker {
  background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/coffee-cup-marker.svg');
  background-size: contain;
  background-position-x: 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  cursor: pointer;
  transition-property: width, height;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  /* Define Marker Animation */
  animation:
    pop-in 0.3s ease-out forwards,
    wobble 1.5s ease-in-out 0.3s forwards;
  transform-origin: bottom center;
}

/* 애니메이션 마커 하단에 삼각형 스타일 */
.marker::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #365874;
  display: block;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

/* Keyframe을 이용한 애니메이션 효과(pop-in) 스타일 */
@keyframes pop-in {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
    box-shadow: none;
  }

  70% {
    width: 55px;
    height: 55px;
    opacity: 1;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
    /* Add a subtle shadow */
  }

  85% {
    width: 48px;
    height: 48px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    /* Shrink shadow with wobble */
  }

  100% {
    width: 50px;
    height: 50px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    /* Final shadow size */
  }
}

/* Keyframe을 이용한 애니메이션 효과(wobble) 스타일 */
@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(2.5deg);
  }

  50% {
    transform: rotate(-2deg);
  }

  65% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}