/* map.css - 南行图专用样式表 */


/* 1. 字体与背景 */

/* --- 字体定义 (新版 WOFF) --- */

@font-face {

    font-family: 'MyWebFont';

    /* ⚠️如果你文件名不一样，请修改这里 */

    src: url('https://nanyang-image.oss-cn-chengdu.aliyuncs.com/static/fonts/MyCustomFont.woff2') format('woff2'); font-display: block; 

    font-display: block; /* 优化加载体验 */

}


body { 

    margin: 0;

    font-family: 'MyWebFont', sans-serif;

    background-image: url('../images/2.webp'); 

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    min-height: 100vh;

    /* --- 修改这里 --- */

    overflow-y: scroll; /* 强制显示垂直滚动轴 */

    overflow-x: hidden; /* 隐藏水平滚动轴，防止页面左右晃动 */

}


/* 2. 导航栏样式 */

.main-nav { 

    background-color: rgba(255, 255, 255, 0.9); 

    padding: 10px 0; 

    text-align: center; 

    border-bottom: 1px solid #ddd; 

    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 

    position: sticky; 

    top: 0; 

    z-index: 1000; 

}

.main-nav ul { margin: 0; padding: 0; list-style: none; display: inline-block; }

.main-nav li { display: inline-block; margin: 0 15px; }

.main-nav a { 

    color: #444; 

    text-decoration: none; 

    font-size: 16px; 

    padding: 10px 0; 

    transition: color 0.3s ease; 

    position: relative; 

    cursor: pointer; 

}

.main-nav a:hover { color: #000; }

.main-nav a.active { color: #000; }

.main-nav a.active::after { 

    content: ''; 

    position: absolute; 

    bottom: 0; 

    left: 0; 

    width: 100%; 

    height: 3px; 

    background-color: #CD5C5C; 

}


/* 3. 地图容器 */

/* 3. 地图容器 */

.map-section {
    width: 100%;
    max-width: 650px; /* 地图框大小 */
    
    /* 既保留了防遮挡的 60px 底部距离，又恢复了你本地的设置 */
    margin: 10px auto 60px auto; 
    
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.4); 
    border-radius: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
    /* 👇 这三行就是救命的“本地原版”排版代码，它能让地图和元素严丝合缝 👇 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 👆 -------------------------------------------------------- 👆 */
    
    overflow: visible; 
}

.map-title {

    text-align: center;

    font-size: 48px;

    color: #4a4a4a;

    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);

    margin-bottom: 10px; 

    margin-top: 0;

    font-weight: bold; 

}


/* 4. SVG 动画容器 */

.svg-container {

    width: 100%;

    height: auto;

    position: relative;

    margin-top: -10px; /* 这里的负数让地图往上提 */

    

    /* 渐变遮罩动画 */

    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 60%);

    mask-image: linear-gradient(to right, black 50%, transparent 60%);

    -webkit-mask-size: 300% 100%;

    mask-size: 300% 100%;

    -webkit-mask-position: 100% 0;

    mask-position: 100% 0;

    animation: gradientWipe 3.5s ease-out forwards;

}


@keyframes gradientWipe {

    0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }

    100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }

}


/* 5. 强制覆盖 SVG 样式 (透明底红线) */

.svg-container svg {

    display: block;

    width: 100%;

    height: auto;

    overflow: visible;

    filter: drop-shadow(1px 2px 3px rgba(205, 92, 92, 0.2));

}


.svg-container svg path,

.svg-container svg polygon,

.svg-container svg polyline,

.svg-container svg rect {

    fill: rgba(255, 255, 255, 0.0) !important;

    stroke: #CD5C5C !important;   

    stroke-width: 1.5px !important; 

    stroke-linecap: round;

    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

    transition: all 0.3s ease;

}


.svg-container svg path:hover {

    fill: rgba(205, 92, 92, 0.1) !important;

    stroke-width: 2px !important;

    cursor: pointer;

}


/* 6. 头像标记点样式 (已缩小) */

.map-marker {

    position: absolute;

    width: 34px;   /* 已缩小 */

    height: 34px;  /* 已缩小 */

    border-radius: 50%;

    border: 2px solid #fff;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

    cursor: pointer;

    transition: all 0.3s ease;

    z-index: 10;

    background: #fff;

    opacity: 0;

    transform: translate(-50%, -50%) scale(0);

    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}


