/* ============================================================
   洛璃の神秘力量 —— 首页封面：整块纯色，霓虹呼吸灯轮转变色
   任意时刻整个封面都是同一个颜色，颜色沿紫→蓝→青→碧→洋红循环，
   同时叠一层慢速明暗呼吸；底部用遮罩淡出，所以不会切出硬边。
   ============================================================ */

/* 1. 封面本体不上色，颜色交给 ::before 那层去动 */
#page-header.full_page,
#page-header.not-home-page {
  background-color: transparent;
  background-image: none;
}

/* 2. 霓虹呼吸灯层（复用 Butterfly 自带的遮罩伪元素） */
#page-header.full_page:not(.not-top-img)::before,
#page-header.not-home-page:not(.not-top-img)::before {
  top: 0;
  left: 0;
  background-color: #3b0d6b;
  animation: neonCycle 24s linear infinite, neonBreath 5s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}

@keyframes neonCycle {
  0%   { background-color: #3b0d6b; }
  20%  { background-color: #182a7d; }
  40%  { background-color: #0b4d6e; }
  60%  { background-color: #0d5a4e; }
  80%  { background-color: #6a0f4a; }
  100% { background-color: #3b0d6b; }
}

@keyframes neonBreath {
  from { filter: brightness(0.82) saturate(1); }
  to   { filter: brightness(1.16) saturate(1.25); }
}

/* 3. 关掉动画偏好时，停在一个静态颜色 */
@media (prefers-reduced-motion: reduce) {
  #page-header.full_page:not(.not-top-img)::before,
  #page-header.not-home-page:not(.not-top-img)::before {
    animation: none;
  }
}

/* 4. 标题文字压在颜色层之上 */
#page-header #site-info,
#page-header #site-title,
#page-header #site-subtitle,
#page-header #page-site-info,
#page-header #scroll-down {
  position: relative;
  z-index: 3;
}

#page-header #site-title,
#page-header #page-site-info {
  color: #f6f8ff;
  text-shadow: 0 2px 26px rgba(8, 4, 24, 0.6);
  letter-spacing: 0.04em;
}

#page-header #site-subtitle {
  color: rgba(232, 236, 250, 0.92);
  text-shadow: 0 1px 18px rgba(8, 4, 24, 0.55);
  letter-spacing: 0.04em;
}

/* 5. 下滑箭头落在淡出区，用中性色保证可见 */
#page-header #scroll-down .scroll-down-effects {
  color: rgba(110, 104, 150, 0.9);
}

[data-theme='dark'] #page-header #scroll-down .scroll-down-effects {
  color: rgba(198, 196, 222, 0.75);
}

/* 6. 文章卡片轻微上浮，不动配色 */
#recent-posts > .recent-post-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#recent-posts > .recent-post-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -14px rgba(40, 60, 120, 0.35);
}

/* ============================================================
   7. 分类页卡片化：把默认的普通缩进列表改成整齐的卡片墙
   ============================================================ */
.category-lists ul.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0 !important;
  list-style: none !important;
}

.category-lists ul.category-list > li {
  position: relative;
  flex: 1 1 230px;
  max-width: 100%;
  margin: 0 !important;
  padding: 16px 18px 16px 24px !important;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(128, 122, 178, 0.16);
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 去掉默认列表圆点 */
.category-lists ul.category-list > li::before {
  content: none !important;
  display: none !important;
}

/* 左侧品牌渐变竖条（与站点 favicon 同款紫蓝渐变） */
.category-lists ul.category-list > li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #a78bff, #45d0ff);
  opacity: 0.8;
}

.category-lists .category-list-link {
  font-size: 1.06em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--font-color);
}

.category-lists .category-list-count {
  margin: 0 !important;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
  color: #6f61e8;
  background: rgba(122, 108, 255, 0.12);
}

.category-lists .category-list-count::before {
  content: '';
}

.category-lists .category-list-count::after {
  content: ' 篇';
}

.category-lists ul.category-list > li:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 108, 255, 0.45);
  box-shadow: 0 10px 26px -12px rgba(90, 80, 200, 0.35);
}

.category-lists ul.category-list > li:hover .category-list-link {
  color: #6f61e8;
}

/* 暗色模式适配 */
[data-theme='dark'] .category-lists ul.category-list > li {
  border-color: rgba(165, 160, 210, 0.14);
}

[data-theme='dark'] .category-lists .category-list-count {
  color: #a99bff;
  background: rgba(150, 130, 255, 0.16);
}

[data-theme='dark'] .category-lists ul.category-list > li:hover {
  border-color: rgba(150, 130, 255, 0.5);
  box-shadow: 0 10px 26px -12px rgba(20, 16, 60, 0.8);
}

[data-theme='dark'] .category-lists ul.category-list > li:hover .category-list-link {
  color: #a99bff;
}

/* 手机上卡片改为整行，间距收紧 */
@media screen and (max-width: 768px) {
  .category-lists ul.category-list {
    gap: 10px;
  }

  .category-lists ul.category-list > li {
    flex: 1 1 100%;
    padding: 12px 14px 12px 20px !important;
  }

  .category-lists .category-list-link {
    font-size: 1em;
  }
}

/* ============================================================
   8. 页面底色：给纯白背景加一层很淡的品牌色氛围（紫/蓝光晕）
   ============================================================ */
body {
  background:
    radial-gradient(1100px 520px at 88% -120px, rgba(167, 139, 255, 0.10), transparent 62%),
    radial-gradient(900px 480px at -80px 26%, rgba(69, 208, 255, 0.08), transparent 60%),
    radial-gradient(760px 420px at 50% 108%, rgba(167, 139, 255, 0.06), transparent 65%),
    linear-gradient(180deg, #f7f8fd 0%, #f1f3fa 100%);
  background-attachment: fixed;
}

/* 暗色模式保持主题原有的深色背景，不受影响 */
[data-theme='dark'] body {
  background: var(--global-bg);
}

/* ============================================================
   9. 页脚：本站运行时间
   ============================================================ */
#site-runtime {
  margin-top: 8px;
  font-size: 0.88em;
  letter-spacing: 0.04em;
  color: var(--font-color);
  opacity: 0.6;
}

#site-runtime #rt-time {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 1;
}

/* ============================================================
   10. 特殊纪念日黑白模式（5.12 / 7.7 / 9.18 / 12.13）
   ============================================================ */
html.memorial-mode {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}