/* ============================================================
   动态首页补充样式
   ------------------------------------------------------------
   不侵入 vno.css，只追加后台可管理内容所需的样式：
   1. 视频背景层
   2. 友情链接区块
   3. 备案信息
   ============================================================ */

/* ---------- 1. 视频背景层 ----------
   层级关系（依赖 vno.css 中已有的定位）：
     #panel (.panel-cover)  position:fixed，形成包含块
     #bg-video              z-index:0   ← 本文件新增
     .panel-cover--overlay  z-index:1   ← 已有，黑色遮罩
     .panel-main__inner     z-index:800 ← 已有，文字内容
*/
#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    pointer-events: none;
    /* 部分移动端需要显式提升为合成层，避免视频被遮罩盖住 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 视频模式下不要用背景图，避免与视频叠加 */
body.bg-video-mode .panel-cover {
    background-image: none !important;
    background-color: #000;
}

/* 尊重系统「减弱动态效果」设置：不播放视频 */
@media (prefers-reduced-motion: reduce) {
    #bg-video {
        display: none;
    }
}

/* 小屏可选：如需省流量可在后台关闭视频，这里默认仍显示 */

/* ---------- 2. 友情链接 ---------- */
.friend-links {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    max-width: 100%;
}

.friend-links__title {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 12px;
}

.friend-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: center;
}

.friend-links__item {
    display: inline-block;
}

.friend-links__item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    color: #fff;
    opacity: 0.72;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.friend-links__item a:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
    text-decoration: none;
}

.friend-links__logo {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

/* ---------- 3. 备案信息 ---------- */
.beian {
    position: absolute;
    z-index: 900;
    bottom: 0;
    left: 5px;
    padding-bottom: 3px;
    padding-left: 18px;
    font-size: 12px;
    color: #fff;
    opacity: 0.6;
}

.beian a {
    color: #fff;
    margin-right: 10px;
    text-decoration: none;
}

.beian a:hover {
    text-decoration: underline;
}

/* ---------- 4. 主题配色（由后台「主题」设置驱动） ----------
   index.php 内联注入 --theme-accent，这里消费它。
   未启用主题时 --theme-accent 为 #666，效果接近中性，不会突兀。
*/
.ih-item.circle .img,
.ih-item.circle {
    box-shadow: none !important;
    background: transparent !important;
}

.js-avatar {
    border: 2px solid transparent;
    border-radius: 50%;
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.js-avatar.glowing {
    border-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 0 18px var(--theme-accent, rgba(255, 255, 255, 0.35));
    animation: dm-glow-pulse 2.4s ease-in-out infinite;
}

@keyframes dm-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 12px var(--theme-accent, rgba(255, 255, 255, 0.35));
    }
    50% {
        box-shadow: 0 0 26px var(--theme-accent, rgba(255, 255, 255, 0.5));
    }
}

/* 尊重「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    .js-avatar.glowing {
        animation: none;
    }
}

.panel-cover__title a:hover,
.navigation__item a:hover {
    text-shadow: 0 0 14px var(--theme-accent, rgba(255, 255, 255, 0.4));
}

/* ---------- 5. 背景音乐播放器 ----------
   固定在视口角落，不参与 #panel 的层叠，避免被遮罩影响。
   位置由 music-player--{position} 修饰类决定（后台可切换）。
*/
.music-player {
    position: fixed;
    z-index: 950; /* 高于 #panel(900)，低于微信弹窗(1000) */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 999px;
    background: rgba(20, 20, 24, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    transition: background 0.25s ease, opacity 0.25s ease;
    user-select: none;
}

.music-player--bottom-right { right: 20px; bottom: 20px; }
.music-player--bottom-left  { left: 20px;  bottom: 20px; }
.music-player--top-right    { right: 20px; top: 20px; }
.music-player--top-left     { left: 20px;  top: 20px; }

.music-player:hover,
.music-player.is-open {
    background: rgba(20, 20, 24, 0.66);
}

/* 主播放按钮 */
.music-player__btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.music-player__btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.06);
}

.music-player__ico--pause { display: none; }
.music-player.is-playing .music-player__ico--play  { display: none; }
.music-player.is-playing .music-player__ico--pause { display: inline; }

/* 播放中：按钮外圈随主题色呼吸 */
.music-player.is-playing .music-player__btn {
    box-shadow: 0 0 12px var(--theme-accent, rgba(255, 255, 255, 0.35));
}

