@charset "UTF-8";


.gogm {
  --gogm-accent: #4cb3dd;
  --gogm-factory: #dc2626;
  --gogm-navy: #02225b;
  --gogm-edge: 40px; 
  --gogm-max: 1600px; 
  --gogm-gap: 20px; 

  --gogm-title: clamp(27px, 3.45vw, 54px);
  --gogm-sub: clamp(15px, 1.15vw, 18px);
  --gogm-label: clamp(10px, 0.79vw, 13.5px);
  --gogm-dot: clamp(7px, 0.6vw, 10px);

  --gogm-ring-w: 120.744%; 


  --gogm-ring-bleed: 2.9117%;

  --gogm-ring-band: 19.4312%;

  position: relative;
  padding: clamp(30px, 4.4vw, 72px) 0 clamp(40px, 5vw, 80px);
  color: #0d0f14;
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.gogm *,
.gogm *::before,
.gogm *::after { box-sizing: border-box; }

.gogm__inner {
  width: 100%;
  max-width: var(--gogm-max);
  margin: 0 auto;
  padding: 0 var(--gogm-gap);
}

.gogm--full {
  width: calc(100vw - 2 * var(--gogm-edge));
  max-width: calc(100vw - 2 * var(--gogm-edge));
  margin-left: calc(50% - 50vw + var(--gogm-edge));
  margin-right: calc(50% - 50vw + var(--gogm-edge));
  padding-inline: 0;
}

.gogm--full .gogm__inner {
  max-width: var(--gogm-max);
  padding: 0;
}

/* ---------- 标题区 ---------- */
.gogm__head {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.gogm__title {
  margin: 0;
  font-size: var(--gogm-title);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #0d0f14;
  text-wrap: balance;
}

.gogm__sub {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: var(--gogm-sub);
  line-height: 1.7;
  color: #2a2f3a;
}

/* 图例（Partnerships + Overseas Factory 两项并排） */
.gogm__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  align-items: center;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.gogm__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.gogm__legend-dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gogm-accent);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.gogm__legend-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gogm-accent);
  animation: gogm-ping 2s linear infinite;
}

/* 海外工厂图例点（红） */
.gogm__legend-dot--factory,
.gogm__legend-dot--factory::after {
  background: var(--gogm-factory);
}

/* ---------- 涟漪带 ----------
   padding-top 撑出「涟漪带」：地图顶边落在 padding 的下沿，
   上面这段空间留给最外层涟漪向上扩散（见 --gogm-ring-bleed 的推导）。 */
.gogm__map {
  position: relative;
  padding-top: var(--gogm-ring-band);
  overflow: hidden;   /* 涟漪图比容器宽，左右各溢出的透明部分在这里裁掉 */
}

/* 涟漪舞台：宽度 = 容器宽 × 1.20744，水平居中 */
.gogm__rings {
  position: absolute;
  top: 0;
  left: calc((100% - var(--gogm-ring-w)) / 2);
  z-index: 0;
  width: var(--gogm-ring-w);
  margin-top: var(--gogm-ring-bleed);
  pointer-events: none;
}

/* 4 张涟漪按原版层次叠放（ring-2 最外 / 最靠上，ring-4 最内） */
.gogm__ring {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  animation: gogm-ripple 2s linear infinite;
}

/* margin-top 的百分比按「包含块宽度」算 —— 这里的包含块是 .gogm__rings，
   所以分母正好是 **涟漪图宽 R**（不是地图宽 M！）。数值 = 各层相对 c2 的下移量 ÷ 19.15rem：
     ring-1 (原 c1) 0.8rem  → 80/1915  = 4.1775%
     ring-3 (原 c3) 1.4rem  → 140/1915 = 7.3107%
     ring-4 (原 c4) 1.95rem → 195/1915 = 10.1828% */
.gogm__ring--1 { margin-top: 4.1775%; }
.gogm__ring--2 { margin-top: 0; }        /* 最外层，位置即涟漪带的起点 */
.gogm__ring--3 { margin-top: 7.3107%; }
.gogm__ring--4 { margin-top: 10.1828%; }

/* 原版 @keyframes csder 同款：2s 线性，放大到 1.2 倍并淡出，无限循环。
   4 层同相位一起呼吸，叠出层层扩散的观感。 */
@keyframes gogm-ripple {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(1.2); opacity: 0; }
}

.gogm__stage {
  position: relative;
  z-index: 1;
}

.gogm__base {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 点位层 ----------
   .gogm__pins = 圆点 + 国家名（≥641px 用这套）
   .gogm__dots = 只有圆点（≤640px 用，纯装饰，aria-hidden） */
.gogm__pins,
.gogm__dots {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gogm__dots { display: none; }

.gogm__pin,
.gogm__mark {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--gogm-dot);
  height: var(--gogm-dot);
  margin: 0;
  transform: translate(-50%, -50%);
  list-style: none;
}

.gogm__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gogm-accent);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.gogm__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gogm-accent);
  animation: gogm-ping 2s linear infinite;
}

/* 海外工厂点位（红）：地图上那一层和窄屏的圆点层都要跟着变色 */
.gogm__pin--factory .gogm__dot,
.gogm__pin--factory .gogm__dot::after,
.gogm__mark--factory .gogm__dot,
.gogm__mark--factory .gogm__dot::after {
  background: var(--gogm-factory);
}

