/* 首页地球质感样例 · 配套样式（本地样例，未接入主题）
   [data-globe-light]  只管构图：地球放大、往右下推，露出一段弧形地平线。
   .is-globe-lit         光效画布就绪后才生效：地球本体交给画布，线稿与地名收敛。
   两者都不成立时，页面就是现有外观。颜色只用现有品牌蓝系。 */

/* —— 光效画布 —— */
.home2-globe-light {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .55s ease;
}

body.home .home2-hero[data-globe-light].is-globe-lit .home2-globe-light { opacity: 1; }

/* —— 地球本体交给画布：去掉平涂底色、硬边的夜面和整块投影 —— */
body.home .home2-hero[data-globe-light] [data-global-globe] .gg-disc,
body.home .home2-hero[data-globe-light] [data-global-globe] .gg-night-group,
body.home .home2-hero[data-globe-light] [data-global-globe] .gg-limb {
    transition: opacity .45s ease;
}

body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-disc,
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-night-group,
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-limb {
    opacity: 0;
}

body.home .home2-hero[data-globe-light].is-globe-lit .home2-hero-globe { filter: none; }

/* —— 线稿更克制：经纬线退后，海岸线更细 —— */
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-grid--meridian { opacity: .11; }
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-grid--parallel { opacity: .10; }

body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-land {
    stroke-width: .75;
    opacity: .6;
}

body.home .home2-hero[data-globe-light].is-globe-lit.is-night [data-global-globe] .gg-land {
    stroke: #7CC8EA;
    opacity: .5;
}

/* —— 城市圆点：更小，缓慢地忽明忽暗（节奏错开）；远近的浓淡仍由地球脚本控制 —— */
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city:not(.gg-city--star) {
    r: 1.85px;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: .7;
    animation: lit-city-breathe 6.4s ease-in-out infinite;
}

body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city--world:not(.gg-city--star) { r: 1.5px; }

/* 白天：清亮的品牌蓝，不用深色 */
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city--cn { fill: #008ED3; }
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city--world { fill: #61CCF0; }

/* 夜间：像亮着的灯 */
body.home .home2-hero[data-globe-light].is-globe-lit.is-night [data-global-globe] .gg-city:not(.gg-city--star) {
    stroke: rgba(97, 204, 240, .22);
    stroke-width: 1.6;
    paint-order: stroke fill;
}

body.home .home2-hero[data-globe-light].is-globe-lit.is-night [data-global-globe] .gg-city--cn { fill: #DDF3FF; }
body.home .home2-hero[data-globe-light].is-globe-lit.is-night [data-global-globe] .gg-city--world { fill: #7FD6F3; }

body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city:nth-child(5n+1) { animation-duration: 5.2s; animation-delay: -1.4s; }
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city:nth-child(5n+2) { animation-duration: 7.6s; animation-delay: -3.1s; }
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city:nth-child(5n+3) { animation-duration: 6s; animation-delay: -4.6s; }
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city:nth-child(5n+4) { animation-duration: 8.4s; animation-delay: -2.2s; }
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city:nth-child(5n) { animation-duration: 6.8s; animation-delay: -5.5s; }

@keyframes lit-city-breathe {
    0%, 100% { fill-opacity: 1; stroke-opacity: 1; }
    50% { fill-opacity: .34; stroke-opacity: .3; }
}

/* —— 地名：国内外都照常随机出现；去掉描边，颜色调淡、字重放轻 —— */
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city-label {
    fill: rgba(10, 53, 91, .68);
    stroke: none;
    font-size: calc(var(--ztc-fs-micro) * .82);
    font-weight: 500;
    letter-spacing: .05em;
}

body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city-label--world {
    font-weight: 500;
    letter-spacing: .04em;
}

body.home .home2-hero[data-globe-light].is-globe-lit.is-night [data-global-globe] .gg-city-label {
    fill: rgba(226, 242, 251, .74);
    stroke: none;
}

/* 天宫空间站的名字与城市名同一口径：去描边，略醒目一点 */
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-tiangong-label {
    fill: rgba(10, 53, 91, .82);
    stroke: none;
    font-size: calc(var(--ztc-fs-micro) * .86);
    font-weight: 600;
}

body.home .home2-hero[data-globe-light].is-globe-lit.is-night [data-global-globe] .gg-tiangong-label { fill: rgba(234, 246, 253, .9); }

/* —— 控件平时退后，用到时再亮 —— */
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-controls { opacity: .46; }

body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe]:hover .gg-controls,
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-controls:hover,
body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-controls:focus-within {
    opacity: 1;
}

@media (hover: none) {
    body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-controls { opacity: 1; }
}

/* —— 构图：只在宽屏电脑上放大并下沉，让地平线的弧成为画面主线 —— */
@media (min-width: 1200px) {
    body.home .home2-hero[data-globe-light]:not(.is-globe-fullscreen):not([data-hero-variant="ask"]):not([data-hero-variant="book"]) .home2-hero-globe {
        /* 地球左缘始终落在文字栏右侧约 110px 处：内容区宽 1152、文字栏约 411；圆盘半径 = 宽度 × 0.4054 */
        --lit-w: min(80vw, 124svh, 1320px);
        top: 65%;
        right: calc(50vw + 56px - 0.9054 * var(--lit-w));
        width: var(--lit-w);
    }

    body.home .home2-hero[data-globe-light]:not(.is-globe-fullscreen):not([data-hero-variant="ask"]):not([data-hero-variant="book"]) [data-global-globe] .gg-controls {
        right: calc(var(--lit-crop-x, 0px) + 160px);
        bottom: calc(var(--lit-crop-y, 0px) + 26px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home2-globe-light,
    body.home .home2-hero[data-globe-light] [data-global-globe] .gg-disc,
    body.home .home2-hero[data-globe-light] [data-global-globe] .gg-night-group,
    body.home .home2-hero[data-globe-light] [data-global-globe] .gg-limb { transition: none; }
    body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-city { animation: none !important; }
}

@media print {
    .home2-globe-light { display: none; }
    body.home .home2-hero[data-globe-light].is-globe-lit [data-global-globe] .gg-disc { opacity: 1; }
}
