/* ============================================
   侧边导航锚点样式 - Side Navigation
   ============================================ */

/* 侧边导航容器 */
.et-side-navigation {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 隐藏状态 - 当处于hero区域时 */
.et-side-navigation--hidden {
  opacity: 0;
  visibility: hidden;
}

/* 导航锚点 - 简洁的圆形设计 */
.et-side-nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 锚点hover效果 */
.et-side-nav-dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

/* 激活状态的锚点 */
.et-side-nav-dot.active {
  background: linear-gradient(180deg, #66B1F1, #4A90E2);
  transform: scale(1.35);
  box-shadow: 0 0 12px rgba(74, 144, 226, 0.6);
}

/* 激活状态的锚点hover效果 */
.et-side-nav-dot.active:hover {
  background: linear-gradient(180deg, #66B1F1, #4A90E2);
  transform: scale(1.5);
  box-shadow: 0 0 16px rgba(74, 144, 226, 0.8);
}