/* 原版 @keyframes expand 同款（那边用 translate(-50%,-50%) 居中，
   这边靠 inset:0 把 ::after 撑成和圆点同尺寸，所以不需要 translate）。 */
@keyframes gogm-ping {
  from { transform: scale(1);   opacity: 0.8; }
  to   { transform: scale(3);   opacity: 0; }
}

/* 国家名标签：默认在圆点下方，可按国家改成上 / 左 / 右 */
.gogm__name {
  position: absolute;
  z-index: 3;
  font-size: var(--gogm-label);
  font-weight: 600;
  line-height: 1;
  color: #1a1a1a;
  white-space: nowrap;
  pointer-events: none;
}

.gogm__pin--b .gogm__name { top: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.gogm__pin--t .gogm__name { bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.gogm__pin--r .gogm__name { top: 50%; left: calc(100% + 6px); transform: translateY(-50%); }
.gogm__pin--l .gogm__name { top: 50%; right: calc(100% + 6px); transform: translateY(-50%); }

/* ---------- 入场动画（纯 CSS 滚动驱动，零 JS） ----------
   animation-timeline: view() 让动画进度跟着元素在视口里的位置走：
   元素从视口下方进入 → 动画播完 → 停在最后状态。
   整段包在 @supports 里：不支持的浏览器（Firefox / 旧 Safari）这些规则根本不生效，
   内容直接静态显示 —— 这正是它比 JS 方案更保险的地方，不存在「内容被藏起来」。
   已经滚过的元素会因为 fill-mode: both 停在末帧，所以刷新后回到页面中部也不会白屏。 */
@keyframes gogm-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes gogm-in-soft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gogm-in-pin {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gogm__title,
    .gogm__sub,
    .gogm__legend {
      animation: gogm-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 26%;
    }

    /* 涟漪和地图只淡入（涟漪自己还挂着无限循环的扩散动画，别跟它抢 transform） */
    .gogm__rings,
    .gogm__base {
      animation: gogm-in-soft linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }

    /* 30 个点逐个出现：用 --i 把每个点的 range 往后推一点。
       先写一条不带 calc 的，再写一条带 calc 的覆盖率上去 ——
       万一某个浏览器不认 calc(百分比 + var)，也还有前面那条兜着。 */
    .gogm__pin {
      animation: gogm-in-pin linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 34%;
    }
    .gogm__pin {
      animation-range: entry calc(4% + var(--i, 0) * 1.4%) entry calc(34% + var(--i, 0) * 1.4%);
    }
  }
}

/* ---------- 断点 ---------- */

/* 通栏留白 + 字号随屏幕收窄 */
@media (max-width: 1500px) {
  .gogm { --gogm-edge: 32px; }
}

/* ≤1199px：只留圆点（含红色工厂点），隐藏国名标签层。
   原因：国名标签是固定字号，地图一缩，30 个国名在中东/南亚那一片必然互相压字
        （实测：≥1200px 可以做到零压字，1199 以下无解），所以标签只在 ≥1200px 显示。
   ★ .gogm__pins 用整层 display:none —— 不占文档流，.gogm__stage 的高度恒等于底图高度，
     而 .gogm__dots 是 inset:0、百分比按舞台高度算，两者分母一致，圆点才与地图严格对齐。
     （曾经把 .gogm__pins 改成 position:static 排成下方胶囊列表：它混进文档流把舞台撑高
       640 视口 +75px / 390 视口 +112px，圆点被整体拉低 —— 那就是"标点跟地图对不上"的原因。）
   ★ 下面 ≤1112 / ≤900 里的 --gogm-label 目前不生效（标签层已藏），保留是为了将来想把
     标签的显示下限降下来时直接改这一个断点即可。 */
@media (max-width: 1199px) {
  .gogm__pins { display: none; }
  .gogm__dots { display: block; }
}

@media (max-width: 1112px) {
  .gogm { --gogm-edge: 24px; --gogm-label: 11px; --gogm-dot: 8px; }
  .gogm__legend-item { font-size: 14px; }
}

@media (max-width: 900px) {
  .gogm { --gogm-edge: 18px; --gogm-label: 10px; --gogm-dot: 7px; }
  .gogm__sub { max-width: none; }
}

/* ≤640px：手机。圆点再收一点、图例与边距收紧；标签层已在 ≤1199px 就藏掉了。 */
@media (max-width: 640px) {
  .gogm { --gogm-edge: 14px; --gogm-dot: 6px; }

  .gogm__legend { gap: 9px 18px; }
  .gogm__legend-item { font-size: 13.5px; }
}

/* 更窄的机型：圆点再收一点，否则中东那一簇（Turkey/Iraq/Syria）会糊成一团 */
@media (max-width: 420px) {
  .gogm { --gogm-dot: 5px; }
  .gogm__legend-item { font-size: 12.5px; }
}

/* ---------- 无障碍 / 省电 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gogm *,
  .gogm *::before,
  .gogm *::after {
    animation: none !important;
    transition: none !important;
  }
  .gogm__dot::after,
  .gogm__legend-dot::after { display: none; }
}

@media print {
  .gogm__rings,
  .gogm__dots { display: none; }
}