/* ============================================================
   FoxBlog · base.css
   设计令牌 / 重置 / 排版 / 通用工具类
   三种外观模式：浅色(默认) · 深色 · 护眼
   主色取自站点主理人形象（白·琥珀橙·青蓝·炭灰）
   ============================================================ */

/* ---------- 1. 设计令牌（浅色为默认） ---------- */
:root {
    /* 布局 */
    --fx-maxw: 1180px;
    --fx-gap: 26px;
    --fx-radius-s: 10px;
    --fx-radius: 18px;
    --fx-radius-l: 26px;
    --fx-nav-h: 68px;

    /* 字体（全部为开源可商用字体，见页脚许可说明） */
    --fx-font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
        "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
        -apple-system, "Segoe UI", Roboto, sans-serif;
    --fx-font-display: "LXGW WenKai", "Noto Serif SC", "Source Han Serif SC",
        Georgia, "Songti SC", serif;
    --fx-font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;

    /* 色彩（浅色） */
    --fx-bg: #faf7f2;
    --fx-bg-2: #f3eee6;
    --fx-surface: #ffffff;
    --fx-glass: rgba(255, 255, 255, .62);
    --fx-glass-strong: rgba(255, 255, 255, .82);
    --fx-border: rgba(24, 22, 18, .09);
    --fx-border-strong: rgba(24, 22, 18, .16);
    --fx-text: #1b1d22;
    --fx-text-2: #4a4f5c;
    --fx-text-3: #7b8291;
    --fx-accent: #e07f18;
    --fx-accent-2: #2f9ec4;
    --fx-accent-soft: rgba(224, 127, 24, .12);
    --fx-shadow: 0 10px 34px -14px rgba(48, 38, 24, .28);
    --fx-shadow-lg: 0 26px 60px -22px rgba(48, 38, 24, .34);
    --fx-glow: 0 0 0 1px rgba(224, 127, 24, .28), 0 12px 40px -18px rgba(224, 127, 24, .55);
    --fx-blur: 20px;
    --fx-sat: 165%;

    /* 世界地图配色（访问越多越深） */
    --fx-map-base: #e8e1d5;
    --fx-map-line: rgba(24, 22, 18, .10);
    --fx-heat-1: #fbe2c4;
    --fx-heat-2: #f8c98f;
    --fx-heat-3: #f2a552;
    --fx-heat-4: #e8842a;
    --fx-heat-5: #cf6a12;

    /* 排版尺度 */
    --fx-fs-body: 16.5px;
    --fx-lh-body: 1.85;
}

/* ---------- 2. 深色模式 ---------- */
:root[data-theme="dark"] {
    --fx-bg: #0b0d11;
    --fx-bg-2: #101419;
    --fx-surface: #151a21;
    --fx-glass: rgba(22, 27, 34, .55);
    --fx-glass-strong: rgba(22, 27, 34, .8);
    --fx-border: rgba(255, 255, 255, .10);
    --fx-border-strong: rgba(255, 255, 255, .19);
    --fx-text: #e9ecf2;
    --fx-text-2: #adb6c6;
    --fx-text-3: #7d879a;
    --fx-accent: #ffb02e;
    --fx-accent-2: #56cdf0;
    --fx-accent-soft: rgba(255, 176, 46, .14);
    --fx-shadow: 0 12px 40px -16px rgba(0, 0, 0, .75);
    --fx-shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .85);
    --fx-glow: 0 0 0 1px rgba(255, 176, 46, .3), 0 14px 46px -18px rgba(255, 176, 46, .5);
    --fx-map-base: #232a33;
    --fx-map-line: rgba(255, 255, 255, .08);
    --fx-heat-1: #4a3a1d;
    --fx-heat-2: #6f4d1f;
    --fx-heat-3: #9a6320;
    --fx-heat-4: #c9861f;
    --fx-heat-5: #ffb02e;
}

/* ---------- 3. 护眼模式（暖米黄 · 低蓝光 · 低对比） ---------- */
:root[data-theme="eye"] {
    --fx-bg: #eee6d3;
    --fx-bg-2: #e5dac2;
    --fx-surface: #f7f1e2;
    --fx-glass: rgba(247, 241, 226, .66);
    --fx-glass-strong: rgba(250, 245, 233, .86);
    --fx-border: rgba(78, 66, 42, .14);
    --fx-border-strong: rgba(78, 66, 42, .24);
    --fx-text: #38321f;
    --fx-text-2: #5e5539;
    --fx-text-3: #857a5c;
    --fx-accent: #a9701f;
    --fx-accent-2: #4c8577;
    --fx-accent-soft: rgba(169, 112, 31, .13);
    --fx-shadow: 0 10px 32px -16px rgba(80, 66, 36, .3);
    --fx-shadow-lg: 0 26px 56px -24px rgba(80, 66, 36, .36);
    --fx-glow: 0 0 0 1px rgba(169, 112, 31, .26), 0 12px 38px -18px rgba(169, 112, 31, .42);
    --fx-map-base: #ded3b8;
    --fx-map-line: rgba(78, 66, 42, .16);
    --fx-heat-1: #efd9b4;
    --fx-heat-2: #e3bd85;
    --fx-heat-3: #cf9a4d;
    --fx-heat-4: #b87f2c;
    --fx-heat-5: #9a6716;
}

