/* ============================================================
   theme.css —— lune 定制主题「线条终端风」
   最后加载，覆盖模板默认样式。原版文件未改动，删除本文件引用即可还原。
   ============================================================ */

/* ---------- 强调色：只改这一组变量即可全站换色 ---------- */
:root {
    /* 冷蓝（默认） */
    --accent: #6ee7ff;
    --accent-rgb: 110, 231, 255;

    /* 荧光绿：--accent: #7ef9c6; --accent-rgb: 126, 249, 198; */
    /* 琥珀橙：--accent: #fbbf24; --accent-rgb: 251, 191, 36; */
    /* 纯白：  --accent: #f5f5f5; --accent-rgb: 245, 245, 245; */

    --accent-glow: rgba(var(--accent-rgb), 0.12);
    --accent-glow-strong: rgba(var(--accent-rgb), 0.25);

    /* 更深邃的底色 */
    --site-bg-start: #05080d;
    --site-bg-end: #0b1119;

    /* 等宽字体栈（终端感） */
    --mono: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code",
            SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* 鼠标跟随微光位置（theme.js 驱动） */
    --mx: 50vw;
    --my: 30vh;
}

/* ---------- 背景：干净深邃 + 鼠标微光（不盖后台自定义背景图） ---------- */
body {
    background: linear-gradient(160deg, var(--site-bg-start), var(--site-bg-end));
}

/* 去掉灰色斜条纹，还原通透感 */
.pattern-bg {
    background: none !important;
}

/* 减淡灰色罩层，让粒子和背景透出来（不带 !important，后台自定义背景图模式下由内联样式接管） */
.bg-blur {
    background: rgba(4, 7, 11, 0.18);
}

/* 粒子画布置于罩层之上、内容之下 */
.dust-canvas {
    z-index: 1;
}

.bg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mx) var(--my),
                rgba(var(--accent-rgb), 0.07), transparent 65%);
    transition: background 0.15s linear;
}

/* ---------- 杀死彩虹渐变：标题/副标题统一单色 ---------- */
.title,
.subtitle-name {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
    color: var(--accent) !important;
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}

.title-prefix,
.subtitle-prefix {
    color: var(--text-muted) !important;
}

/* 标题改等宽字体 */
.title-wrap,
.subtitle-wrap {
    font-family: var(--mono) !important;
    letter-spacing: 0.5px;
}

/* ---------- 隐藏彩色像素字横幅 ---------- */
.pixel-banner {
    display: none !important;
}

/* ---------- 首屏：终端提示符行 ---------- */
.hero-prompt {
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 14px;
    user-select: none;
}

.hero-prompt .hp-user { color: var(--accent); }
.hero-prompt .hp-path { color: #8ea2b5; }
.hero-prompt .hp-dollar { color: var(--accent); margin: 0 6px 0 2px; }

/* 打字光标 */
.typing-cursor::after {
    content: "▍";
    color: var(--accent);
    margin-left: 2px;
    animation: cursorBlink 0.9s steps(1) infinite;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ---------- 卡片「去玻璃、线条化」 ---------- */
.intro-card, .skills-card, .projects-card, .posts-card,
.shop-card, .comms-card, .replies-card, .terminal-section {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 28px 4px !important;
}

.intro-card:hover, .skills-card:hover, .projects-card:hover,
.posts-card:hover, .comms-card:hover, .replies-card:hover {
    background: transparent !important;
    border-color: rgba(var(--accent-rgb), 0.18) !important;
    box-shadow: none !important;
}

.intro-card::before, .skills-card::before, .projects-card::before,
.posts-card::before, .comms-card::before, .replies-card::before {
    display: none !important;
}

/* ---------- 区块标题：终端注释风格 + 强调色短线 ---------- */
.section-title {
    font-family: var(--mono) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

.section-title::before {
    content: "##";
    color: var(--accent);
    font-weight: 400;
    opacity: 0.85;
}

.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.4), transparent);
}

/* ---------- 终端区块：成为独立主角 ---------- */
.terminal-section {
    padding-top: 32px !important;
}

.terminal-card {
    background: rgba(5, 8, 11, 0.85) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.22) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.06),
                inset 0 0 60px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
    margin-top: 14px;
}

.terminal-header {
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12) !important;
}

.terminal-title {
    font-family: var(--mono) !important;
    color: var(--text-muted) !important;
}

.terminal-body {
    font-family: var(--mono) !important;
}

.terminal-body .terminal-command,
.terminal-body .terminal-prompt {
    color: var(--accent) !important;
}

.terminal-body .terminal-output {
    color: var(--text-muted) !important;
}

/* 终端窗口底部呼吸扫描线 */
.terminal-card::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
    animation: scanline 3.5s ease-in-out infinite;
}

@keyframes scanline {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.9; }
}