/* 曲目信息 */
.music-player__meta {
    display: flex;
    flex-direction: column;
    max-width: 150px;
    overflow: hidden;
}

.music-player__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
}

.music-player__artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    opacity: 0.6;
}

/* 次级控制面板：默认折叠，悬停 / 触摸展开 */
.music-player__panel {
    display: none;
    align-items: center;
    gap: 8px;
}

.music-player:hover .music-player__panel,
.music-player.is-open .music-player__panel {
    display: flex;
}

.music-player__row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.music-player__mini {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #fff;
    opacity: 0.75;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.music-player__mini:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
}

.music-player__vol {
    -webkit-appearance: none;
    appearance: none;
    width: 72px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    outline: none;
    cursor: pointer;
}

.music-player__vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.music-player__vol::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* 自动播放被拦截 / 曲目全部失效时的提示态 */
.music-player.is-blocked .music-player__btn {
    animation: dm-music-nudge 1.6s ease-in-out infinite;
}

.music-player.is-error {
    opacity: 0.5;
}

@keyframes dm-music-nudge {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    50%      { box-shadow: 0 0 14px var(--theme-accent, rgba(255, 255, 255, 0.5)); }
}

@media (prefers-reduced-motion: reduce) {
    .music-player.is-blocked .music-player__btn { animation: none; }
}

/* ---------- 6. 小屏适配 ---------- */
@media screen and (max-width: 960px) {
    .beian {
        display: none;
    }

    .friend-links {
        margin-top: 18px;
    }

    .friend-links__item a {
        font-size: 12px;
        padding: 3px 8px;
    }

    /* 手机上播放器收得更紧凑，避免遮挡内容 */
    .music-player {
        padding: 6px 10px 6px 6px;
        gap: 8px;
    }

    .music-player__btn {
        width: 32px;
        height: 32px;
    }

    .music-player__meta {
        max-width: 96px;
    }

    .music-player__vol {
        width: 54px;
    }

    /* 触屏没有 hover，横屏窄边距；保持后台设定的四角位置不串 */
    .music-player--bottom-right {
        right: 12px;
        left: auto;
        bottom: 12px;
    }

    .music-player--bottom-left {
        left: 12px;
        right: auto;
        bottom: 12px;
    }
}

/* ---------- 7. 手机端：导航按钮常显（不再折叠进菜单） ----------
   vno.css 在 max-width:960px 下把 .navigation-wrapper 设为
   display:none + position:fixed，只能点右上角汉堡按钮弹出。
   这里覆盖为「始终平铺显示」，并顺手修掉随之而来的两个问题：
     a) 面板高度写死 100% 且不可滚动 → 内容变高后底部按钮被裁掉
     b) 一级按钮 width:80% / 社交按钮 width:20% 的表格式排布 → 手机上过宽
   汉堡按钮本身保留在 DOM 里（main.js 绑定了事件），只是不再显示。
*/
@media screen and (max-width: 960px) {

    /* 7.1 隐藏汉堡按钮与顶部黑色条，导航改为常显 */
    .btn-mobile-menu {
        display: none !important;
    }

    .navigation-wrapper {
        display: block !important;
        position: static !important;
        width: 100%;
        padding: 0;
        background: transparent;
        border-bottom: 0;
    }

    /* 7.2 一级按钮：整行居中，放不下就换行 */
    .cover-navigation {
        float: none;
        clear: none;
        width: 100%;
        margin-top: 18px;
    }

    .cover-navigation .navigation {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }

    .cover-navigation .navigation li,
    .navigation__item {
        display: inline-block;
        width: auto;
        margin: 0 3px 6px 0;
        vertical-align: middle;
    }

    .navigation__item a {
        padding: 8px 16px;
        font-size: .85em;
    }

    /* 7.3 社交图标：一行挨着排，不占 20% 宽 */
    .cover-navigation.navigation--social {
        margin-top: 12px;
        padding-top: 0;
    }

    .cover-navigation.navigation--social .navigation li {
        display: inline-block;
        width: auto;
        margin: 0 2px;
    }

    .navigation--social a {
        padding: 6px 8px;
    }

    /* 7.4 面板改为随内容增高，超出屏幕时可滚动 */
    #panel.panel-cover {
        position: relative;
        height: auto;
        min-height: 100%;
    }

    .panel-main {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .panel-main__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        padding: 56px 8%;
        box-sizing: border-box;
    }

    .panel-cover__description {
        max-width: 100%;
    }
}

