/* 子比昵称特效 —— 静态样式（关键帧 / 基础类 / 图标 / 提示气泡 / 特效）
 * 各用户类型的具体颜色 / 渐变 / 背景由插件在页脚动态输出（见 inc/core.php）。
 * 此处仅放置与特效动画相关、与配置无关的基础规则。
 */

/* 包裹层：用 inline-flex（而非 inline-block）+ 居中，保证昵称文字始终在
 * 上/下内边距之间垂直居中——避免在某些 flex / 行内上下文中文字被“顶”到顶部或底部，
 * 导致调大内边距时上/下间距看着不一致。
 * line-height:1 去掉字体自带的额外行距，让“文字”与“背景盒”严格同心；
 * box-decoration-break:clone 仍保留，兼容昵称折行的极端情况。 */
.zibll-ne {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    box-sizing: border-box;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* 文字层在胶囊内垂直居中（align-self:center 而非 stretch），内部文字也居中。
 * 中文字体（以及中文环境常用的拉丁数字/字母）的视觉中心普遍比 CSS 算出来的几何中心
 * 偏上 1px 左右；因此整体再向下平移 1px，让肉眼看到的上下留白真正对称。
 * 1px 是整像素偏移，不会触发模糊。 */
.zibll-ne-text {
    display: inline-flex;
    align-items: center;
    align-self: center;
    line-height: 1;
    transform: translateY(1px);
}

/* 流动渐变：配合 linear-gradient 背景 + background-clip:text 使用 */
@keyframes zibll-ne-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 闪烁 */
@keyframes zibll-ne-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* 流光：单色渐变到透明的光带，快速从昵称上扫过（颜色由插件注入的 --ne-flow-color 决定） */
.zibll-ne--flow-light {
    position: relative;
    overflow: hidden;
    isolation: isolate;   /* 让光带只在昵称自身内容范围内做 screen 混合 */
}
.zibll-ne--flow-light::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, var(--ne-flow-color, #fff) 50%, transparent 100%);
    mix-blend-mode: screen;
    transform: translateX(-120%);
    pointer-events: none;
    animation: zibll-ne-shine 1.4s ease-in-out infinite;
}
@keyframes zibll-ne-shine {
    0%   { transform: translateX(-120%); }
    60%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

/* 星光：随机闪烁的星点 */
@keyframes zibll-ne-star {
    0%   { transform: scale(0) rotate(0deg);   opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scale(1.6) rotate(45deg); opacity: 0; }
}
.zibll-ne-star {
    position: absolute;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, #fff 0 18%, rgba(255,255,255,0) 60%),
        conic-gradient(from 0deg, transparent 0 8%, #fff 10% 12%, transparent 14% 38%, #fff 40% 42%, transparent 44% 68%, #fff 70% 72%, transparent 74% 100%);
    -webkit-mask: radial-gradient(circle, #000 64%, transparent 66%);
            mask: radial-gradient(circle, #000 64%, transparent 66%);
    filter: drop-shadow(0 0 3px rgba(255,255,255,.9));
    animation: zibll-ne-star 1.1s ease-out forwards;
}

/* ===========================================================================
 * 特效字
 * 覆盖模式(fxhide=1)：把特效字 portal 到 body（fixed 定位，居中覆盖昵称），
 *   宽度自然跟随特效字本身 —— 彻底避开父级 overflow:hidden 裁剪，昵称窄也按四字宽显示。
 *   重点在“字体本身有效果”：清晰实色 / 干净彩虹渐变，不再用大模糊阴影糊一圈。
 * 常驻模式(fxhide=0)：昵称始终可见，由特效字颜色 / 霓虹清晰点亮昵称本身。
 * ========================================================================= */

/* —— 覆盖模式：portal 浮层（挂在 body 上） —— */
.zibll-ne-fxportal {
    position: fixed;
    z-index: 2147483646;
    display: inline-block;
    transform: translate(-50%, -50%);   /* 以昵称中心为锚点居中 */
    font-weight: 800;
    font-size: 1.05em;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
}
/* 彩色：清晰实色 + 极轻描边光（仅让字体更立，不糊成一圈） */
.zibll-ne-fxportal.zibll-ne-fxtext--color {
    color: var(--ne-fx-color, #ffd700);
    text-shadow: 0 0 1px color-mix(in srgb, var(--ne-fx-color, #ffd700) 55%, transparent);
    animation: zibll-ne-fxcolor-in var(--ne-fx-dur, 2.4s) ease forwards;
}
/* 霓虹：干净彩虹渐变文字（无大模糊阴影，文字本身流光） */
.zibll-ne-fxportal.zibll-ne-fxtext--neon {
    background: linear-gradient(90deg, #ff004c, #ffae00, #00eaff, #a200ff, #ff004c);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: zibll-ne-fxneon-in var(--ne-fx-dur, 2.4s) ease forwards,
               zibll-ne-fxneon-flow 3s linear infinite;
}
@keyframes zibll-ne-fxcolor-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
    16%  { opacity: 1; }
    82%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes zibll-ne-fxneon-in {
    0%   { opacity: 0; }
    16%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes zibll-ne-fxneon-flow {
    0%   { background-position: 0% 0; }
    100% { background-position: 220% 0; }
}
/* 覆盖期间：原地隐藏昵称文字（保留占位，避免布局抖动） */
.zibll-ne--fxing .zibll-ne-text { visibility: hidden; }

/* 常驻模式（fxhide=0）的语义已改为“特效字浮层覆盖昵称、但昵称不隐藏”，
 * 复用覆盖模式的 portal(.zibll-ne-fxportal) 逻辑，不再使用 .zibll-ne--fx-always 点亮昵称本身的方案。 */

/* 星光 / 特效字 需要定位上下文 */
.zibll-ne[data-ne-effect="starlight"],
.zibll-ne[data-ne-effect="fx_text"] {
    position: relative;
}

/* 尊重用户的“减少动态效果”系统设置 */
@media (prefers-reduced-motion: reduce) {
    .zibll-ne--flow,
    .zibll-ne--blink,
    .zibll-ne--flow-light::before,
    .zibll-ne-star,
    .zibll-ne-fxportal,
    .zibll-ne--fx-always .zibll-ne-text {
        animation: none !important;
    }
    /* 减少动态效果时：特效字浮层直接以静态清晰样式显示，不退化为不可见 */
    .zibll-ne-fxportal { opacity: 1 !important; }
}

/* ===========================================================================
 * 图标（勋章）
 * ========================================================================= */
.zibll-ne-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex: none;            /* 作为胶囊(flex 子项)时不被压缩 */
    width: var(--ne-icon-size, 18px);
    height: var(--ne-icon-size, 18px);
    margin: 0 4px;
    position: relative;
    cursor: pointer;   /* 对齐子比勋章（无 help 问号光标） */
    line-height: 0;
}
.zibll-ne-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

/* 旧版 CSS 提示气泡：JS 加载后由 .zibll-ne-tip-ready 关闭，避免重复显示 */
.zibll-ne-icon::after,
.zibll-ne-icon::before {
    content: attr(data-tip);
}
.zibll-ne-icon::before { display: none; }
.zibll-ne-tip-ready .zibll-ne-icon::after,
.zibll-ne-tip-ready .zibll-ne-icon::before {
    display: none !important;
}

/* ===========================================================================
 * JS 浮层提示气泡（portal 到 body，规避 overflow:hidden 裁剪）
 * 样式对齐子比 bootstrap tooltip：黑底白字、圆角 4px、下方小三角指向图标
 * ========================================================================= */
.zibll-ne-tip {
    position: fixed;
    z-index: 2147483647;
    max-width: 80vw;
    background: #000;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.42857143;
    white-space: nowrap;
    text-align: center;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
/* 小三角：用旋转 45° 的方块充当，指回图标（对齐子比 tooltip-arrow 风格，稳定可见） */
.zibll-ne-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #000;
    transform: translateX(-50%) rotate(45deg);
    bottom: -4px;
}
.zibll-ne-tip.zibll-ne-tip-up::after {
    bottom: auto;
    top: -4px;
}

/* ===========================================================================
 * 用户中心主昵称专属对齐（仅此一处，不影响其它位置）
 * ---------------------------------------------------------------------------
 * 用户中心页头的 .display-name 是普通 inline 容器，其内的 vip 会员图标、
 * 等级/认证勋章都是 FontAwesome 图标，按 baseline 微调对齐；而插件包裹后的
 * 胶囊是 inline-flex + vertical-align:middle。两套对齐基准不同，会让胶囊的
 * 几何中点比图标/勋章的视觉中心更低，看起来“整体偏下、与前后图标不一致”。
 * 把该 .display-name 改为 inline-flex + align-items:center，让胶囊与前后的
 * 图标、勋章统一按“几何中心”垂直居中，三者一线，视觉协调。
 * 文章页 / 评论页的胶囊不受影响（那些位置的图标本身就是 middle 对齐）。
 * ========================================================================= */
.author-header .display-name {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
/* 胶囊作为 flex 子项时，vertical-align 失效，由父级 align-items 居中；
 * 这里显式 align-self:center 兜底，确保任何层级都严格居中。 */
.author-header .display-name .zibll-ne {
    align-self: center;
    vertical-align: middle;
}