/* ---------- 项目：图标卡片 → 终端行列表 ---------- */
.projects-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 6px;
}

.project-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 14px !important;
    padding: 14px 6px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
    transition: padding-left 0.25s ease, background 0.25s ease;
}

.project-item::before {
    content: ">" !important;
    position: static !important;
    font-family: var(--mono);
    color: var(--accent) !important;
    background: none !important;
    opacity: 0.7;
    width: auto !important;
    height: auto !important;
}

.project-item:hover {
    background: rgba(var(--accent-rgb), 0.05) !important;
    padding-left: 14px !important;
    box-shadow: none !important;
}

.project-icon {
    display: none !important; /* 去掉模板感图标 */
}

.project-title {
    font-family: var(--mono) !important;
    font-size: 15px !important;
    color: var(--text) !important;
    min-width: 130px;
}

.project-desc {
    font-size: 13px !important;
    color: var(--text-muted) !important;
}

/* 悬停时标题亮起色 */
.project-item:hover .project-title {
    color: var(--accent) !important;
}

/* ---------- 技能：标签墙 → 终端 ls 输出 ---------- */
.skills-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    font-family: var(--mono);
}

.skill-tag {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 4px !important;
    color: var(--text-muted) !important;
    font-family: var(--mono) !important;
    font-size: 13px !important;
    padding: 5px 12px !important;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.skill-tag::before {
    content: "./";
    color: var(--accent);
    opacity: 0.7;
}

.skill-tag:hover {
    color: var(--accent) !important;
    border-color: rgba(var(--accent-rgb), 0.55) !important;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15) !important;
    background: transparent !important;
}

/* ---------- 社交图标跑马灯：去彩色 ---------- */
#appMarquee img,
#appMarquee svg {
    filter: grayscale(1) brightness(0.85);
    opacity: 0.7;
    transition: filter 0.25s, opacity 0.25s;
}

#appMarquee img:hover,
#appMarquee svg:hover {
    filter: none;
    opacity: 1;
}

/* ---------- 左侧导航：等宽 + 强调色指示 ---------- */
.radio-container label {
    font-family: var(--mono) !important;
    letter-spacing: 1px;
}

/* ---------- 头像：加一圈强调色描边 ---------- */
.avatar,
.mobile-avatar {
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45),
                0 0 24px rgba(var(--accent-rgb), 0.12) !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.25);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.45);
}

/* ---------- 选中文字 ---------- */
::selection {
    background: rgba(var(--accent-rgb), 0.28);
    color: #fff;
}

/* ---------- 移动端适配微调 ---------- */
@media (max-width: 860px) {
    .project-title { min-width: 96px; }
    .intro-card, .skills-card, .projects-card, .posts-card,
    .shop-card, .comms-card, .replies-card, .terminal-section {
        padding: 22px 2px !important;
    }
}

/* ============================================================
   v2 追加：粒子 / 涟漪 / 线条生长 / 播放器皮肤
   ============================================================ */

/* ---------- 粒子画布 ---------- */
.dust-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ---------- 点击涟漪 ---------- */
.click-ring {
    position: fixed;
    width: 8px;
    height: 8px;
    border: 1.5px solid;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    z-index: 9999;
    animation: ringExpand 0.6s ease-out forwards;
}

@keyframes ringExpand {
    to {
        transform: translate(-50%, -50%) scale(9);
        opacity: 0;
    }
}

.click-spark {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    animation: sparkFly 0.55s ease-out forwards;
}

@keyframes sparkFly {
    to {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3);
        opacity: 0;
    }
}

/* ---------- 区块标题线条生长 ---------- */
.section-title::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-title.section-seen::after {
    transform: scaleX(1);
}

/* ---------- uptime 行 ---------- */
.terminal-uptime {
    font-variant-numeric: tabular-nums;
}

/* ---------- 音乐播放器：冷蓝暗夜皮 ---------- */
.music-player {
    background: rgba(5, 8, 11, 0.82) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                0 0 20px rgba(var(--accent-rgb), 0.06) !important;
}

.music-btn {
    color: var(--text-muted) !important;
    transition: color 0.2s, transform 0.2s !important;
}

.music-btn:hover {
    color: var(--accent) !important;
    transform: scale(1.12);
}

.music-play-btn {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45));
}

.music-title {
    color: var(--text) !important;
    font-family: var(--mono) !important;
    font-size: 13px !important;
}

.music-artist {
    color: var(--text-muted) !important;
}

.music-progress-bar {
    background: var(--accent) !important;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6) !important;
}

/* 播放时封面呼吸光圈 */
.music-cover {
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25) !important;
}

/* ---------- 尊重系统"减弱动态效果"设置 ---------- */
@media (prefers-reduced-motion: reduce) {
    .terminal-card::after,
    .typing-cursor::after {
        animation: none !important;
    }
}