/* ============================================================
   自定义 fullpage 章节导航 —— 左侧线条指示器
   替代 fullpage 原生圆点（已在 main.min.js 关闭 navigation）
   设计参考：21st.dev @0xUrvish/vertical-tabs 的左侧线条效果
   - 每屏一根竖线（track，灰色）
   - 激活项：海天红 (#C82126) 从上往下填充 0.5s，并向右侧伸长红色颜色方块
   - 纯线条，无文字序号
   ============================================================ */

.sp-section-nav {
  position: fixed;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: none; /* 默认隐藏，≥992px 才显示，匹配 fullpage responsiveWidth:992 */
}

@media (min-width: 992px) {
  .sp-section-nav { display: flex; }
}

.sp-section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sp-section-nav .sp-nav-item {
  display: block;
  width: 36px;
  height: 30px;
  position: relative;
  cursor: pointer;
  background: transparent;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}

/* 未激活：灰色细线轨道 */
.sp-section-nav .sp-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(150, 150, 150, 0.65);
  transition: background 0.3s ease;
}

/* 激活：海天红填充，从上往下动画填充 */
.sp-section-nav .sp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: #C82126;
  transition: height 0.5s linear;
}

.sp-section-nav .sp-nav-item.active .sp-fill {
  height: 100%;
}

/* 激活：从竖线右侧向右伸长的红色颜色方块（与竖线填充同步 0.5s） */
.sp-section-nav .sp-nav-item::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  height: 100%;
  width: 0;
  background: #C82126;
  transition: width .18s ease;
}

.sp-section-nav .sp-nav-item.active::after {
  width: 20px;
}

/* hover：轨道提亮；激活态 hover 保持红色 */
.sp-section-nav .sp-nav-item:hover .sp-track {
  background: rgba(205, 205, 205, 0.95);
}

.sp-section-nav .sp-nav-item.active:hover .sp-track {
  background: #C82126;
}

/* Hover transfers the protrusion without changing the current section. */
.sp-section-nav:has(.sp-nav-item:hover) .sp-nav-item.active:not(:hover)::after {
  width: 0;
}

.sp-section-nav .sp-nav-item:hover::after,
.sp-section-nav .sp-nav-item:focus-visible::after {
  width: 20px;
  top: 0;
  height: 30px;
  transition: width .18s ease;
}
.sp-section-nav .sp-nav-item:hover .sp-track,
.sp-section-nav .sp-nav-item:focus-visible .sp-track {
  background: #C82126;
}
.sp-section-nav .sp-nav-item:focus-visible {
  outline: 2px solid #C82126;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .sp-section-nav .sp-nav-item::after,
  .sp-section-nav .sp-nav-item:hover::after,
  .sp-section-nav .sp-nav-item:focus-visible::after { transition: none; }
}