/* ============================================================
   8. 首页按钮美化：霓虹玻璃按钮 + 环绕渐变流动边框
   ------------------------------------------------------------
   实现原理（纯 CSS，不使用任何额外 DOM）：
   由「按钮本体 + ::before 流动彩边 + ::after 呼吸光晕」三层组成。

   三个视觉层各司其职：
     a          玻璃本体：顶部受光高光 + 底色 + 悬停时的掠光扫过
     a::before  流动彩边：整圈彩虹渐变沿边框不停流动（主角）
     a::after   呼吸光晕：一圈彩色投影，明暗缓慢呼吸（霓虹感来源）

   1) 用 @property 把自定义属性 --dm-angle 注册成 <angle> 类型。
      普通自定义属性无法参与动画（浏览器只当字符串插值），
      注册成 <angle> 后 @keyframes 才能平滑补间角度。

   2) ::before 是覆盖按钮的绝对定位层，背景是一整圈**连续**的锥形渐变
      conic-gradient(from var(--dm-angle) ...)：青→蓝→紫→品红→橙→黄→绿
      再回到青。首尾取同一个颜色，所以角度转满一圈时颜色衔接无缝，
      观感就是「一整圈彩色光沿着边框不停流动」——
      全程没有暗区、也没有明暗断点（这正是不用「双光束」写法的原因：
      两道光滑过、中间会留大段黑场，看起来是断续的闪烁而非流动）。

   3) 关键：用 mask 把 ::before「只保留边框环」——
       两层全不透明遮罩分别裁到 content-box 与 border-box，
       再用 mask-composite: exclude 取「异或」，中间那块就真正镂空了。
       于是光带**只存在于边缘的环上**，按钮内部完全不透光。
      （若改用 background-clip: border-box 让锥形渐变铺满整块，
       光影会透过半透明填充渗进按钮中心，糊成一团转动的光斑、
       并且把文字对比度压下去——实测中心亮度会冲到纯白，
       所以这里必须用 mask 而不是单纯靠填充遮挡。）

   4) @keyframes 只补间 --dm-angle 0deg → 360deg，整圈渐变色即绕行流动。

   图层顺序：父级 a 设了 isolation:isolate 形成独立层叠上下文，
   彩边层用 z-index:-2、光晕层 z-index:-1，因此都压在按钮自身背景之上、
   又在文字之下，文字始终绘制在最上层，清晰可读。

   hover 时额外触发：掠光扫过（::after 的高光带）、光晕增强、
   轻微上浮与放大。手机端没有 hover，靠常驻的流动彩边与呼吸光晕撑住观感。

   作用域严格限定在 .cover-navigation 内，因此不会影响头像翻转链接
   （.ih-item .blog-button 不在 .cover-navigation 中）。
   流动配色默认是一圈彩虹色（见下面 --dm-btn-c1..c8），
   与后台「主题配色」相互独立，想联动只需把 c1 换成 var(--theme-accent)。

   兼容性：不支持 @property 的旧浏览器（Chrome <85 / Safari <16.4 /
   Firefox <128）不补间角度，渐变静止但边框照常显示；
   不支持 mask-composite 时退化为普通渐变边框，均属优雅降级、不破版。
   ============================================================ */

@property --dm-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.cover-navigation {
    --dm-btn-radius: 999px;
    /* 边框粗细＝流动光带的可见宽度 */
    --dm-btn-thickness: 2px;
    /* 玻璃填充（上→下） */
    --dm-btn-fill: linear-gradient(180deg, rgba(26, 30, 44, .62), rgba(12, 14, 22, .70));
    /* 流动光带的配色。首尾必须同色（#00c6ff），
       这样角度补间到 360deg 时接缝无痕，流动才不会「跳」一下。
       想换配色只改这一行即可，色标数量随意。
       注意：渐变本身必须写在 ::before 里（见 8.2），
       不能把整个 conic-gradient 包进这里的变量——那样 var(--dm-angle)
       会在父元素上就解析掉（父元素没有动画，值恒为 0deg），
       结果整条边框被冻结、颜色不再流动。 */
    --dm-btn-c1: #00c6ff;
    --dm-btn-c2: #4d8cff;
    --dm-btn-c3: #6a5cff;
    --dm-btn-c4: #a355ff;
    --dm-btn-c5: #ff4b8b;
    --dm-btn-c6: #ff8a4b;
    --dm-btn-c7: #ffd24d;
    --dm-btn-c8: #4dffb8;
}

