/* 全局重置 + 地图容器 */
.global-map-component {
    width: 100%;
    max-width: 1980px;   /* 设计基准宽度 */
    margin: 0 auto;
    position: relative;
}

/* 地图包装器 - 固定宽高比 2:1 (与 1980px 设计一致) */
.map-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 50%;   /* 固定比例，不随屏幕改变 */
    overflow: hidden;
    background: #f8f8f8;
}

/* 地图背景层 */
.map-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.map-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.9;
    pointer-events: none;
}

/* SVG 曲线层 - 完全填充容器 */
.map-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 连接线 - 线宽跟随缩放 */
.connection-line {
    fill: none;
    stroke: #d41d22;
    stroke-width: calc(2px * var(--scale, 1));
    stroke-linecap: round;
    opacity: 0.4;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.connection-line.animate {
    stroke-dashoffset: 0;
}

/* 目标点 - 大小跟随缩放 (基准 16px) */
.target-point {
    position: absolute;
    width: calc(16px * var(--scale, 1));
    height: calc(16px * var(--scale, 1));
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
}
.point-core {
    width: 100%;
    height: 100%;
    background: #d41d22;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.target-point:hover .point-core {
    transform: scale(1.5);
    box-shadow: 0 0 calc(25px * var(--scale, 1)) rgba(212, 29, 34, 0.6);
}

/* 呼吸圈 - 缩放幅度跟随 */
.point-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(16px * var(--scale, 1));
    height: calc(16px * var(--scale, 1));
    border: calc(2px * var(--scale, 1)) solid #d41d22;
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
.point-pulse.animate {
    animation: breathe 2.5s ease-out infinite;
}
@keyframes breathe {
    0% {
        width: calc(16px * var(--scale, 1));
        height: calc(16px * var(--scale, 1));
        opacity: 0.8;
    }
    100% {
        width: calc(100px * var(--scale, 1));
        height: calc(100px * var(--scale, 1));
        opacity: 0;
    }
}

/* 文字标签 - 字体跟随缩放 (基准 16px) */
.location-label {
    position: absolute;
    font-size: calc(16px * var(--scale, 1));
    color: #d41d22;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-shadow: 0 1px 3px rgba(255,255,255,1), 0 1px 3px rgba(255,255,255,1);
    cursor: pointer;
    z-index: 6;
    pointer-events: none;
}
.location-label.visible {
    opacity: 1;
}

/* Logo - 宽度跟随缩放 (基准 200px) */
.logo-position {
    position: absolute;
    left: 39.8%;
    top: 44.5%;
    transform: translate(-50%, -50%);
    width: calc(200px * var(--scale, 1));
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.logo-position:hover {
    transform: translate(-50%, -50%) scale(1.05);
}
.logo-position img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}