/* ---------- 4. 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--fx-bg);
    color: var(--fx-text);
    font-family: var(--fx-font-sans);
    font-size: var(--fx-fs-body);
    line-height: var(--fx-lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background-color .45s ease, color .45s ease;
}

/* 三模式切换时的整体过渡（避免个别元素闪烁） */
body, body * {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: .3s;
    transition-timing-function: ease;
}
body * { transition-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
    body * { transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.35; }
p { margin: 0 0 1.1em; }
hr { border: 0; border-top: 1px solid var(--fx-border); margin: 2.2rem 0; }

::selection { background: var(--fx-accent-soft); color: var(--fx-text); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--fx-border-strong);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fx-accent); background-clip: padding-box; }

/* ---------- 5. 背景层：极光光斑 + 粒子画布 ---------- */
.fx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fx-aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(42rem 30rem at 12% 8%, var(--fx-accent-soft), transparent 62%),
        radial-gradient(38rem 28rem at 88% 14%, color-mix(in srgb, var(--fx-accent-2) 16%, transparent), transparent 60%),
        radial-gradient(46rem 34rem at 50% 108%, color-mix(in srgb, var(--fx-accent) 12%, transparent), transparent 66%);
    filter: blur(6px);
    animation: fx-aurora-drift 26s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes fx-aurora-drift {
    0%   { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}
.fx-particles { position: absolute; inset: 0; }
.fx-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--fx-border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--fx-border) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    opacity: .5;
}

/* 页面主体需盖在背景层之上 */
.fx-page { position: relative; z-index: 1; }

/* ---------- 6. 文字美化（无版权限制的排版增强） ---------- */
.fx-gradient-text {
    background: linear-gradient(102deg,
        var(--fx-accent) 0%,
        color-mix(in srgb, var(--fx-accent) 62%, var(--fx-accent-2)) 46%,
        var(--fx-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.fx-display {
    font-family: var(--fx-font-display);
    font-weight: 700;
    letter-spacing: .012em;
}
/* 流光效果改为“推动渐变背景位置”，不再用 overflow 裁剪，
   避免中文字形的上缘与下缘被切掉（站名显示不全即由此修复） */
.fx-shine {
    display: inline-block;
    background-size: 240% 100%;
    background-position: 0% 50%;
    animation: fx-shine-flow 7s ease-in-out infinite;
}
@keyframes fx-shine-flow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
/* 逐字入场：由 JS 拆分字符后驱动 */
.fx-split-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(.42em) rotate(2deg);
    will-change: transform, opacity;
}
.fx-underline {
    position: relative;
}
.fx-underline::after {
    content: "";
    position: absolute;
    left: 0; bottom: -.18em;
    width: 100%; height: .5em;
    background: var(--fx-accent-soft);
    border-radius: .25em;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.22, .8, .24, 1);
}
.fx-underline:hover::after { transform: scaleX(1); }

/* ---------- 7. 工具类 ---------- */
.fx-wrap { width: 100%; max-width: var(--fx-maxw); margin: 0 auto; padding: 0 22px; }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-muted { color: var(--fx-text-3); }
.fx-center { text-align: center; }
.fx-stack { display: flex; flex-direction: column; }
.fx-row { display: flex; align-items: center; }
.fx-row-gap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fx-mt-1 { margin-top: .6rem; } .fx-mt-2 { margin-top: 1.2rem; } .fx-mt-3 { margin-top: 2rem; }
.fx-hidden { display: none !important; }

/* 玻璃卡片基类 */
.fx-glass {
    position: relative;
    background: var(--fx-glass);
    backdrop-filter: blur(var(--fx-blur)) saturate(var(--fx-sat));
    -webkit-backdrop-filter: blur(var(--fx-blur)) saturate(var(--fx-sat));
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow);
}
/* 顶部高光细线，提升“高级感” */
.fx-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .38), transparent 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* 入场动画（滚动到视口时触发，由 JS 添加 .is-in 类） */
.fx-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, .8, .24, 1), transform .7s cubic-bezier(.22, .8, .24, 1);
}
.fx-reveal.is-in { opacity: 1; transform: none; }