/*news_rotate.css*/
/* 全局变量：统一控制动画和尺寸，方便调整 */
:root {
  --rotate-speed: 120; /* 基础旋转速度 */
  --count: 5;              /* 新闻数量（根据实际调整） */
  --easing: cubic-bezier(0.0000, 0.37, 1.00, 0.63);   /* 动画缓动函数 */
  --circle-center-size: 180px;
  /* 新增毛玻璃相关变量，方便统一调整 */
  --glass-blur: 12px;
  --glass-bg-opacity: 0.2;
  --glass-border-opacity: 0.4;
  /* 新增字体大小变量，方便响应式调整 */
  --board-item-font-size: 14px;
  --news-card-font-size: 14px;
}

.news-container {
  width: 45%;
  position: absolute; 
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80%; 
  perspective: 1500px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
}

/* 内容容器：纯定位，不干扰动画 */
.news-content-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* 新闻列表：旋转轨道核心容器，重置定位 */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative; /* 改为相对定位，避免与动画translate冲突 */
  width: 100%;
  height: 100%;
  z-index: 1;
  aspect-ratio: 1 / 1;
}

/* 新闻项（li）：修复定位+正确使用变量，确保动画播放 */
.news-item {
  position: absolute;
  top: 50%;
  width: 40%;
  transform-origin: 150% 50%; 
  transform: translateY(-50%);
  animation: rotateCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
  z-index: 2;
}

/* 新闻卡片：重构为毛玻璃效果 + 字体颜色改为黑色 */
.news-item-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  /* 毛玻璃核心属性替换原有白色背景 */
  background-color: rgba(255, 255, 255, var(--glass-bg-opacity));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.05); /* 弱化阴影适配毛玻璃 */
  border-radius: 12px;
  color: #000000; /* 字体改为黑色 */
  font-size: var(--news-card-font-size); /* 使用变量控制字号 */
  transform-style: preserve-3d;
  animation: rotateCCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
  box-sizing: border-box;
  z-index: 2;
}

/* 不同li的动画延迟（基于你的变量） */
.news-item:nth-child(1),
.news-item:nth-child(1) .news-item-card
{ animation-delay: calc((var(--rotate-speed) / var(--count)) * -0s); }
.news-item:nth-child(2),
.news-item:nth-child(2) .news-item-card
{ animation-delay: calc((var(--rotate-speed) / var(--count)) * -1s); }
.news-item:nth-child(3),
.news-item:nth-child(3) .news-item-card
{ animation-delay: calc((var(--rotate-speed) / var(--count)) * -2s); }
.news-item:nth-child(4),
.news-item:nth-child(4) .news-item-card
{ animation-delay: calc((var(--rotate-speed) / var(--count)) * -3s); }
.news-item:nth-child(5),
.news-item:nth-child(5) .news-item-card
{ animation-delay: calc((var(--rotate-speed) / var(--count)) * -4s); }

/* 链接样式：适配长条卡片 + 字体颜色继承黑色 */
.news-item-card a {
  color: inherit; /* 继承黑色 */
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 1.4;
  -webkit-box-orient: vertical;
}

/* 移除：鼠标悬停暂停动画的效果 */
/* 原悬浮相关代码已删除，确保无悬浮交互 */

/* 中心圆：毛玻璃优化 */
.news-center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--circle-center-size);
  aspect-ratio: 1/1;
  /* 毛玻璃化中心圆 */
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  z-index: 0;
  transform-style: flat;
  pointer-events: none;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.15); /* 弱化光晕适配毛玻璃 */
}

/* 第二个圆：毛玻璃优化 */
.news-second-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--circle-center-size) * 0.7);
  aspect-ratio: 1/1;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  z-index: 0;
  transform-style: flat;
  pointer-events: none;
}

/* 最后一个圆：毛玻璃优化 */
.news-last-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--circle-center-size) * 0.4);
  aspect-ratio: 1/1;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  z-index: 0;
  transform-style: flat;
  pointer-events: none;
}

/* 严格使用你提供的CW公转动画（无修改） */
@keyframes rotateCW {
  from {
    transform: translate3d(0px, -50%, 1px) rotate(-45deg);
  }
  to {
    transform: translate3d(0px, -50%, 0px) rotate(-315deg);
  }
}

/* 严格使用你提供的CCW自转动画（无修改） */
@keyframes rotateCCW {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(315deg);
  }
}

/* 增强响应式适配：多断点 + 缩减字号/尺寸避免拥挤 */
/* 大屏（1200px以上）：默认样式 */
/* 中屏（992-1200px） */
@media (max-width: 1200px) {
  :root {
    --circle-center-size: 150px;
    --board-item-font-size: 13px; /* 缩减板块字号 */
    --news-card-font-size: 13px; /* 缩减新闻卡片字号 */
    --rotate-speed: 100; /* 略放慢旋转速度，避免视觉拥挤 */
  }
  .news-container {
    max-width: 60%;
    width: 60%;
  }
  .news-item {
    width: 38%; /* 缩减卡片宽度 */
  }
  .news-board-item {
    padding: 0 15px 0 25px; /* 缩减内边距 */
  }
}

