/* =============================================
   Butterfly 主题自定义样式 - custom.css
   ============================================= */

/* -----------------------------------------------
   1. 代码块样式
----------------------------------------------- */

/* 代码块顶部工具栏背景 */
#article-container figure.highlight > .highlight-tools {
    background: #2d2d2d !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 语言标识样式 */
#article-container figure.highlight .code-lang {
    text-transform: uppercase;
    font-weight: bold;
    color: #d0d0d0;
    font-size: 13px;
}

/* 复制按钮样式 */
#article-container figure.highlight .copy-notice {
    background-color: #ff7242 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 12px;
}

/* 复制按钮悬停效果 */
#article-container figure.highlight .copy-notice:hover {
    background-color: #e65a2d !important;
}

/* -----------------------------------------------
   2. 文字排版优化
----------------------------------------------- */

/* 全局字体渲染优化 */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 文章正文行距 */
#article-container p {
    line-height: 1.85;
}

/* -----------------------------------------------
   3. 首页文章卡片：Apple 风格液态玻璃
----------------------------------------------- */

#recent-posts .recent-post-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.96), transparent 34%),
        radial-gradient(circle at 92% 110%, rgba(100, 190, 255, 0.18), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(245, 250, 255, 0.48)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(130, 170, 210, 0.14),
        0 14px 42px rgba(31, 50, 76, 0.10),
        0 2px 8px rgba(31, 50, 76, 0.05) !important;
    -webkit-backdrop-filter: blur(24px) saturate(175%);
    backdrop-filter: blur(24px) saturate(175%);
    transition:
        transform 0.35s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* 玻璃表面的柔和折射高光 */
#recent-posts .recent-post-item::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -45% -20%;
    background:
        linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.62) 47%, transparent 60%),
        radial-gradient(circle at 25% 35%, rgba(130, 210, 255, 0.22), transparent 30%);
    opacity: 0.62;
    transform: translate3d(-9%, -2%, 0) rotate(-2deg);
    transition: transform 0.65s cubic-bezier(.2, .8, .2, 1), opacity 0.35s ease;
    pointer-events: none;
}

#recent-posts .recent-post-item .recent-post-info {
    position: relative;
    z-index: 1;
}

#recent-posts .recent-post-item:hover {
    transform: translateY(-7px) scale(1.006);
    border-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(104, 170, 230, 0.18),
        0 22px 54px rgba(31, 76, 120, 0.16),
        0 5px 16px rgba(31, 50, 76, 0.08) !important;
}

#recent-posts .recent-post-item:hover::before {
    opacity: 0.9;
    transform: translate3d(12%, 2%, 0) rotate(2deg);
}

/* 首页文章标题：加大、加粗，提升视觉层级 */
#recent-posts .recent-post-item .recent-post-info > .article-title {
    font-size: clamp(1.85rem, 2.25vw, 2.3rem) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
}

@media screen and (max-width: 768px) {
    #recent-posts .recent-post-item .recent-post-info > .article-title {
        font-size: 1.55rem !important;
        line-height: 1.35 !important;
    }
}

/* -----------------------------------------------
   4. 侧边栏卡片：与首页统一的磨砂玻璃
----------------------------------------------- */

#aside-content .card-widget {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.95), transparent 36%),
        radial-gradient(circle at 100% 105%, rgba(94, 188, 255, 0.22), transparent 45%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(239, 248, 255, 0.38)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(116, 178, 226, 0.16),
        0 16px 42px rgba(31, 71, 108, 0.12),
        0 3px 10px rgba(31, 50, 76, 0.05) !important;
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#aside-content .card-widget::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -42% -35%;
    background:
        linear-gradient(118deg, transparent 36%, rgba(255, 255, 255, 0.58) 49%, transparent 62%),
        radial-gradient(circle at 28% 35%, rgba(121, 209, 255, 0.24), transparent 30%),
        radial-gradient(circle at 75% 70%, rgba(190, 150, 255, 0.13), transparent 34%);
    opacity: 0.72;
    transform: translate3d(-12%, -3%, 0) rotate(-3deg);
    transition: transform 0.65s cubic-bezier(.2, .8, .2, 1), opacity 0.35s ease;
    pointer-events: none;
}

