/* ============================================================
   About: Global Presence / 世界地图（about.html Section 4）
   Figma 区块（1920x1200，白→#F3FBFF 渐变）
   大圆环 1198x1198 at (361,513)，内圆 956.81，地图 949
   ============================================================ */

.ab-global {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1200;
  background: linear-gradient(12deg, var(--color-white) 0%, #F3FBFF 100%);
  overflow: hidden;
}

.ab-global__title {
  position: absolute;
  left: 35.47%;                      /* 681/1920 */
  top: 14.75%;                       /* 177/1200 */
  width: 30.47%;                     /* 585/1920 */
  margin: 0;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.9583vw, 4.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  white-space: nowrap;
}

.ab-global__desc {
  position: absolute;
  left: 16.67%;                      /* 320/1920 */
  top: 23.75%;                       /* 285/1200 */
  width: 66.67%;                     /* 1280/1920 */
  margin: 0;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(0.875rem, 1.6667vw, 2rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text);  /* #666666 */
}

/* --- 大圆环（径向渐变 + 白描边） --- */
.ab-global__ring {
  position: absolute;
  left: 18.8%;                       /* 361/1920 */
  top: 42.75%;                       /* 513/1200 */
  width: min(62.4vw, 1198px);        /* 1198/1920 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 21% -4%, rgba(255, 255, 255, 0.1) 0%, rgba(62, 168, 217, 0.25) 100%);
  border: 1px solid var(--color-white);
}

.ab-global__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 79.87%;                     /* 956.81/1198 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

/* --- 点阵地球 canvas（WebGL 可用时显示，覆盖静态图） --- */
.ab-global__canvas {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 79.87%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.ab-global__ring.is-globe .ab-global__canvas {
  display: block;
}

.ab-global__ring.is-globe .ab-global__map {
  display: none;
}

.ab-global__map {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 79.22%;                     /* 949/1198 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

/* ==================== 响应式（1200 以下移动端布局） ==================== */
@media (max-width: 1200px) {
  .ab-global {
    aspect-ratio: auto;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .ab-global__title,
  .ab-global__desc {
    position: static;
    width: 100%;
    max-width: var(--container-content);
    padding: 0 var(--container-padding);
  }

  .ab-global__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
  }

  .ab-global__desc {
    font-size: clamp(1rem, 1.6667vw, 2.125rem);
    line-height: 1.5;
  }

  .ab-global__ring {
    position: static;
    width: 100%;
    max-width: 640px;
  }
}

@media (max-width: 768px) {
  .ab-global {
    padding: 36px 0;
    gap: 22px;
  }

  .ab-global__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
  }

  .ab-global__desc {
    font-size: clamp(1rem, 1.6667vw, 2.125rem);
    line-height: 1.5;
  }

  .ab-global__ring {
    max-width: 460px;
  }
}

@media (max-width: 576px) {
  .ab-global__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}