/* 网页链接模块样式：控制内部站点和外部站点链接卡片、图标、布局和悬停状态。 */
/* ========================= */
/* 1. 整体容器 */
/* ========================= */

.home-link-topology {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 100px auto;
  gap: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  position: relative;
}

.link-side {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
  gap: 55px;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* ========================= */
/* 2. 基础链接项与文字定位 */
/* ========================= */

.side-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  width: 100%;
  position: relative;
}

.side-link .icon-box {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  z-index: 2;
  flex-shrink: 0;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease;
}

.side-link img {
  width: 24px;
  height: 24px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.side-link h3 {
  position: absolute;
  top: 6px;
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  white-space: nowrap;
  font-weight: 500;
  transition: color 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), top 0.24s ease;
  pointer-events: none;
}

.side-link .line {
  flex-grow: 1;
  height: 1px;
  background: #e0e8f0;
  transition: background-color 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

/* ========================= */
/* 3. 左右对称排列（100% 宽度） */
/* ========================= */

.left-side .side-link { flex-direction: row; }
.left-side .side-link h3 { left: 60px; text-align: left; }
.left-side .side-link:nth-child(1), .left-side .side-link:nth-child(5) { transform: translateX(80px); }
.left-side .side-link:nth-child(2), .left-side .side-link:nth-child(4) { transform: translateX(30px); }
.left-side .side-link:nth-child(3) { transform: translateX(10px); }

.right-side .side-link { flex-direction: row; }
.right-side .side-link .line { order: 1; }
.right-side .side-link .icon-box { order: 2; }
.right-side .side-link h3 { right: 60px; text-align: right; }
.right-side .side-link:nth-child(1), .right-side .side-link:nth-child(5) { transform: translateX(-80px); }
.right-side .side-link:nth-child(2), .right-side .side-link:nth-child(4) { transform: translateX(-30px); }
.right-side .side-link:nth-child(3) { transform: translateX(-10px); }

/* ========================= */
/* 4. 中心大圆及文字 */
/* ========================= */

.link-center-box {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.center-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.center-link .icon-box {
  width: 150px;
  height: 150px;
  border: 2px solid #0068b7;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 15px 45px rgba(0, 104, 183, 0.1);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.center-link h3 {
  position: static;
  color: #0068b7;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 15px;
  transition: color 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ✅ 中心图标与文字的悬停效果 */
.center-link:hover .icon-box {
  transform: scale(1.05);
  border-color: #004a82;
  box-shadow: 0 20px 50px rgba(0, 104, 183, 0.2);
}

.center-link:hover h3 {
  color: #004a82;
  transform: translateY(-2px); /* 文字轻微上移 */
}

/* ========================= */
/* 5. 关键响应式：70% 宽度 (840px) */
/* ========================= */

@media (max-width: 840px) {
  .home-link-topology { height: 500px; }
  .link-side { flex: 0; width: 0; height: 0; gap: 0; }
  .side-link { position: absolute; top: 50%; left: 50%; width: auto; }

  .side-link h3, .side-link .line, .center-link h3 {
    display: none !important;
  }

  .center-link .icon-box {
    width: 120px;
    height: 120px;
  }

  .side-link .icon-box {
    width: 58px;
    height: 58px;
  }

  /* 10个图标均匀正圆分布 (半径 190px) */
  .left-side .side-link:nth-child(1) { transform: translate(-50%, -50%) rotate(162deg) translateX(190px) rotate(-162deg); }
  .left-side .side-link:nth-child(2) { transform: translate(-50%, -50%) rotate(126deg) translateX(190px) rotate(-126deg); }
  .left-side .side-link:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg) translateX(190px) rotate(-90deg); }
  .left-side .side-link:nth-child(4) { transform: translate(-50%, -50%) rotate(54deg) translateX(190px) rotate(-54deg); }
  .left-side .side-link:nth-child(5) { transform: translate(-50%, -50%) rotate(18deg) translateX(190px) rotate(-18deg); }

  .right-side .side-link:nth-child(1) { transform: translate(-50%, -50%) rotate(198deg) translateX(190px) rotate(-198deg); }
  .right-side .side-link:nth-child(2) { transform: translate(-50%, -50%) rotate(234deg) translateX(190px) rotate(-234deg); }
  .right-side .side-link:nth-child(3) { transform: translate(-50%, -50%) rotate(270deg) translateX(190px) rotate(-270deg); }
  .right-side .side-link:nth-child(4) { transform: translate(-50%, -50%) rotate(306deg) translateX(190px) rotate(-306deg); }
  .right-side .side-link:nth-child(5) { transform: translate(-50%, -50%) rotate(342deg) translateX(190px) rotate(-342deg); }

  .link-center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ========================= */
/* 6. 侧边链接悬停动效 */
/* ========================= */

.side-link:hover .icon-box {
  border-color: #0068b7;
  transform: scale(1.1);
}

.side-link:hover h3 {
  color: #0068b7;
  top: 2px;
}

.side-link:hover .line {
  background: #0068b7;
}