#aside-content .card-widget::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.68),
        inset -1px -1px 0 rgba(92, 158, 214, 0.08);
    pointer-events: none;
}

#aside-content .card-widget > * {
    position: relative;
    z-index: 1;
}

#aside-content .card-widget:hover {
    transform: translateY(-4px) scale(1.008);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(116, 178, 226, 0.20),
        0 22px 52px rgba(31, 92, 140, 0.17),
        0 5px 14px rgba(31, 50, 76, 0.07) !important;
}

#aside-content .card-widget:hover::before {
    opacity: 0.96;
    transform: translate3d(11%, 2%, 0) rotate(2deg);
}

/* 作者头像与频道按钮也使用玻璃高光 */
#aside-content .card-info .avatar-img {
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.90);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(164, 215, 255, 0.24));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 10px 26px rgba(48, 107, 154, 0.15);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
}

#aside-content #card-info-btn {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 12px;
    background:
        linear-gradient(115deg, rgba(73, 177, 245, 0.90), rgba(105, 151, 255, 0.78)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 10px 24px rgba(50, 137, 210, 0.23);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
}

/* RackNerd 侧栏推广横幅：替换原归档卡片位置 */
#aside-content .side-media-card {
    order: 0;
    padding: 16px !important;
    text-align: center;
}

#aside-content .side-media-link {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 12px 28px rgba(30, 75, 118, 0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#aside-content .side-media-link:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 17px 36px rgba(30, 94, 148, 0.24);
}

#aside-content .side-media-link img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 6 / 5;
    border-radius: 15px;
    object-fit: cover;
}

#aside-content .side-media-note {
    margin-top: 9px;
    color: var(--font-color);
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    opacity: 0.58;
}

html[data-theme='dark'] #aside-content .side-media-link {
    border-color: rgba(170, 215, 255, 0.24);
    background: rgba(20, 29, 43, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 32px rgba(0, 0, 0, 0.34);
}

/* 深色模式：保留通透感，同时保证文字对比度 */
html[data-theme='dark'] #recent-posts .recent-post-item {
    border-color: rgba(170, 215, 255, 0.20) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(150, 205, 255, 0.15), transparent 34%),
        radial-gradient(circle at 92% 110%, rgba(99, 102, 241, 0.18), transparent 42%),
        linear-gradient(135deg, rgba(28, 36, 50, 0.74), rgba(18, 25, 38, 0.60)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24),
        0 16px 44px rgba(0, 0, 0, 0.30) !important;
}

html[data-theme='dark'] #aside-content .card-widget {
    border-color: rgba(170, 215, 255, 0.18) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(142, 207, 255, 0.14), transparent 36%),
        radial-gradient(circle at 100% 105%, rgba(94, 110, 255, 0.18), transparent 45%),
        linear-gradient(145deg, rgba(29, 38, 53, 0.68), rgba(18, 25, 38, 0.52)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 38px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme='dark'] #aside-content .card-info .avatar-img {
    border-color: rgba(174, 218, 255, 0.25);
    background: linear-gradient(145deg, rgba(98, 169, 224, 0.18), rgba(22, 30, 44, 0.56));
}

/* 不支持背景模糊时，使用更实的背景保证可读性 */
@supports not (backdrop-filter: blur(1px)) {
    #recent-posts .recent-post-item,
    #aside-content .card-widget {
        background: rgba(250, 252, 255, 0.96) !important;
    }

    html[data-theme='dark'] #recent-posts .recent-post-item,
    html[data-theme='dark'] #aside-content .card-widget {
        background: rgba(24, 32, 46, 0.96) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #recent-posts .recent-post-item,
    #recent-posts .recent-post-item::before,
    #aside-content .card-widget {
        transition: none !important;
    }
}