@keyframes popIn {

    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }

}


.map-marker img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}


.map-marker:hover {

    transform: translate(-50%, -50%) scale(1.4);

    border-color: #CD5C5C;

    z-index: 20;

}


.marker-label {

    position: absolute;

    bottom: -24px; /* 标签位置微调 */

    left: 50%;

    transform: translateX(-50%);

    background: #CD5C5C;

    color: #fff;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 12px;

    white-space: nowrap;

    opacity: 0;

    transition: opacity 0.3s;

    pointer-events: none;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.map-marker:hover .marker-label { opacity: 1; }


/* 8. 手机适配 */

@media screen and (max-width: 768px) {

    body { overflow: auto; } 

    .map-marker { 

        width: 20px;  /* 原为 32px，手机端进一步缩小 */

        height: 20px; /* 原为 32px，手机端进一步缩小 */

    }

    .map-title { font-size: 32px; margin-bottom: 20px; }

    .main-nav { overflow-x: auto; white-space: nowrap; }

    .main-nav ul { padding: 0 10px; display: inline-block; min-width: 100%; }

}


/* =========================================

   五位作家的具体坐标位置 (你刚才调好的)

   ========================================= */


/* 1. 莹姿 (永春) */

#marker-yingzi { 

    top: 57.1%;    

    left: 74.6%;   

    animation-delay: 2.5s; 

}


/* 2. 王映霞 (福州) */

#marker-wang1 { 

    top: 52.8%; 

    left: 76.9%; 

    animation-delay: 2.7s; 

}


/* 3. 冯伊湄 (广州) */

#marker-feng { 

    top: 57.1%; 

    left: 66.1%; 

    animation-delay: 2.9s; 

}


/* 4. 王莹 (香港) */

#marker-wang2 { 

    top: 63.6%; 

    left: 65.1%; 

    animation-delay: 3.1s; 

}


/* 5. 沈兹九 (香港) */

#marker-shen { 

    top: 61.4%; 

    left: 70.1%; 

    animation-delay: 3.3s; 

}

/* map.css 的最底部添加 */


/* 右下角提示文字样式 */

.page-hint { 

    position: fixed; 

    bottom: 20px; 

    right: 30px; 

    background-color: rgba(255, 255, 255, 0.7); 

    color: #555; 

    padding: 5px 15px; 

    border-radius: 15px; 

    font-size: 14px; 

    z-index: 999; 

    /* 加一点点阴影，防止地图背景太花看不清字 */

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    pointer-events: none; /* 让鼠标可以透过文字点击下面的东西，避免遮挡 */

}

.page-hint p { margin: 0; }

/* =========================================

   新增：第四页背景图设置 (复用 Style 2)

   ========================================= */


/* 1. 电脑端默认背景 */

.page-style-2 {

    background-image: url('../images/2.webp');

    background-size: cover;

    background-position: center;

    background-attachment: fixed; 

}


/* 2. 手机端背景切换 */

@media screen and (max-width: 768px) {

    

    /* 使用 body.page-style-2 提高权重，确保生效 */

    body.page-style-2 {

        /* 切换为手机竖屏背景 */

        background-image: url('../images/2-mobile.webp') !important;

        

        /* 核心三件套：居中、锁定、铺满 */

        background-position: center top !important; 

        background-attachment: fixed !important; 

        background-size: cover !important;

        

        /* 确保高度至少占满一屏 */

        min-height: 100vh;

    }

}

/* 自定义滚动条整体样式 */

::-webkit-scrollbar {

    width: 10px;          /* 滚动条宽度 */

    display: block;       /* 确保显示 */

}


/* 滚动条轨道（底色） */

::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.05); /* 极浅的灰色底色 */

}


/* 滚动条滑块（滑动的那个部分） */

::-webkit-scrollbar-thumb {

    background: #bbb;      /* 中灰色 */

    border-radius: 5px;    /* 圆角 */

    border: 2px solid transparent; /* 利用透明边框创造一点边距感 */

    background-clip: padding-box;

}


/* 鼠标悬停在滑块上时颜色加深 */

::-webkit-scrollbar-thumb:hover {

    background: #999; 

}