/* ---------- 8.1 按钮本体（玻璃 + 穹顶高光 + 悬停掠光） ---------- */
.cover-navigation .navigation__item > a {
    position: relative;
    /* 建立独立层叠上下文：这样 ::before / ::after 用负 z-index 时，
       会压在按钮自身背景之上、又在文字之下，文字永远清晰。 */
    isolation: isolate;
    display: inline-block;
    box-sizing: border-box;
    /* vno.css 给 .navigation__item a 留了 1px 纯白描边，直接沿用会盖过彩边，
       这里压淡成半透明，只当作玻璃边缘的高光发丝线。 */
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--dm-btn-radius);
    padding: 10px 22px;
    color: #fff;
    opacity: 1;
    font-size: .9em;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    /* 两层背景：
       第 1 层＝掠光高光带（默认完全推到按钮外，看不见；hover 时扫过）
       第 2 层＝玻璃底色
       background-size 必须显式给出，否则无法用 background-position 做扫光。
       掠光峰值取 .28 是实测定出来的：按钮文字约 14px 粗体，属「正文」级，
       WCAG AA 要求 4.5:1。alpha 越大掠光越白，扫过文字时会压低局部对比度；
       .28 实测掠光带峰值处白字约 4.67:1，刚好达标 ——
       既看得清一道光扫过，又不会在扫过的一瞬间把字冲淡。 */
    background-image:
        linear-gradient(105deg,
            transparent 42%,
            rgba(255, 255, 255, .07) 47%,
            rgba(255, 255, 255, .28) 50%,
            rgba(255, 255, 255, .07) 53%,
            transparent 58%),
        var(--dm-btn-fill);
    background-size: 260% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: 200% 0, 0 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* 外投影 + 内穹顶高光（inset）：玻璃质感的关键 */
    box-shadow:
        0 4px 16px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .38),
        inset 0 -1px 0 rgba(0, 0, 0, .22);
    transition:
        transform .28s cubic-bezier(.25, .8, .25, 1),
        box-shadow .28s ease,
        background-position .85s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 8.2 环绕渐变流动彩边（::before，被 mask 掏空中心） ---------- */