/* -----------------------------------------------
   5. 导航栏优化
----------------------------------------------- */

/* 导航栏毛玻璃效果（滚动后） */
#nav.nav-fixed {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 桌面端导航文字与图标：更大、更醒目 */
@media screen and (min-width: 1101px) {
    #nav {
        font-size: clamp(1.25rem, 1.3vw, 1.45rem) !important;
    }

    #nav #menus .menus_item {
        padding-left: 20px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
    #nav {
        font-size: 1.15rem !important;
    }

    #nav #menus .menus_item {
        padding-left: 13px;
    }
}

#nav #menus .site-page,
#nav #search-button .site-page {
    font-weight: 600;
    letter-spacing: 0.2px;
}

#nav #menus .site-page > i,
#nav #search-button .site-page > i {
    margin-right: 5px;
    font-size: 1.05em;
}

/* 白天 / 黑暗模式：始终显示的液态玻璃切换按钮 */
#rightside #darkmode {
    position: relative;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 13px;
    color: #354256;
    background:
        radial-gradient(circle at 25% 10%, rgba(255, 255, 255, 0.96), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.70), rgba(200, 230, 255, 0.46));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 9px 24px rgba(34, 83, 126, 0.20);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

#rightside #darkmode:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 13px 30px rgba(34, 105, 165, 0.28);
}

/* 白天显示月亮：点击切换到黑暗模式 */
#rightside #darkmode i::before {
    content: '\f186';
}

/* 黑暗模式显示太阳：点击切换回白天模式 */
html[data-theme='dark'] #rightside #darkmode {
    border-color: rgba(175, 216, 255, 0.30);
    color: #ffd76a;
    background:
        radial-gradient(circle at 22% 8%, rgba(116, 187, 255, 0.24), transparent 43%),
        linear-gradient(145deg, rgba(35, 47, 67, 0.82), rgba(18, 25, 39, 0.70));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 10px 28px rgba(0, 0, 0, 0.38);
}

html[data-theme='dark'] #rightside #darkmode i::before {
    content: '\f185';
}

/* -----------------------------------------------
   6. 滚动条美化
----------------------------------------------- */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #49B1F5;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a9de0;
}

/* -----------------------------------------------
   7. 链接悬停效果
----------------------------------------------- */

#article-container a:not(.btn):not(.tag) {
    transition: color 0.2s ease, border-bottom 0.2s ease;
}

/* -----------------------------------------------
   8. 图片优化
----------------------------------------------- */

#article-container img {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#article-container img:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* -----------------------------------------------
   9. 引用块样式
----------------------------------------------- */

#article-container blockquote {
    border-radius: 0 8px 8px 0;
}

/* -----------------------------------------------
   10. 标签页 / 分类页优化
----------------------------------------------- */

#tag-cloud-list a:hover,
#category-list a:hover {
    transition: all 0.2s ease;
}

/* -----------------------------------------------
   11. 文章横幅 & 主页横幅 — 赛博朋克（明亮版）
----------------------------------------------- */

/* 关键帧：RGB 扫描线 */
@keyframes cyber-scan {
    0%   { top: -4px; opacity: 1; }
    100% { top: 100%; opacity: 0.2; }
}

/* 关键帧：标题入场 */
@keyframes cyber-in {
    0%   { opacity: 0; transform: translateX(-20px) skewX(-4deg); }
    60%  { opacity: 1; transform: translateX(3px) skewX(0.5deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0deg); }
}

/* 关键帧：霓虹竖条流光 */
@keyframes cyber-neon-flow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}

/* 关键帧：左下角光晕脉冲 */
@keyframes cyber-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 0.8;  transform: scale(1.08); }
}