/* 小屏（768-992px） */
@media (max-width: 992px) {
  :root {
    --circle-center-size: 130px;
    --board-item-font-size: 12px;
    --news-card-font-size: 12px;
    --rotate-speed: 90;
  }
  .news-container {
    max-width: 70%;
    width: 70%;
    height: 75%; /* 缩减容器高度 */
  }
  .news-item {
    width: 36%;
  }
  .news-board-container {
    width: calc(var(--circle-center-size) * 1.3); /* 缩减板块容器宽度 */
  }
}

/* 超小屏（≤768px） */
@media (max-width: 768px) {
  :root {
    --circle-center-size: 100px;
    --board-item-font-size: 11px;
    --news-card-font-size: 11px;
    --rotate-speed: 80;
    --glass-blur: 8px; /* 缩小模糊度，适配小屏视觉 */
  }
  .news-container {
    max-width: 85%;
    width: 85%;
    height: 70%;
    top: 50%; /* 微调垂直居中 */
  }
  .news-item {
    width: 35%;
    transform-origin: 130% 50%; /* 调整旋转原点，避免溢出 */
  }
  .news-item-card {
    padding: 0 10px; /* 缩减卡片内边距 */
    border-radius: 8px; /* 缩小圆角 */
  }
  .news-board-container {
    width: calc(var(--circle-center-size) * 1.2);
    padding-left: 10px; /* 缩减内边距 */
  }
  .news-board-list {
    gap: 2px; /* 缩小板块间距 */
  }
  .news-board-item {
    padding: 0 12px 0 20px;
    border-radius: 20px 0 0 20px; /* 缩小圆角 */
  }
  .news-board-item::before {
    border-width: 5px 7px 5px 0; /* 缩小箭羽尺寸 */
  }
  .news-board-item::after {
    width: 10px; /* 缩小箭尖宽度 */
  }
}

/* -------------------------- 核心优化：板块列表（发散箭簇） -------------------------- */
/* 板块容器：毛玻璃优化 */
.news-board-container {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--circle-center-size) / 2 + var(--board-offset)); 
  transform: translateY(-50%);
  z-index: 5; 
  display: flex;
  align-items: center;
  justify-content: flex-end; 
  width: calc(var(--circle-center-size) * 1.5);
  height: 100%;
  pointer-events: auto;
  /* 毛玻璃背景（替换原有渐变） */
  border-radius: 40px 0 0 40px;
  padding-left: 20px;
}

/* 板块列表：发散式布局核心 */
.news-board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  width: 100%;
  transform-origin: 100% 50%; 
}

/* 动态计算每支箭的发散角度（通用公式，适配任意数量板块） */
.news-board-list li {
  width: 100%;
  height: var(--board-item-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  --index: calc(var(--i) - (var(--board-count) - 1) / 2);
  transform: rotate(calc(var(--index) * var(--board-diverge-angle) * 1deg));
  transform-origin: 100% 50%;
  transition: transform 0.3s ease;
}

/* 手动给每个li设置索引 */
.news-board-list li:nth-child(1) { --i: 0; }
.news-board-list li:nth-child(2) { --i: 1; }
.news-board-list li:nth-child(3) { --i: 2; }
.news-board-list li:nth-child(4) { --i: 3; }
.news-board-list li:nth-child(5) { --i: 4; }
.news-board-list li:nth-child(6) { --i: 5; }

/* 板块链接：箭的样式 - 毛玻璃重构 + 字体颜色改为黑色 */
.news-board-item {
  display: inline-flex;
  align-items: center;
  padding: 0 18px 0 30px;
  height: 100%;
  /* 毛玻璃背景替换原有渐变 */
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px 0 0 24px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); /* 弱化阴影 */
  color: #000000; /* 字体改为黑色 */
  font-size: var(--board-item-font-size); /* 使用变量控制字号 */
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  position: relative;
  margin: 3px 0px;
}
.news-board-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 8px 6px 0;
  border-color: transparent #000000 transparent transparent; /* 箭羽改为黑色 */
  opacity: 0.6;
}

/* 箭尖装饰优化 */
.news-board-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
  height: 100%;
  /* 箭尖也毛玻璃化 */
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0 6px 6px 0;
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
}

/* 激活态板块：毛玻璃适配 + 字体改为白色 */
.news-board-item.active {
  /* 激活态毛玻璃背景 */
  background-color: rgba(10, 88, 202, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(10, 88, 202, 0.5);
  color: #ffffff; /* 激活态字体改为白色 */
  box-shadow: 0 5px 15px rgba(10, 88, 202, 0.2); /* 弱化阴影 */
  padding-right: 22px;
}

/* 激活态箭羽+箭尖 */
.news-board-item.active::before {
  border-color: transparent #ffffff transparent transparent; /* 箭羽改为白色 */
  opacity: 1;
}
.news-board-item.active::after {
  /* 激活态箭尖毛玻璃 */
  background-color: rgba(10, 88, 202, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
}

/* 移除：板块列表li的悬浮旋转效果 */
/* 原hover旋转代码已删除 */
.news-board-list li:hover {
  transform: rotate(calc(var(--index) * var(--board-diverge-angle) * 1deg)); /* 取消悬浮旋转 */
}
/* 保留基础hover样式，但仅微调颜色，不改变位置 */
.news-board-item:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  color: #000000; /* 保持黑色 */
}
.news-board-item:hover:not(.active)::before {
  border-color: transparent #000000 transparent transparent; /* 保持黑色 */
  opacity: 0.8;
}