/* ═══════════════════════════════════════════
   sprigh.com — 自定义视觉样式
   基于 Butterfly 主题，青绿色二次元风格
   ═══════════════════════════════════════════ */

/* ── CSS 变量体系 ────────────────────────── */
:root {
  --primary: #2E9D9D;
  --primary-dark: #248585;
  --primary-light: #4AB8B8;
  --bg: #ffffff;
  --bg-alt: #f8fafa;
  --text: #4c6280;
  --text-secondary: #67748e;
  --text-muted: #99a9bf;
  --card-bg: #ffffff;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  --card-hover-lift: -4px;
  --wave-fill: #ffffff;
  --nav-blur-bg: rgba(255, 255, 255, 0.75);
  --border-subtle: rgba(0, 0, 0, 0.06);
}

/* ── 深色模式变量 ────────────────────────── */
[data-theme='dark'] {
  --primary: #4AB8B8;
  --primary-dark: #3AA0A0;
  --primary-light: #6CCCCC;
  --bg: #1A1A1A;
  --bg-alt: #222222;
  --text: #b0c4d8;
  --text-secondary: #8899aa;
  --text-muted: #667788;
  --card-bg: #242424;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
  --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
  --wave-fill: #1A1A1A;
  --nav-blur-bg: rgba(26, 26, 26, 0.80);
  --border-subtle: rgba(255, 255, 255, 0.06);
}

/* ── 全局过渡（深色模式切换无闪烁）────── */
body, #page-header, #nav, .recent-post-item, .card-widget,
#footer, #aside-content, .layout {
  transition: background-color .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .3s ease;
}

/* ── 字体与排版 ──────────────────────────── */
body {
  font-family: Inter, PingFang SC, Microsoft YaHei, Noto Sans CJK, sans-serif;
  line-height: 1.75;
  font-size: 15px;
  color: var(--text);
}

p { margin-bottom: 1.5em; color: var(--text-secondary); }

/* ── 主色调覆盖 Butterfly 默认蓝色 ────────── */
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
#nav .menus_item .site-page:hover,
#nav .menus_item .site-page.group:hover { color: var(--primary); }
#aside-content .card-widget .item-headline {
  color: var(--primary-dark);
  border-left: 3px solid var(--primary);
  padding-left: 10px;
}
::-webkit-scrollbar-thumb { background-color: var(--primary); }
.selection, ::selection { background: var(--primary); color: #fff; }

/* ── 波浪 SVG Banner ─────────────────────── */
#page-header.full_page {
  position: relative;
}
#page-header.full_page::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  background: var(--wave-fill);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath d='M0 40 C240 0 480 80 720 40 C960 0 1200 80 1440 40 L1440 80 L0 80 Z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath d='M0 40 C240 0 480 80 720 40 C960 0 1200 80 1440 40 L1440 80 L0 80 Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: cover;
  z-index: 2;
}

/* ── 卡片 12px 圆角 + hover 上浮 4px ──────── */
#recent-posts .recent-post-item,
#aside-content .card-widget {
  border-radius: 12px !important;
  box-shadow: var(--card-shadow) !important;
  background: var(--card-bg);
  transition: transform .3s cubic-bezier(.215,.61,.355,1),
              box-shadow .3s cubic-bezier(.215,.61,.355,1),
              background-color .3s ease;
  border: 1px solid var(--border-subtle);
}
#recent-posts .recent-post-item:hover {
  transform: translateY(var(--card-hover-lift));
  box-shadow: var(--card-hover-shadow) !important;
}
#aside-content .card-widget:hover {
  transform: translateY(var(--card-hover-lift));
  box-shadow: var(--card-hover-shadow) !important;
}

/* ── 导航栏 hover 淡入上移 ───────────────── */
#nav .menus_item > .site-page {
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}
#nav .menus_item > .site-page:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
#nav .menus_item .menus_item_child {
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-subtle);
}

/* ── 导航栏毛玻璃 ─────────────────────────── */
.nav-fixed #nav {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background: var(--nav-blur-bg) !important;
}
#nav {
  transition: background .3s ease, box-shadow .3s ease;
}

/* ── 小猫图标晃动动画 ────────────────────── */
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(6deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-6deg); }
}
#aside-content .avatar-img img {
  transition: transform .3s;
}
#aside-content .card-info:hover .avatar-img img {
  animation: sway .8s ease-in-out 3;
}

/* ── 标签云样式 ──────────────────────────── */
#aside-content .card-tags .card-tag-cloud a {
  background: rgba(46, 157, 157, 0.08);
  border-radius: 8px;
  padding: 4px 12px;
  color: var(--primary);
  transition: background .2s, transform .2s;
}
#aside-content .card-tags .card-tag-cloud a:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

/* ── 公告栏 ──────────────────────────────── */
#aside-content .card-announcement .announcement_content {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── 页脚 ────────────────────────────────── */
#footer {
  background: var(--bg-alt);
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}

/* ── 分类过滤标签栏 ────────────────────── */
.category-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 20px;
  justify-content: center;
}
.category-filter-btn {
  padding: 6px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all .3s ease;
  font-family: inherit;
}
.category-filter-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 157, 157, 0.15);
}
.category-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(46, 157, 157, 0.25);
}
.recent-post-item {
  transition: opacity .35s ease, transform .3s ease;
}
.recent-post-item[style*="display: none"] {
  opacity: 0;
  transform: translateY(12px);
}