/* ==================== 模拟时钟卡片样式 ==================== */

/* 时钟外层容器：居中 & 控制上下间距 */
#clock-widget .clock-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

/* 1. 时钟主体：只对颜色/阴影做 transition，不要对 transform 生效 */
#clock-widget .clock {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  background-image: url("https://imvpn22.github.io/analog-clock/clock.png");
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 -8px 8px rgba(255, 255, 255, 0.05),
              inset 0 -8px 8px rgba(255, 255, 255, 0.05),
              0 8px 8px rgba(0, 0, 0, 0.15),
              inset 0 8px 8px rgba(0, 0, 0, 0.15);
  /* 仅对背景和边框做切换动画，避免影响旋转 */
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 中心原点 */
#clock-widget .clock::before {
  content: "";
  height: 8px;
  width: 8px;
  background-color: #888888;
  border: 2px solid #ffffff;
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 2. 指针通用样式：明确移除 transition，让 requestAnimationFrame 完全接管帧渲染 */
#clock-widget .hour,
#clock-widget .min,
#clock-widget .sec {
  position: absolute;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  transition: none !important; /* 关键：禁用过渡效果，实现绝对连续 */
}

/* 时针 */
#clock-widget .hour {
  height: 75px;
  width: 75px;
}
#clock-widget .hour::before {
  content: "";
  position: absolute;
  height: 50%;
  width: 4px;
  background-color: #555555;
  border-radius: 4px;
}

/* 分针 */
#clock-widget .min {
  height: 95px;
  width: 95px;
}
#clock-widget .min::before {
  content: "";
  position: absolute;
  height: 50%;
  width: 3px;
  background-color: #777777;
  border-radius: 3px;
}

/* 秒针 */
#clock-widget .sec {
  height: 110px;
  width: 110px;
}
#clock-widget .sec::before {
  content: "";
  position: absolute;
  height: 55%;
  width: 2px;
  background-color: #ff4d4f;
  border-radius: 2px;
}

/* Butterfly 暗黑模式自动适配 */
[data-theme="dark"] #clock-widget .clock {
  background-color: #1e1f26;
  border-color: #1e1f26;
  box-shadow: 0 -8px 8px rgba(255, 255, 255, 0.02),
              inset 0 -8px 8px rgba(255, 255, 255, 0.02),
              0 8px 8px rgba(0, 0, 0, 0.5),
              inset 0 8px 8px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] #clock-widget .clock::before {
  background-color: #cccccc;
  border-color: #1e1f26;
}

[data-theme="dark"] #clock-widget .hour::before {
  background-color: #dddddd;
}

[data-theme="dark"] #clock-widget .min::before {
  background-color: #aaaaaa;
}

/* ==================== 暗色主题卡片半透明化 ==================== */

/*
 * 仅暗色主题下生效，将卡片背景从纯色改为半透明，
 * 让页面背景透过卡片呈现层次感。
 * 覆盖 CSS 变量方式，统一影响所有使用 var(--card-bg) 的元素：
 *   - 侧边栏卡片 (.card-widget)
 *   - 文章列表卡片 (.recent-post-item)
 *   - 内容区域 (.layout > div:first-child)
 *   - 时间线、归档等页面卡片
 * 卡片内的文字/图片/子元素保持完全不透明，仅背景受影响。
 */

[data-theme="dark"] {
  --card-bg: rgba(18, 18, 18, 0.97);
  --sidebar-bg: rgba(18, 18, 18, 0.97);
}

/* ==================== 暗色主题卡片提升层级（遮盖背景流星） ==================== */

/*
 * 将卡片容器提升到 universe canvas (z-index: 0) 之上，
 * 使流星粒子被卡片遮挡，不影响文章阅读。
 * 不提升 #page-header (Banner)，保持其透明可见流星效果。
 * 不提升 #nav (z-index: 91)，避免干扰导航栏。
 */
[data-theme="dark"] .layout > div:first-child,
[data-theme="dark"] #aside-content .card-widget {
  position: relative;
  z-index: 1;
}

