/* ============================================================
  字体声明：HarmonyOS Sans + Montserrat
  HarmonyOS Sans 为站内正文主字体，覆盖 Thin→Black 全字重。
  Montserrat 为数据/数字展示专用字体（数值仪表盘场景），以粗体（Bold）使用。
  font-display: swap 确保文本立即渲染，避免 FOIT。
  ============================================================ */
@font-face {
    font-family: 'HarmonyOS Sans';
    src: url('../fonts/HarmonyOS_Sans_Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'HarmonyOS Sans';
    src: url('../fonts/HarmonyOS_Sans_Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'HarmonyOS Sans';
    src: url('../fonts/HarmonyOS_Sans_Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'HarmonyOS Sans';
    src: url('../fonts/HarmonyOS_Sans_Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'HarmonyOS Sans';
    src: url('../fonts/HarmonyOS_Sans_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'HarmonyOS Sans';
    src: url('../fonts/HarmonyOS_Sans_Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
/* Montserrat 数据/数字展示字体，默认以粗体（Bold）使用 */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.extralight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat.black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   CSS 自定义属性 — 品牌色 + 字体系统
   ============================================================ */
:root {
    --moki-blue: #7bbbbd;
    --moki-accent: #73dfdd;
    --moki-bg-1: #43839e;
    --moki-bg-2: #232f34;

    /* 字体族 */
    --font-harmonyos: 'HarmonyOS Sans', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
    --font-montserrat: 'Montserrat', 'HarmonyOS Sans', Arial, sans-serif;

    /* 字间距 — 中文排版推荐 0.5-1.5px；标题/英文场景可用更大的值 */
    --letter-spacing-tight: 0.5px;
    --letter-spacing-normal: 1px;
    --letter-spacing-wide: 2px;
    --letter-spacing-title: 3px;

    /* 行高 */
    --line-height-dense: 1.4;
    --line-height-normal: 1.6;
    --line-height-loose: 1.85;
    --line-height-heading: 1.25;
}

/* ============================================================
   响应式根字号断点体系（混合方案）
   所有 rem 字号均以此 html font-size 为基准等比例缩放。
   关键大标题可额外使用 clamp() 做流式微调，覆盖此断点体系。

   断点 → 根字号映射表：
   ┌──────────────────┬────────────┬─────────────────────────┐
   │ 视口范围          │ 根字号      │ 说明                     │
   ├──────────────────┼────────────┼─────────────────────────┤
   │ > 1200px         │ 16px       │ 桌面大屏（默认基准）      │
   │ ≤ 1200px         │ 15px       │ 小桌面 / 横屏平板         │
   │ ≤ 1024px         │ 14px       │ 平板横屏                 │
   │ ≤ 768px          │ 13px       │ 平板竖屏 / 大屏手机       │
   │ ≤ 640px          │ 12px       │ 手机横屏 / 中屏手机       │
   │ ≤ 440px          │ 11px       │ 小屏手机                 │
   └──────────────────┴────────────┴─────────────────────────┘

   注意：
   - 此体系覆盖全局所有页面，页面级 CSS 无需重复定义根字号。
   - 页面级自定义断点（如 1200/1024/768/640/440px）应与本体系断点对齐。
   - 后续新增 CSS 字体尺寸统一使用 rem，避免 px。
   ============================================================ */
html {
    font-size: 16px;
}
@media screen and (max-width: 1200px) {
    html { font-size: 15px; }
}
@media screen and (max-width: 1024px) {
    html { font-size: 14px; }
}
@media screen and (max-width: 768px) {
    html { font-size: 13px; }
}
@media screen and (max-width: 640px) {
    html { font-size: 12px; }
}
@media screen and (max-width: 440px) {
    html { font-size: 11px; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================
   全局字体渲染优化
   HarmonyOS Sans 作为主字体族，配备完整回退方案。
   中文正文使用 300 字重（Light），标题使用 700（Bold）。
   所有文本启用抗锯齿渲染与合理的行高/字间距。
   ============================================================ */
body {
    font-family: var(--font-harmonyos);
    font-weight: 300;
    font-size: 1rem;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a {
    text-decoration: none;
    color:unset;
}
ul,ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}
.quantum {
    font-family: var(--font-montserrat);
    font-weight: 700;
}
.bg-1 {
    /*
     * 多层 radial-gradient 叠加，复刻 Illustrator 自由形态不规则渐变。
     * 每个色标在其 (x%, y%) 位置发出椭圆径向渐变光斑，
     * 多光斑重叠融合形成类似网格渐变的自然过渡。
     * 叠加顺序：亮色光斑在上，暗色在下，底色为极深蓝黑。
     */
    background:
        /* ── 点3：底部中央最亮青蓝主光源 ── */
        radial-gradient(ellipse 68% 80% at 30% 99%,
            rgba(0, 112, 145, 0.75) 0%,
            rgba(0, 95, 130, 0.55) 28%,
            rgba(0, 60, 95, 0.15) 55%,
            transparent 75%),

        /* ── 点4：右侧中下部暗蓝 ── */
        radial-gradient(ellipse 23% 70% at 52.78% 55.5%,
            rgba(1, 40, 98, 0.65) 0%,
            rgba(1, 28, 72, 0.35) 55%,
            transparent 80%),

        /* ── 点1：左侧中下部深蓝绿 ── */
        radial-gradient(ellipse 100% 100% at 5% 100%,
            rgba(0, 74, 114, 0.95) 0%,
            rgba(0, 55, 90, 0.1) 100%),

        /* ── 点6：右下底部深蓝 ── */
        radial-gradient(ellipse 92% 100% at 75% 94.74%,
            rgba(2, 51, 82, 0.85) 0%,
            rgba(2, 36, 62, 0.45) 55%,
            transparent 85%),

        /* ── 点2：左上顶部极暗，压低亮光 ── */
        radial-gradient(ellipse 50% 85% at 21.11% 8.42%,
            rgba(8, 13, 20, 0.6) 0%,
            transparent 55%),

        /* ── 点5：右上顶部纯黑暗区 ── */
        radial-gradient(ellipse 45% 40% at 94.44% 9.47%,
            rgba(0, 0, 0, 0.35) 0%,
            transparent 85%),

        
        /* ── 底色：极深蓝黑 #000204 ── */
        rgb(0, 2, 4);
}

.bg-2 {
    /*
     * bg-1 的垂直镜像反转。
     * 每个光斑：X 和椭圆尺寸不变，Y 坐标翻转 Y' = 100% - Y。
     * 颜色 / 透明度 / 衰减带 与 bg-1 完全一致。
     * 叠加顺序同样：亮色在上，暗色在下。
     *
     * 镜像映射：
     *   点3: (30%, 89.47% → 10.53%)
     *   点4: (52.78%, 55.5% → 44.5%)
     *   点1: (5%, 80% → 20%)
     *   点6: (75%, 94.74% → 5.26%)
     *   点2: (21.11%, 8.42% → 91.58%)
     *   点5: (94.44%, 9.47% → 90.53%)
     */
    background:
        /* ── 点3 镜像：(30%, 10.53%) 底部亮青 → 顶部亮青蓝 ── */
        radial-gradient(ellipse 68% 80% at 30% 1%,
            rgba(0, 112, 145, 0.75) 0%,
            rgba(0, 95, 130, 0.55) 28%,
            rgba(0, 60, 95, 0.15) 55%,
            transparent 75%),

        /* ── 点4 镜像：(52.78%, 44.5%) 右侧中下暗蓝 → 右侧中上暗蓝 ── */
        radial-gradient(ellipse 23% 70% at 52.78% 44.5%,
            rgba(1, 40, 98, 0.55) 0%,
            rgba(1, 28, 72, 0.35) 55%,
            transparent 80%),

        /* ── 点1 镜像：(5%, 20%) 左侧中下深蓝绿 → 左侧中上深蓝绿 ── */
        radial-gradient(ellipse 100% 100% at 5% 0%,
            rgba(0, 74, 114, 0.95) 0%,
            rgba(0, 55, 90, 0.1) 100%),

        /* ── 点6 镜像：(75%, 5.26%) 右下深蓝 → 右上深蓝 ── */
        radial-gradient(ellipse 92% 100% at 75% 5.26%,
            rgba(2, 51, 82, 0.85) 0%,
            rgba(2, 36, 62, 0.45) 55%,
            transparent 85%),

        /* ── 点2 镜像：(21.11%, 91.58%) 左上极暗 → 左下极暗 ── */
        radial-gradient(ellipse 50% 85% at 21.11% 91.58%,
            rgba(8, 13, 20, 0.6) 0%,
            transparent 55%),

        /* ── 点5 镜像：(94.44%, 90.53%) 右上纯黑 → 右下纯黑 ── */
        radial-gradient(ellipse 45% 40% at 94.44% 90.53%,
            rgba(0, 0, 0, 0.35) 0%,
            transparent 85%),

        /* ── 底色：极深蓝黑 #000204 ── */
        rgb(0, 2, 4);
}
.bg-black {
    background-color: #000;
}
.gradient-bg {
    background: linear-gradient(45deg, var(--moki-bg-1) 0%, var(--moki-bg-2) 100%);
}
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2.5rem;
}
@media screen and (max-width: 1200px) {
    .container {
        padding: 15px 2rem;
    }
}
@media screen and (max-width: 768px) {
    .container {
        padding: 15px 1.5rem;
    }
}
@media screen and (max-width: 440px) {
    .container {
        padding: 15px 1rem;
    }
}

/* ============================================================
   全局文本样式层
   所有页面共享的排版原子类，统一使用 HarmonyOS Sans 字重。
   ============================================================ */

/* 正文段 — 浅灰辅助说明文字 */
.note {
    font-size: 0.8rem;
    color: #ccc;
    text-align: center;
    font-weight: 300;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-dense);
    max-width: 37rem;
    margin: 0 auto;
}

/* 通用正文区域 — 白色正文，常用于 section 介绍段 */
.content-txt {
    letter-spacing: var(--letter-spacing-wide);
    color: #fff;
    text-align: center;
    margin: 0 auto;
    font-weight: 300;
    line-height: var(--line-height-loose);
}

/* 中文主标题 — 蓝底高亮条 + Bold 字重 */
.title-bg {
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 0 1.5rem;
    z-index: 0;
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-title);
    line-height: var(--line-height-heading);
    white-space: nowrap;
}
.title-bg::after{
    background-color: var(--moki-blue);
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 0.5em;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0.5;
}

/* 按钮标签 — Medium 字重 */
.title-btn {
    display: inline-block;
    background-color: var(--moki-blue);
    color: #000;
    padding: 0.25rem 1rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-dense);
}

/* 英文副标题/英文描述 — Light 字重 */
.title-en {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight: 300;
    color: #ccc;
    margin: 0 0 1rem 0;
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--line-height-normal);
}

/* 中文副标题 — Regular 字重，略深灰 */
.subtitle {
    color: #ddd;
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight: 400;
    margin-bottom: 0;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-normal);
}

/* 高亮关键词 — 品牌青色 + Medium 字重 */
.highlight {
    color: var(--moki-accent);
    padding: 1rem 0;
    font-weight: 400;
    letter-spacing: var(--letter-spacing-tight);
}

/* 描述正文 — 适用于卡片/列表等段落文字 */
.des {
    line-height: var(--line-height-loose);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-tight);
}

/* 响应式：移动端微调字间距与行高 */
@media screen and (max-width: 768px) {
    body {
        letter-spacing: 0.3px;
    }
    .content-txt {
        letter-spacing: var(--letter-spacing-normal);
        line-height: var(--line-height-normal);
    }
    .title-bg {
        letter-spacing: var(--letter-spacing-wide);
    }
    .title-en {
        letter-spacing: var(--letter-spacing-tight);
    }
}
@media screen and (max-width: 440px) {
    body {
        letter-spacing: 0;
    }
    .content-txt {
        letter-spacing: var(--letter-spacing-tight);
    }
    .title-bg {
        letter-spacing: var(--letter-spacing-normal);
    }
}

/* ==================== Location Pin 组件样式 ==================== */
.location-pin {
    position: absolute;
    width: 120px;
    height: 168px;
    /* --pin-scale: 缩放比例，默认 1；设为 0.5 即缩小一半，1.5 即放大 1.5 倍 */
    --pin-scale: 1;
    /* 等比例缩放原点：以 left/top 定位点为基准 */
    transform-origin: 0 0;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(106, 17, 203, 0.3));
    cursor: pointer;
    transition: filter 0.3s ease;
}

.location-pin:hover {
    filter: drop-shadow(0 15px 30px rgba(106, 17, 203, 0.5));
}

/* 水滴/图钉主体形状 + 渐变背景 + 中心圆形镂空 */
.location-pin::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 默认渐变，可通过 --pin-gradient 变量覆盖 */
    background: var(--pin-gradient, linear-gradient(180deg, #f50b0b 0%, #ff4567 30%, #c830e0 70%, #6a11cb 100%));
    /* 先裁剪为水滴形状，再在 mask 中减去中心圆 */
    clip-path: path('M60 0 C93 0 120 27 120 60 C120 105 60 168 60 168 C60 168 0 105 0 60 C0 27 27 0 60 0 Z');
    /* mask: 全白(保留clip-path裁剪后的形状) + 中心圆(透明) = 镂空 */
    -webkit-mask:
        radial-gradient(circle 18px at 60px 60px, transparent 18px, #000 19px);
            mask:
        radial-gradient(circle 18px at 60px 60px, transparent 18px, #000 19px);
    z-index: 1;
}

/* 底座 - 椭圆阴影，带呼吸缩放动效 */
.location-pin .pin-base {
    position: absolute;
    width: 50px;
    height: 14px;
    --pin-base-color: rgba(106, 17, 203, 0.5);
    background: radial-gradient(ellipse at center, var(--pin-base-color) 0%, var(--moki-bg-1) 70%);
    border-radius: 50%;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    animation: base-breathe 3s ease-in-out infinite;
    pointer-events: none;
}

/* 点击时的涟漪效果 */
.location-pin:active {
    animation: float 3s ease-in-out infinite, click-bounce 0.4s ease;
}

/* 浮动动画 — 等比例缩放，translateY 值会被 scale 自动缩放，无需额外计算 */
@keyframes float {
    0%, 100% { transform: scale(calc(var(--pin-scale) * var(--global-scale-factor, 1))) translateY(0); }
    50% { transform: scale(calc(var(--pin-scale) * var(--global-scale-factor, 1))) translateY(-15px); }
}

/* 底座呼吸动画 - pin 上浮时底座缩小变淡，下落后恢复 */
@keyframes base-breathe {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(0.55);
        opacity: 0.4;
    }
}

@keyframes click-bounce {
    0% { transform: scale(calc(var(--pin-scale) * var(--global-scale-factor, 1))) translateY(-15px); }
    40% { transform: scale(calc(var(--pin-scale) * var(--global-scale-factor, 1) * 0.95)) translateY(5px); }
    100% { transform: scale(calc(var(--pin-scale) * var(--global-scale-factor, 1))) translateY(0); }
}