.cover-navigation .navigation__item > a::before {
    content: '';
    position: absolute;
    /* 父级已 isolation:isolate，负 z-index 会被限制在按钮内部，
       效果是压在按钮背景之上、文字之下。 */
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    padding: var(--dm-btn-thickness);
    /* 整圈连续渐变，绕边框不停流动。
       渐变必须**直接写在这里**、并把 var(--dm-angle) 就近引用：
       若把它抽到父级的自定义属性里，角度会在父元素上就解析掉
       （父元素没有动画 → 恒为 0deg），整条边框被冻结不再流动。 */
    background-image: conic-gradient(from var(--dm-angle, 0deg),
        var(--dm-btn-c1, #00c6ff),
        var(--dm-btn-c2, #4d8cff),
        var(--dm-btn-c3, #6a5cff),
        var(--dm-btn-c4, #a355ff),
        var(--dm-btn-c5, #ff4b8b),
        var(--dm-btn-c6, #ff8a4b),
        var(--dm-btn-c7, #ffd24d),
        var(--dm-btn-c8, #4dffb8),
        var(--dm-btn-c1, #00c6ff));
    /* 掏空中间：内容盒区域不可见，只剩 padding 形成的边框环。
       标准写法 + -webkit- 前缀写法各来一套，覆盖 WebKit/Blink。 */
    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    animation: dm-btn-marquee 3.6s linear infinite;
    pointer-events: none;
}

/* ---------- 8.3 呼吸霓虹光晕（::after） ----------
   一层带彩色外发光的空壳，缓慢明暗呼吸，给按钮一圈「通电」的霓虹味。
   因为只有外发光、没有背景，所以不会遮挡按钮内容。 */
.cover-navigation .navigation__item > a::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: dm-btn-breathe 3.6s ease-in-out infinite;
}

/* ---------- 8.4 悬停：掠光扫过 + 上浮放大 + 光晕增强 ---------- */
.cover-navigation .navigation__item > a:hover {
    transform: translateY(-2px) scale(1.035);
    color: #fff;
    text-shadow: 0 0 14px rgba(255, 255, 255, .55), 0 1px 3px rgba(0, 0, 0, .5);
    /* 掠光带从右侧扫到左侧 */
    background-position: -160% 0, 0 0;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .38),
        0 0 22px rgba(0, 198, 255, .55),
        0 0 42px rgba(160, 90, 255, .38),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(0, 0, 0, .22);
}

/* 悬停时彩边流速明显加快（3.6s → 1.6s） */
.cover-navigation .navigation__item > a:hover::before {
    animation-duration: 1.6s;
}

/* 悬停时呼吸光晕更亮、范围更大 */
.cover-navigation .navigation__item > a:hover::after {
    animation-duration: 1.8s;
    animation-name: dm-btn-breathe-strong;
}

/* ---------- 8.4 键盘可达性：清晰的焦点环 ---------- */
.cover-navigation .navigation__item > a:focus-visible {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .9),
        0 0 22px rgba(0, 198, 255, .6),
        inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---------- 8.5 按下时的回弹反馈 ---------- */
.cover-navigation .navigation__item > a:active {
    transform: translateY(0) scale(.965);
}

/* ---------- 8.6 逐个错开相位，避免所有按钮同频闪动 ---------- */
.cover-navigation .navigation__item:nth-child(2) > a::before { animation-delay: -.5s; }
.cover-navigation .navigation__item:nth-child(3) > a::before { animation-delay: -1s; }
.cover-navigation .navigation__item:nth-child(4) > a::before { animation-delay: -1.5s; }
.cover-navigation .navigation__item:nth-child(5) > a::before { animation-delay: -2s; }
.cover-navigation .navigation__item:nth-child(6) > a::before { animation-delay: -2.5s; }
.cover-navigation .navigation__item:nth-child(n+7) > a::before { animation-delay: -3s; }

/* ---------- 8.7 社交图标：正圆按钮 + 悬停图标动效 ---------- */
.cover-navigation.navigation--social .navigation__item > a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* 图标字形高低不一，若不统一基线，一排圆钮会各自错开几个像素 */
    vertical-align: middle;
}

/* iconfont 图标统一行高，避免不同字形把圆钮撑歪 */
.cover-navigation.navigation--social .navigation__item > a .social {
    line-height: 1;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* 悬停：图标轻轻顶起放大一下，圆钮也跟着亮 */
.cover-navigation.navigation--social .navigation__item > a:hover .social {
    transform: translateY(-1px) scale(1.16);
}

/* ---------- 8.8 关键帧 ---------- */
/* 环绕流动：只补间角度 */
@keyframes dm-btn-marquee {
    from { --dm-angle: 0deg; }
    to   { --dm-angle: 360deg; }
}

/* 常态呼吸光晕：青蓝与紫粉交替，明暗缓慢起伏 */
@keyframes dm-btn-breathe {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(0, 198, 255, .30),
            0 0 20px rgba(160, 90, 255, .18);
    }
    50% {
        box-shadow:
            0 0 18px rgba(0, 198, 255, .52),
            0 0 34px rgba(255, 75, 139, .34);
    }
}

/* 悬停呼吸：更强、更外扩 */
@keyframes dm-btn-breathe-strong {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(0, 198, 255, .45),
            0 0 30px rgba(160, 90, 255, .30);
    }
    50% {
        box-shadow:
            0 0 26px rgba(0, 198, 255, .75),
            0 0 52px rgba(255, 75, 139, .52);
    }
}

/* ---------- 8.9 尊重「减弱动态效果」偏好 ----------
   关掉全部动画与过渡，把渐变停在一个固定的好看角度上，
   既保留彩色边框与霓虹光晕的静态观感，又完全不动。
   注意：呼吸光晕的 box-shadow 由关键帧给出，
   动画关掉后要手动补一个静态值，否则光晕会整体消失。 */
@media (prefers-reduced-motion: reduce) {
    .cover-navigation .navigation__item > a::before {
        animation: none;
        --dm-angle: 135deg;
    }

    .cover-navigation .navigation__item > a::after {
        animation: none;
        box-shadow:
            0 0 14px rgba(0, 198, 255, .38),
            0 0 26px rgba(160, 90, 255, .22);
    }

    .cover-navigation .navigation__item > a,
    .cover-navigation.navigation--social .navigation__item > a .social {
        transition: none;
    }

    .cover-navigation .navigation__item > a:hover {
        transform: none;
        background-position: 200% 0, 0 0;
    }
}

/* ---------- 8.10 小屏适配 ---------- */
@media screen and (max-width: 960px) {
    .cover-navigation .navigation__item > a {
        padding: 9px 18px;
        font-size: .84em;
        letter-spacing: .6px;
    }

    .cover-navigation.navigation--social .navigation__item > a {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
    }
}

/* ============================================================
   9. 文字美化：层次分明的字体系统
   ------------------------------------------------------------
   设计思路：按钮已经是「霓虹玻璃 + 彩虹流动边框」的炫彩路线，
   文字走完全不同的「精致典雅」路线，二者拉开层次、互不重复：

     标题（H1）   ：衬线大字 + 银白→主题色渐变 + 流光扫过 + 柔焦光晕（主角）
     副标题        ：细体、宽字距、淡雅，安静地衬托标题
     分割线        ：渐隐横线 + 居中菱形亮点（呼应主题色）
     描述/语录     ：衬线正文、大行距、可读优先，来源用主题色点缀
     头像反转文字  ：小号衬线标题 + 宽字距说明，与正面的头像气质区分

   字体策略（不引入 CDN、不下载巨型中文字体）：
     - 英文/装饰：沿用站点本地黑体字「Engravers' Old English BT」
     - 中文      ：优雅衬线栈（思源宋体 / 宋体，各系统内置或常见）
   ============================================================ */

/* ---------- 9.1 全局文字基调 ---------- */
.panel-main__content {
    /* 字体层次（全部本地自托管，woff2 按 unicode-range 分片按需加载）：
       标题      → Ma Shan Zheng（马善政，毛笔楷书，最有艺术感的主角）
       副标题    → Zhi Mang Xing（志莽行书，与楷书标题形成「楷/行」字族层次）
       正文/描述 → Georgia / 思源宋体（可读性优先，避免整页书法字难读）
       按钮区    → 不受影响，继续用系统黑体，与书法文字拉开「现代/古典」对比 */
    --dm-font-title: "Ma Shan Zheng", "Engravers' Old English BT", "Songti SC",
                     "SimSun", serif;
    --dm-font-sub:   "Zhi Mang Xing", "Ma Shan Zheng", "Songti SC", "SimSun", serif;
    --dm-font-body:  "Georgia", "Times New Roman", "Source Han Serif SC",
                     "Noto Serif SC", "Songti SC", "SimSun", serif;
}

/* ---------- 9.2 站点标题 H1：渐变字 + 流光 + 柔焦光晕 ----------
   兼容性处理（关键）：
     「background-clip:text + color:transparent」在不支持的旧浏览器里
     会渲染成「透明文字」→ 标题看不见。所以这里拆成两层：
       ① 基础样式：纯白标题 + 普通 text-shadow，所有浏览器都能正常显示
       ② @supports 增强：支持 background-clip:text 的浏览器才启用渐变/流光/光晕
     这样旧浏览器退回白字（仍好看），新浏览器得到完整特效，绝不会出现隐形字。

   清晰度处理：书法字笔画细、字面小，在背景上容易显得「淡、飘」。
   这里用四招把它「垫」起来：
     ① 放大字号（书法字比黑体视觉小一圈，需额外放大）
     ② 白色细描边（-webkit-text-stroke）让笔画更实、更亮
     ③ 深色硬投影把字从背景上分离出来（对比度关键）
     ④ 主题色柔光只做点缀，不喧宾夺主 */
.panel-title a {
    /* 行内元素无法为绝对定位的 ::after 提供准确的盒模型，改为 inline-block */
    display: inline-block;
    font-family: var(--dm-font-title);
    font-weight: 700;
    font-size: 1.32em;                       /* 放大，书法字面小需额外补偿 */
    letter-spacing: 3px;
    line-height: 1.25;
    /* 兜底：所有浏览器都显示纯白标题 */
    color: #ffffff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .55),
                 0 4px 12px rgba(0, 0, 0, .35),
                 0 0 22px rgba(150, 190, 245, .5);
    position: relative;
}

/* 现代浏览器增强：渐变字 + 流光 + 柔焦光晕 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .panel-title a {
        /* 银白 → 主题色的纵向渐变文字（整体偏亮，保证任何背景下都清晰） */
        background-image: linear-gradient(180deg,
            #ffffff 0%,
            #fdfeff 30%,
            #eef5ff 55%,
            var(--theme-accent, #9dbdf0) 82%,
            #ffffff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        /* 白色细描边：书法笔画更实、更亮，明显提升清晰度 */
        -webkit-text-stroke: 0.6px rgba(255, 255, 255, .55);
        /* 柔焦光晕 + 暗色投影：drop-shadow 只作用在字形轮廓外，渐变保持干净。
           深色硬投影把字从背景「垫」起来，主题色柔光做点缀 */
        text-shadow: none;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65))
                drop-shadow(0 4px 10px rgba(0, 0, 0, .38))
                drop-shadow(0 0 20px rgba(150, 190, 245, .42));
    }

    /* 流光层：同样依赖 background-clip:text，也放进 @supports 保护 */
    .panel-title a::after {
        content: attr(data-text);
        position: absolute;
        /* inset 是较新的简写（Safari 14.1+），先写四边兜底再写 inset 覆盖，
           保证老 Safari（支持 clip:text 但不支持 inset）也能正确覆盖整个标题 */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        background-image: linear-gradient(100deg,
            transparent 30%,
            rgba(255, 255, 255, .9) 50%,
            transparent 70%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        background-size: 220% 100%;
        background-position: 130% 0;
        background-repeat: no-repeat;
        pointer-events: none;
        animation: dm-title-shine 4.5s ease-in-out infinite;
    }
}

@keyframes dm-title-shine {
    0%, 55%  { background-position: 130% 0; }
    85%, 100% { background-position: -90% 0; }
}

/* ---------- 9.3 副标题：行书体，提亮 + 深投影，安静但有存在感 ---------- */
.panel-subtitle {
    font-family: var(--dm-font-sub);
    font-size: 1.22em;
    font-weight: 400;
    letter-spacing: 6px;                     /* 比原来 3px 更疏朗 */
    color: #ffffff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .55),
                 0 3px 10px rgba(0, 0, 0, .35),
                 0 0 20px rgba(255, 255, 255, .22);
}

/* ---------- 9.4 分割线：渐隐 + 居中菱形亮点 ---------- */
.panel-cover__divider {
    position: relative;
    width: 46%;
    border-top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .6) 50%,
        transparent);
    margin: 22px auto;
    overflow: visible;
}

.panel-cover__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background: var(--theme-accent, #fff);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 10px var(--theme-accent, rgba(255, 255, 255, .8));
}

/* ---------- 9.5 描述 / 语录：衬线正文（可读优先）+ 主题色来源 ---------- */
.panel-cover__description {
    font-family: var(--dm-font-body);
    font-size: 1.08em;
    line-height: 1.9;
    letter-spacing: .5px;
    color: #ffffff;
    /* 深投影把正文从背景上垫起来，提升可读性 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6),
                 0 2px 8px rgba(0, 0, 0, .35);
}

.panel-cover__description strong {
    font-weight: 600;
    font-size: .92em;
    letter-spacing: 1px;
    /* 兜底：旧浏览器不认识 color-mix() 时，用主题色近似值；
       现代浏览器会覆盖为「主题色 + 白」的提亮色 */
    color: var(--theme-accent, #a8c6f2);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .panel-cover__description strong {
        color: color-mix(in srgb, var(--theme-accent, #a8c6f2) 70%, #ffffff);
    }
}

/* ---------- 9.6 头像反转文字：小号楷书标题 + 宽字距说明 ---------- */
.ih-item.circle.effect .info h2 {
    font-family: var(--dm-font-title);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55),
                 0 0 8px rgba(255, 255, 255, .55);
}

.ih-item.circle.effect .info p {
    font-family: var(--dm-font-sub);
    font-size: 12.5px;
    letter-spacing: 2px;
    font-style: normal;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ---------- 9.7 尊重「减弱动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .panel-title a::after { animation: none; background-position: 130% 0; }
}

/* ---------- 9.8 小屏适配 ---------- */
@media screen and (max-width: 960px) {
    .panel-title a { font-size: 1em; letter-spacing: 1px; }
    .panel-subtitle { letter-spacing: 4px; }
    .panel-cover__description { font-size: .98em; }
}