/* ============================================================
   过渡动画与细节特效
   ============================================================ */

/* ---------- 顶部滚动进度条 ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, #5fc21a, #8ce22a, #c9f08c);
  box-shadow: 0 0 14px rgba(140, 226, 42, .75);
  transition: width .08s linear;
  pointer-events: none;
}

/* ---------- 背景呼吸光 ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 44% at 50% -8%, rgba(140, 226, 42, .10), transparent 72%),
    radial-gradient(42% 36% at 88% 92%, rgba(47, 126, 230, .07), transparent 70%);
  animation: bgBreathe 14s ease-in-out infinite;
}
@keyframes bgBreathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
main, header, footer { position: relative; z-index: 1; }

/* ---------- 标题流光 ---------- */
.section-title {
  background: linear-gradient(100deg, #eaf1e2 0%, #eaf1e2 35%, #8ce22a 50%, #eaf1e2 65%, #eaf1e2 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: titleSheen 9s linear infinite;
}
@keyframes titleSheen {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* ---------- 导航下划线滑动 ---------- */
.nav-item {
  position: relative;
}
.nav-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(140, 226, 42, .85);
  transform: translateX(-50%);
  transition: width .28s var(--ease);
}
.nav-item:hover::after,
.nav-item.active::after { width: 72%; }

/* ---------- 主按钮扫光 ---------- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after { animation: btnShine .85s var(--ease); }
@keyframes btnShine {
  to { left: 150%; }
}

/* ---------- 卡片：顶部高光线 + 轻微抬升 ---------- */
.card, .feature-card, .plugin-chip, .contact-card, .staff-card, .rule-item, .donate-btn {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.card::before, .feature-card::before, .plugin-chip::before, .contact-card::before, .donate-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 226, 42, .6), transparent);
  transform: scaleX(0);
  transition: transform .35s var(--ease);
}
.card:hover::before, .feature-card:hover::before, .plugin-chip:hover::before,
.contact-card:hover::before, .donate-btn:hover::before { transform: scaleX(1); }

/* ---------- 规则项：左侧强调条 ---------- */
.rule-item::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #8ce22a, #5fc21a);
  box-shadow: 0 0 12px rgba(140, 226, 42, .7);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .32s var(--ease);
}
.rule-item:hover::after { transform: scaleY(1); }
.rule-item:hover .rule-num {
  background: var(--primary);
  color: #08120a;
  transform: scale(1.06);
}
.rule-num { transition: background .25s, color .25s, transform .25s var(--ease); }

/* ---------- 插件小卡：圆点脉冲 ---------- */
.plugin-dot {
  animation: dotPulse 2.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 226, 42, .55); }
  50% { box-shadow: 0 0 0 7px rgba(140, 226, 42, 0); }
}

/* ---------- 特色卡图标 ---------- */
.feature-icon {
  transition: transform .38s var(--ease), background .25s, color .25s;
}
.feature-card:hover .feature-icon {
  transform: rotate(-8deg) scale(1.1);
}

/* ---------- 统计数字滚动时的光晕 ---------- */
.stat-cell {
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.stat-cell:hover {
  border-color: rgba(140, 226, 42, .5);
  box-shadow: 0 10px 30px rgba(140, 226, 42, .14);
}

/* ---------- 章节入场错峰 ---------- */
.grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.grid > .reveal:nth-child(2) { transition-delay: 60ms; }
.grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.grid > .reveal:nth-child(4) { transition-delay: 180ms; }
.grid > .reveal:nth-child(5) { transition-delay: 240ms; }
.grid > .reveal:nth-child(6) { transition-delay: 300ms; }
.grid > .reveal:nth-child(n+7) { transition-delay: 320ms; }

/* ---------- 详情折叠块 ---------- */
details {
  transition: background .25s, border-color .25s;
}
details[open] {
  border-color: rgba(140, 226, 42, .45) !important;
}
details > summary { transition: color .2s; }
details > summary:hover { color: var(--primary); }

/* ---------- 尊重系统「减少动效」设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after,
  .section-title,
  .plugin-dot { animation: none !important; }
  .btn-primary:hover::after { animation: none !important; }
  .card, .feature-card, .plugin-chip, .contact-card, .staff-card,
  .rule-item, .donate-btn, .stat-cell, .feature-icon { transition: none !important; }
}