/* ── 通用背景（文章页 + 主页共用） ── */
#page-header.post-bg,
#page-header:not(.post-bg) {
    background:
        /* 左下角洋红光晕 */
        radial-gradient(ellipse 70% 60% at 10% 90%,  rgba(255, 60, 180, 0.45) 0%, transparent 65%),
        /* 右上角青蓝光晕 */
        radial-gradient(ellipse 60% 55% at 90% 10%,  rgba(0, 200, 255, 0.40) 0%, transparent 65%),
        /* 中央偏右紫色晕 */
        radial-gradient(ellipse 50% 50% at 65% 55%,  rgba(120, 0, 220, 0.30) 0%, transparent 60%),
        /* 底色：深蓝紫，比原来亮很多 */
        linear-gradient(155deg, #1a0538 0%, #0e1a40 45%, #1a0538 100%)
        !important;
    position: relative;
    overflow: hidden;
}

/* ── 网格底纹（更明显） ── */
#page-header.post-bg::before,
#page-header:not(.post-bg)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 100, 220, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 200, 255, 0.12) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* ── RGB 扫描线 ── */
#page-header.post-bg::after,
#page-header:not(.post-bg)::after {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 100%;
    height: 5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 80, 200, 0.9) 25%,
        rgba(80, 220, 255, 1.0) 50%,
        rgba(255, 80, 200, 0.9) 75%,
        transparent 100%
    );
    filter: blur(2px);
    animation: cyber-scan 3.5s linear infinite;
    pointer-events: none;
    z-index: 3;
}

/* ── 文章页：信息区 ── */
#page-header.post-bg #post-info {
    position: absolute;
    z-index: 2;
}

/* 标题左侧霓虹竖条 */
#page-header.post-bg #post-info h1.post-title {
    border-left: 4px solid #ff50c8;
    padding-left: 14px;
    color: #ffffff !important;
    font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
    line-height: 1.25;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    text-shadow:
        0  0  8px  rgba(255, 255, 255, 1.0),
        0  0  20px rgba(80, 220, 255, 0.9),
        0  0  40px rgba(255, 80, 200, 0.6) !important;
}

/* ── 文章元信息（使用模板真实类名）── */
#page-header.post-bg #post-info #post-meta,
#page-header.post-bg #post-info #post-meta *,
#page-header.post-bg #post-info #post-meta i {
    color: rgba(160, 230, 255, 0.95) !important;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* ── 遮罩层（更轻，不压暗背景） ── */
#page-header.post-bg .header-mask,
#page-header:not(.post-bg) .header-mask {
    background: linear-gradient(
        to bottom,
        rgba(15, 5, 40, 0.35) 0%,
        transparent 45%,
        rgba(15, 5, 40, 0.5)  100%
    ) !important;
}

/* ── 主页：博客标题 ── */
#page-header:not(.post-bg) #site-name a,
#page-header:not(.post-bg) .site-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow:
        0  0  10px rgba(255, 255, 255, 1.0),
        0  0  24px rgba(80, 220, 255, 0.9),
        0  0  48px rgba(255, 80, 200, 0.6) !important;
}

/* ── 主页：副标题打字机 ── */
#page-header:not(.post-bg) #site-subtitle,
#page-header:not(.post-bg) .site-subtitle,
#page-header:not(.post-bg) .typed-cursor {
    color: rgba(140, 230, 255, 1.0) !important;
    text-shadow: 0 0 12px rgba(80, 220, 255, 0.8), 0 0 24px rgba(255, 80, 200, 0.4) !important;
    letter-spacing: 1px;
}

/* 暗色模式保持一致 */
[data-theme='dark'] #page-header.post-bg,
[data-theme='dark'] #page-header:not(.post-bg) {
    background:
        radial-gradient(ellipse 70% 60% at 10% 90%,  rgba(200, 40, 150, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 60% 55% at 90% 10%,  rgba(0, 160, 220, 0.30) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 65% 55%,  rgba(90, 0, 180, 0.25) 0%, transparent 60%),
        linear-gradient(155deg, #100328 0%, #080f28 45%, #100328 100%)
        !important;
}