/* ============================================
   站点自定义样式（通过 _config.redefine.yml 的 inject 注入）
   适配 Redefine 2.9 的 DOM / CSS 变量（PRD V1.12 主题迁移）
   暗色模式选择器为 .dark（Tailwind class 模式），
   不同于 Butterfly 时代的 [data-theme='dark']
   ============================================ */

/* ============================================
   主题色细项微调：链接 / 文字选中 / 滚动条
   对齐原 theme_color 调色板（Redefine 只提供 primary/secondary 两个种子色）
   ============================================ */
:root {
  --link-color: #0d9488 !important;       /* 亮色链接：深青绿 */
  --selection-color: #99f6e4 !important;  /* 文字选中背景：浅青绿 */
  --scrollbar-color: #14b8a6 !important;  /* 滚动条：青绿 */
  --scrollbar-color-hover: #0d9488 !important;
}

.dark {
  --link-color: #5eead4 !important;       /* 暗色链接：亮青绿，保证对比度 */
}

/* ============================================
   网站背景：低饱和彩虹微渐变（方案 C「粒子星云」）
   铺在 body 上、内容卡片之下；透明度压到 0.07 作极淡氛围层。
   粒子网 canvas（zIndex -1）绘制在该背景之上、内容之下
   ============================================ */
body {
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.07) 0,
    rgba(243, 112, 85, 0.07) 15%,
    rgba(239, 78, 123, 0.07) 30%,
    rgba(161, 102, 171, 0.07) 44%,
    rgba(80, 115, 184, 0.07) 58%,
    rgba(16, 152, 173, 0.07) 72%,
    rgba(7, 179, 155, 0.07) 86%,
    rgba(109, 186, 130, 0.07) 100%
  ) fixed !important;
}

/* ============================================
   粒子网层级修复：Redefine 首页的 fixed 全屏横幅背景
   会遮挡 zIndex:-1 的粒子画布，故将画布提到横幅之上、
   内容卡片之下（卡片容器抬高到 z1），粒子从卡片缝隙透出
   ============================================ */
.main-content-container {
  position: relative;
  z-index: 1;
}

/* ============================================
   相册瀑布流图片显示修复（PRD V1.22）：主题给
   .masonry-img.is-loading 设 opacity:0（加载后由 JS 移除
   class 淡入），但图片从缓存瞬间完成时 load 事件存在竞态，
   class 残留导致图片永久透明。强制加载中状态也直接可见
   ============================================ */
.masonry-img.is-loading {
  opacity: 1 !important;
}

/* ============================================
   首页横幅文字：贴身投影勾出轮廓（横幅中部是亮色太阳，
   白字需要投影提供分离度；大扩散阴影会形成雾圈，已弃用）
   ============================================ */
.home-banner-container .description {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 6px rgba(0, 0, 0, 0.2);
}

/* ============================================
   首页横幅文字清晰化：主题为滚动视差给横幅容器常驻
   will-change:transform，副作用是把整块横幅提升到 GPU
   合成层，文字亚像素抗锯齿失效导致字迹发虚（尤其压在
   亮色太阳上）；改回 auto 恢复主层清晰渲染（PRD V1.15）
   ============================================ */
.home-banner-container {
  will-change: auto !important;
}

/* ============================================
   毛玻璃卡片质感（借鉴优秀站点实践，PRD V1.15）：
   文章卡片 / 侧栏卡 / 内页卡片背景半透明 + 背景模糊，
   首页固定横幅与站点渐变背景透出卡片层次
   ============================================ */
.home-article-item,
.home-sidebar-container .sidebar-content,
.redefine-box-shadow,
.redefine-box-shadow-flat {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.home-article-item,
.redefine-box-shadow,
.redefine-box-shadow-flat {
  background-color: rgba(255, 255, 255, 0.55) !important;
}

.home-sidebar-container .sidebar-content {
  background-color: rgba(255, 255, 255, 0.62);
}

.dark .home-article-item,
.dark .redefine-box-shadow,
.dark .redefine-box-shadow-flat {
  background-color: rgba(32, 33, 36, 0.55) !important;
}

.dark .home-sidebar-container .sidebar-content {
  background-color: rgba(32, 33, 36, 0.62);
}

/* ============================================
   点击涟漪特效（替代主题烟花，简净双环）
   配套 source/js/click-ripple.js，主题无关
   ============================================ */
.click-ripple {
  position: fixed;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(94, 234, 212, 0.8);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: click-ripple 0.55s ease-out both;
}

@keyframes click-ripple {
  from {
    opacity: 0.9;
    transform: scale(0.35);
  }
  to {
    opacity: 0;
    transform: scale(4.2);
  }
}