/* =========================================================
   首页 2026-11 · 悬浮模块布局（Crystal Violet 体系内扩展）
   结构：顶栏(品牌+检索条) → 舞台(中央地球仪 + 6 张可拖动模块卡) → 页脚
   只在 body.gp-home 下生效，不影响其他页面的 globe / hero 样式
   ========================================================= */

/* ---------- 页面骨架：顶栏 / 舞台 / 页脚 一屏铺排 ---------- */
body.gp-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.gp-home #main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏：右上角检索条 ---------- */
.home-header .hero-search {
  margin-top: 0;
  max-width: 380px;
  width: 380px;
}
.home-header .hero-search input { height: 44px; padding: 0 84px 0 40px; font-size: 13.5px; }
.home-header .hero-search .go { padding: 0 16px; font-size: 12.5px; }
.home-header .nav { align-items: center; }
@media (max-width: 1180px) {
  .home-header .nav-links { display: none; }
}
@media (max-width: 560px) {
  .home-header .hero-search { width: 100%; max-width: none; }
  .home-header .nav { flex-wrap: wrap; gap: 10px; }
}

/* ---------- 舞台 ---------- */
.home-stage {
  position: relative;
  flex: 1 0 auto;
  min-height: 700px;
  overflow: hidden;
  /* 半径较初版扩大 1.5cm（直径 +3cm ≈ 113px）：clamp 外整体加 3cm */
  --globe-size: calc(clamp(260px, 44vh, 430px) + 3cm);
  /* 外围装饰（轨道环 / 投影）跟着放大的那 1.5cm 一起外扩 */
  --globe-grow: 1.5cm;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---------- 地球仪：舞台正中，不可拖移 ---------- */
body.gp-home .gp-globe {
  /* 与舞台 --globe-size 保持一致：半径扩大 1.5cm（直径 +3cm） */
  --gp-size: calc(clamp(260px, 44vh, 430px) + 3cm);
  position: absolute;
  top: 50%; left: 50%; right: auto;
  margin-top: calc(var(--gp-size) / -2);
  margin-left: calc(var(--gp-size) / -2);
  z-index: 20;
}
/* 全屏态回归整屏，清掉居中偏移 */
body.gp-home .gp-globe.is-full {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0;
  width: 100vw; height: 100vh;
}
/* 窄屏也保留地球仪（其他页 840px 以下隐藏，首页是主角不隐藏） */
@media (max-width: 840px) {
  body.gp-home .gp-globe {
    display: block;
    --gp-size: min(62vw, 250px);
    margin-top: 0;
  }
}

/* 悬浮底框装饰：轨道虚线环 + 底部投影（地球仪本体颜色不变） */
.globe-anchor {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--globe-size, 430px);
  height: var(--globe-size, 430px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}
.globe-halo {
  /* 环半径同样外扩 1.5cm，和地球半径增量一致，环到球面的间距保持不变 */
  position: absolute; inset: calc(-30px - var(--globe-grow, 1.5cm));
  border-radius: 50%;
  border: 1.5px dashed rgba(109, 87, 210, 0.30);
  animation: gp-orbit 46s linear infinite;
}
.globe-halo::before, .globe-halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #ffd47a;
  box-shadow: 0 0 0 3px rgba(255, 212, 122, 0.25);
}
.globe-halo::before { width: 9px; height: 9px; top: 34%; right: -5px; }
.globe-halo::after  { width: 6px; height: 6px; bottom: 12%; left: 2px; background: #8ee0c9; box-shadow: 0 0 0 3px rgba(142, 224, 201, 0.25); }
@keyframes gp-orbit { to { transform: rotate(360deg); } }
.globe-base {
  position: absolute;
  left: 50%; bottom: calc(-58px - var(--globe-grow, 1.5cm));
  width: 72%; height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(71, 53, 150, 0.28) 0%, rgba(71, 53, 150, 0.10) 46%, transparent 72%);
  filter: blur(2px);
  animation: gp-base 4.5s ease-in-out infinite;
}
@keyframes gp-base {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; }
  50%      { transform: translateX(-50%) scale(.9); opacity: .55; }
}
/* ---------- 模块卡：可拖动的浮动小卡 ---------- */
.mod-card {
  position: absolute;
  z-index: 12;
  width: 268px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 4px 14px;
  align-items: center;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(178, 158, 235, 0.45);
  box-shadow:
    0 18px 44px -18px rgba(43, 30, 90, 0.35),
    0 0 0 5px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  text-decoration: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  animation: gp-bob 6s ease-in-out infinite;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.mod-card:hover {
  border-color: rgba(109, 87, 210, 0.65);
  box-shadow:
    0 28px 58px -20px rgba(43, 30, 90, 0.45),
    0 0 0 5px rgba(255, 255, 255, 0.45);
}
.mod-card:focus-visible {
  outline: 2px solid var(--navy, #5b47b8);
  outline-offset: 3px;
}
.mod-card.dragging {
  cursor: grabbing;
  animation-play-state: paused;
  z-index: 60;
  box-shadow:
    0 34px 70px -22px rgba(43, 30, 90, 0.55),
    0 0 0 5px rgba(255, 255, 255, 0.5);
  transition: none;
}
@keyframes gp-bob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -9px; }
}
@media (prefers-reduced-motion: reduce) {
  .mod-card, .globe-halo, .globe-base { animation: none; }
}

/* 卡内元素 */
.mc-mascot {
  grid-row: 1 / 4;
  width: 64px; height: 64px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--tint, #ece4fb);
  box-shadow: inset 0 0 0 1px rgba(91, 71, 184, 0.10);
}
.mc-mascot svg { width: 52px; height: 52px; display: block; }
.mod-card:hover .mc-mascot svg { animation: gp-wiggle .5s ease-in-out; }
@keyframes gp-wiggle {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-7deg); }
  65%      { transform: rotate(6deg); }
}
.mc-idx {
  justify-self: end;
  font: 700 11px/1 var(--mono, monospace);
  letter-spacing: .12em;
  color: #b3a5d6;
}
.mc-title {
  font: 700 17px/1.3 var(--serif, serif);
  color: var(--ink, #1f1833);
}
.mc-desc {
  font: 400 12px/1.55 var(--sans, sans-serif);
  color: var(--muted, #665a80);
  text-wrap: pretty;
}
.mc-go {
  font: 600 11.5px/1 var(--sans, sans-serif);
  color: var(--navy-700, #473596);
  letter-spacing: .06em;
  white-space: nowrap;
}
.mod-card:hover .mc-go { color: var(--navy, #5b47b8); }
.mc-go::after { content: " →"; transition: margin-left .18s ease; }
.mod-card:hover .mc-go::after { margin-left: 3px; }

/* 卡片拖动时禁止文本原生拖拽 */
.mod-card, .mod-card * { -webkit-user-drag: none; }

/* ---------- 窄屏：收成静态网格，地球仪置顶 ---------- */
@media (max-width: 900px) {
  .home-stage {
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0 16px 26px;
  }
  .globe-anchor { display: none; }
  body.gp-home .gp-globe {
    position: relative;
    top: auto; left: auto;
    margin: 10px auto 6px;
  }
  .mod-card {
    position: static !important;
    width: 100%;
    animation: none;
    margin-top: 14px;
    cursor: pointer;
    touch-action: auto;
  }
  .home-hint { display: none; }
}

/* ---------- 拖动提示 ---------- */
.home-hint {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  font: 500 11.5px/1 var(--sans, sans-serif);
  letter-spacing: .06em;
  color: #9d8fc4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 8;
}