/* ==================== 暗色主题悬浮光晕 ==================== */

/*
 * 仅暗色主题下生效，亮色主题保持默认阴影。
 * 通过父级 ID 提升选择器权重。
 *
 *   #aside-content .card-widget      — 右侧边栏卡片
 *   #recent-posts .recent-post-item  — 左侧文章列表卡片
 *   .hover-glow-card                 — 通用手动添加类
 */

[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] #recent-posts .recent-post-item,
[data-theme="dark"] .hover-glow-card {
  transition: box-shadow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="dark"] #aside-content .card-widget:hover,
[data-theme="dark"] #recent-posts .recent-post-item:hover,
[data-theme="dark"] .hover-glow-card:hover {
  /* 霓虹边框环 — 夜风青蓝 */
  border-color: rgba(56, 189, 248, 0.55);
  /* 三层外发光：冰蓝亮核 → 蒂芙尼青过渡 → 边缘淡出 + 内侧微光 */
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.55),
              0 0 18px rgba(56, 189, 248, 0.25),
              0 0 34px rgba(45, 212, 191, 0.07),
              inset 0 0 12px rgba(56, 189, 248, 0.18);
}

/* ==================== 隐藏 GitHub 日历悬浮提示 ==================== */
.gitmessage {
  display: none !important;
}

/* ==================== 亮色/暗色主题网页背景 ==================== */

/* 亮色主题：使用 CSS 渐变替代背景图片 */
body {
  background-color: hsla(39,80%,96%,1);
  background-image:
    radial-gradient(at 86% 22%, hsla(35,84%,86%,0.38) 0px, transparent 50%),
    radial-gradient(at 41% 85%, hsla(48,89%,90%,0.48) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(190,45%,86%,0.18) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(48,0%,98%,0.75) 0px, transparent 50%);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ==================== 亮色主题 Banner 覆盖 ==================== */

/*
 * 覆盖 Butterfly 主题的 default_top_img 内联样式，
 * 使用 light-top-banner.jpg 作为亮色主题的 Banner 背景图。
 * 暗色主题的 Banner 通过下方 [data-theme="dark"] 选择器单独覆盖。
 */
#page-header {
  background-image: url('/img/light-top-banner.jpg') !important;
  background-position: center center;
  background-size: cover;
}

/* ==================== 暗色主题 Banner 覆盖 ==================== */

/*
 * Butterfly 主题的 default_top_img 会渲染为 #page-header 的 inline style，
 * 亮色/暗色主题共用同一个。这里用 !important 为暗色主题单独覆盖 Banner 样式。
 */
[data-theme="dark"] #page-header {
  background: linear-gradient(135deg, #0d1117 0%, #0d1117 25%, #132e38 55%, #1b5266 85%, #22738f 100%) !important;
}

/* 暗色主题：使用 CSS 渐变替代背景图片 */
[data-theme="dark"] body {
  background-color: hsla(220, 30%, 8%, 1);
  background-image:
    radial-gradient(at 16% 13%, hsla(213, 39%, 12%, 1) 0px, transparent 50%),
    radial-gradient(at 68% 45%, hsla(163, 85%, 50%, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(243, 65%, 25%, 0.4) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(183, 80%, 30%, 0.5) 0px, transparent 50%);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ==================== 主题切换双图标交叉淡入淡出 ==================== */

/* 按钮 SVG 容器设为相对定位，使副图标可叠放 */
.icon-V svg {
  position: relative;
}

/* 主图标过渡 */
#modeicon.modeicon-fade {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 副图标：绝对定位叠在主图标上方，默认隐藏 */
#modeicon-secondary {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 副图标显/隐状态 */
.modeicon-hidden {
  opacity: 0;
  pointer-events: none;
}
.modeicon-showing {
  opacity: 1;
  pointer-events: auto;
}
/* 主图标淡出 */
#modeicon.modeicon-hiding {
  opacity: 0;
}