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

/* 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);
}