.location-marker {
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.marker-pin {
	width: 100%;
	height: 100%;
	position: relative;
	animation: mybounce 2s infinite ease-in-out;
}

.marker-pin::before {
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, #B3854F 0%, #A27036 100%);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	left: 6px;
	top: 2px;
	box-shadow: 
		0 2px 4px rgba(0, 0, 0, 0.2),
		inset 0 1px 2px rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.marker-pin::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	background: radial-gradient(circle, #ffffff 0%, #f8f9fa 100%);
	border-radius: 50%;
	top: 10px;
	left: 14px;
	box-shadow: 
		inset 0 1px 2px rgba(0, 0, 0, 0.1),
		0 1px 2px rgba(255, 255, 255, 0.5);
	z-index: 1;
}

/* 添加脉冲效果 */
.marker-pin::before {
	animation: pulse 2s infinite ease-in-out;
}

/* 定义图标跳动动画，包含上下移动和缩放效果 */
@keyframes mybounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0) scale(1);
	}
	40% {
		transform: translateY(-12px) scale(1.05);
	}
	60% {
		transform: translateY(-6px) scale(1.02);
	}
}

/* 定义脉冲动画，实现图标外圈的扩散效果 */
@keyframes pulse {
	0% {
		box-shadow: 
			0 2px 4px rgba(0, 0, 0, 0.2),
			inset 0 1px 2px rgba(255, 255, 255, 0.3),
			0 0 0 0 rgba(179, 133, 79, 0.7);
	}
	70% {
		box-shadow: 
			0 2px 4px rgba(0, 0, 0, 0.2),
			inset 0 1px 2px rgba(255, 255, 255, 0.3),
			0 0 0 12px rgba(179, 133, 79, 0);
	}
	100% {
		box-shadow: 
			0 2px 4px rgba(0, 0, 0, 0.2),
			inset 0 1px 2px rgba(255, 255, 255, 0.3),
			0 0 0 0 rgba(179, 133, 79, 0);
	}
}

/* 定义悬停动画，使图标放大并改变颜色 */
.location-marker:hover .marker-pin {
	animation: bounce-hover 1s infinite ease-in-out;
}

@keyframes bounce-hover {
	0%, 100% {
		transform: translateY(0) scale(1.1);
	}
	50% {
		transform: translateY(-8px) scale(1.15);
	}
}

/* 定义图标阴影动画，随图标移动而变化 */
.location-marker::after {
	content: '';
	position: absolute;
	width: 24px;
	height: 6px;
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
	border-radius: 50%;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	animation: shadow 2s infinite ease-in-out;
}

@keyframes shadow {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(-50%) scale(1);
		opacity: 0.3;
	}
	40% {
		transform: translateX(-50%) scale(0.8);
		opacity: 0.2;
	}
	60% {
		transform: translateX(-50%) scale(0.9);
		opacity: 0.25;
	}
}

.location-marker:hover::after {
	animation: shadow-hover 1s infinite ease-in-out;
}

@keyframes shadow-hover {
	0%, 100% {
		transform: translateX(-50%) scale(1.1);
		opacity: 0.4;
	}
	50% {
		transform: translateX(-50%) scale(0.9);
		opacity: 0.3;
	}
}

/* 响应式设计 */
@media (max-width: 760px) {
	.map-container {
		width: 320px;
		height: 240px;
	}
	
	.location-marker {
		width: 32px;
		height: 32px;
	}
	
	.marker-pin::before {
		width: 22px;
		height: 22px;
		left: 5px;
		top: 2px;
	}
	
	.marker-pin::after {
		width: 10px;
		height: 10px;
		top: 8px;
		left: 11px;
	}
}
