/**
 * 首页皮肤：极光 Aurora（外观差异层，加载于 home-base.css 之后）
 *
 * 视觉：hero 全屏渐变光斑 + 玻璃拟态卡片；卡片圆角/阴影发光跟随主题色
 * 颜色策略：全部由父主题变量派生（--theme-color / --main-bg-color），color-mix 前
 *           均给纯变量回退行；.dark-theme 重定义同名变量即整体自动翻转，无需单独深色适配
 */

/*==== hero 区：单一居中排版（动画在上、文字在下）。
   底部距离=margin-bottom:var(--zsh-gap)，与下方区块统一由「区块纵向间距」驱动 ====*/
.zibll-home-aurora .zibll-home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--zsh-hero-h, 480px); /*hero 高度设置经内联变量注入，0=默认*/
    padding: var(--zsh-pt, 30px) 0 var(--zsh-pb, 0);
    overflow: hidden;
    margin-top: -20px; /*抵消页眉下常见间距，让光斑贴到顶*/
    margin-bottom: var(--zsh-mb, var(--zsh-gap)); /*区块级下边距设置经 --zsh-mb 覆写*/
}

/*光斑层：三个巨型径向渐变 + 缓慢漂浮动画*/
.zibll-home-aurora .aurora-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.zibll-home-aurora .aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .55;
    background: var(--muted-bg-color); /*回退：不支持 color-mix 时为素色光斑*/
    animation: zb-aurora-float 18s ease-in-out infinite alternate;
}
.zibll-home-aurora .blob-1 {
    width: 560px;
    height: 560px;
    left: -120px;
    top: -160px;
    background: var(--theme-color);
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--theme-color) 92%, transparent),
        color-mix(in srgb, var(--theme-color) 42%, transparent) 60%,
        transparent 78%);
    opacity: .5;
}
.zibll-home-aurora .blob-2 {
    width: 480px;
    height: 480px;
    right: -100px;
    top: 20%;
    background: #7c5cff;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--theme-color) 48%, #7c5cff),
        color-mix(in srgb, #7c5cff 26%, transparent) 62%,
        transparent 78%);
    opacity: .45;
    animation-delay: -6s;
}
.zibll-home-aurora .blob-3 {
    width: 420px;
    height: 420px;
    left: 34%;
    bottom: -220px;
    background: #20c8d8;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--theme-color) 38%, #20c8d8),
        color-mix(in srgb, #20c8d8 30%, transparent) 58%,
        transparent 74%);
    opacity: .42;
    animation-delay: -12s;
}
.zibll-home-aurora .blob-4 {
    width: 380px;
    height: 380px;
    right: 16%;
    bottom: -160px;
    background: #ffb05c;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--theme-color) 26%, #ffb05c),
        color-mix(in srgb, #ffb05c 26%, transparent) 58%,
        transparent 74%);
    opacity: .38;
    animation-duration: 22s;
    animation-delay: -9s;
}
@keyframes zb-aurora-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(60px, 40px, 0) scale(1.15); }
}

/*细网格遮罩：光斑上叠科技感纹理*/
.zibll-home-aurora .aurora-grid-mask {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--main-color) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--main-color) 5%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/*hero 容器：单列水平垂直居中（动画在上、文字在下）*/
.zibll-home-aurora .aurora-hero-in {
    display: flex;
    justify-content: center;
}
.zibll-home-aurora .aurora-hero-content {
    position: relative;
    max-width: 820px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*眉标：主题色微染胶囊（主题色圆点 + 小字）*/
.zibll-home-aurora .aurora-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .05em;
    color: var(--theme-color);
    background: var(--muted-bg-color);
    background: color-mix(in srgb, var(--theme-color) 10%, transparent);
    border: 1px solid var(--main-border-color);
    border-color: color-mix(in srgb, var(--theme-color) 25%, transparent);
}
.zibll-home-aurora .aurora-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 20%, transparent);
}
.zibll-home-aurora .aurora-hero-title {
    margin: 0 0 14px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .5px;
    color: var(--main-color); /*回退：不支持 clip 时纯色*/
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /*渐变文字：主题色扫过主文本色；transparent 兜底防旧浏览器文字消失*/
    .zibll-home-aurora .aurora-hero-title {
        background: linear-gradient(120deg, var(--main-color) 30%, var(--theme-color));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}
.zibll-home-aurora .aurora-hero-desc {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--muted-2-color);
}
.zibll-home-aurora .aurora-hero-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.zibll-home-aurora .aurora-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s;
}
.zibll-home-aurora .aurora-btn:hover {
    transform: translateY(-2px);
}
.zibll-home-aurora .aurora-btn-main {
    color: #fff;
    background: var(--theme-color); /*回退行*/
    background: linear-gradient(120deg, var(--theme-color), color-mix(in srgb, var(--theme-color) 55%, #7c5cff));
    box-shadow: 0 10px 30px color-mix(in srgb, var(--theme-color) 40%, transparent);
}
.zibll-home-aurora .aurora-btn-ghost {
    color: var(--main-color);
    border: 1px solid var(--main-border-color);
    background: var(--main-bg-color);
    background: color-mix(in srgb, var(--main-bg-color) 60%, transparent);
}
.zibll-home-aurora .aurora-btn-ghost:hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

/*==== hero 矢量动画（纯 SVG + CSS/SMIL，颜色随主题变量；容器统一宽度，居中）====*/
.zibll-home-aurora .aurora-orbit {
    width: min(100%, 380px);
    margin-bottom: 10px;
}
.zibll-home-aurora .aurora-orbit svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
/*--- 轨道环（vt-orbit）：三环交错倾斜，虚线流动，SMIL 流光点 ---*/
.zibll-home-aurora .vt-orbit .orb-ring {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 1.5;
    opacity: .38;
}
.zibll-home-aurora .vt-orbit .orb-ring.r2 { opacity: .28; }
.zibll-home-aurora .vt-orbit .orb-ring.r3 { opacity: .2; }
.zibll-home-aurora .vt-orbit .orb-ring.dotted {
    stroke-dasharray: 3 10;
    animation: zb-orb-dash 26s linear infinite;
}
@keyframes zb-orb-dash {
    to { stroke-dashoffset: -780; }
}
.zibll-home-aurora .vt-orbit .orb-glow {
    filter: blur(2px);
}
.zibll-home-aurora .vt-orbit .orb-dot {
    fill: var(--theme-color);
    filter: drop-shadow(0 0 7px var(--theme-color));
}
/*--- 流动波线（vt-wave）：光段沿波形流动（pathLength=100 归一） ---*/
.zibll-home-aurora .vt-wave .wave {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 42 58; /*亮段42 + 空段58，offset 循环=光段沿波滑动*/
    opacity: .55;
}
.zibll-home-aurora .vt-wave .wave.w2 {
    stroke-width: 1.5;
    opacity: .35;
    animation-duration: 7.5s; /*错峰*/
    animation-delay: -2.5s;
}
.zibll-home-aurora .vt-wave .wave.w3 {
    stroke-width: 1;
    opacity: .22;
    animation-duration: 9.5s;
    animation-delay: -5s;
}
.zibll-home-aurora .vt-wave .wave {
    animation: zb-wave-flow 6s linear infinite;
}
@keyframes zb-wave-flow {
    to { stroke-dashoffset: -100; }
}
/*（脉冲雷达动画已删；zb-pulse keyframes 保留——祥云圆日光晕复用）*/
@keyframes zb-pulse {
    from { transform: scale(.45); opacity: .85; }
    to   { transform: scale(4.6); opacity: 0; }
}
/*--- 莲花绽放（vt-lotus）：三层花冠错峰开合——含苞→外瓣先展→中瓣→内瓣（弹性绽放）
     →开放停留→旋转 90°（花瓣 8 重对称=45° 的整数倍，缩回含苞时视觉与起始无缝衔接，
     循环不跳帧）同步缩回。全部动画共用同一条 10s 主曲线（同 keyframes+负 delay 相位
     递进），绽放/旋合/蕊点/光晕/花心绝不脱节。花瓣填充白色半透明渐变=晶莹剔透。
     缩放在层组上做——CSS transform 会覆盖子花瓣的 rotate 属性变换，组自身无属性变换故安全 ---*/
.zibll-home-aurora .vt-lotus .lt-ring {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 1;
    stroke-dasharray: 2 6;
    opacity: .3;
    transform-box: fill-box;
    transform-origin: center;
    animation: zb-lotus-spin 36s linear infinite;
}
.zibll-home-aurora .vt-lotus .lt-ring-2 {
    stroke-dasharray: 1 8;
    opacity: .18;
    animation: zb-lotus-spin 26s linear infinite reverse;
}
@keyframes zb-lotus-spin {
    to { transform: rotate(360deg); }
}
/*光晕与花同呼吸：绽放峰值处最亮，旋合时随花收暗（与花冠同 delay 保相位）*/
.zibll-home-aurora .vt-lotus .lt-glow {
    transform-box: view-box;
    transform-origin: 260px 150px;
    animation: zb-lotus-glow 10s cubic-bezier(.34, 1.3, .5, 1) infinite;
}
@keyframes zb-lotus-glow {
    0%, 8%  { transform: scale(.5); opacity: .3; }
    40%     { transform: scale(1.08); opacity: 1; }
    62%     { transform: scale(1.06); opacity: .95; }
    92%, 100% { transform: scale(.5); opacity: .3; }
}
/*三层同一条主曲线（含苞 .25°→弹性全开→停留→旋转 90° 缩回），delay 递进=波浪绽放*/
.zibll-home-aurora .vt-lotus .lt-layer {
    transform-box: view-box;
    transform-origin: 260px 150px;
    animation: zb-lotus-bloom 10s cubic-bezier(.34, 1.3, .5, 1) infinite;
}
.zibll-home-aurora .vt-lotus .lt-mid   { animation-delay: -9.55s; }
.zibll-home-aurora .vt-lotus .lt-inner { animation-delay: -9.2s; }
@keyframes zb-lotus-bloom {
    0%   { transform: scale(.25) rotate(0deg); }
    8%   { transform: scale(.25) rotate(0deg); }
    40%  { transform: scale(1) rotate(12deg); }
    62%  { transform: scale(1) rotate(16deg); }
    92%  { transform: scale(.25) rotate(90deg); }
    100% { transform: scale(.25) rotate(90deg); }
}
/*白晶花瓣：半透明白渐变填充（渐变随花瓣 rotate 同转，蒂→尖方向固定）+ 主题色细描边
  保轮廓清晰；三层填充浓度递进（defs 里 id 区分）=层次分明、层层透光*/
.zibll-home-aurora .vt-lotus .lt-petal {
    stroke: var(--theme-color);
    stroke-width: 1.1;
    stroke-linecap: round;
    opacity: .9;
}
.zibll-home-aurora .vt-lotus .lt-outer .lt-petal { fill: url(#zb-lp-outer); }
.zibll-home-aurora .vt-lotus .lt-mid   .lt-petal { fill: url(#zb-lp-mid); stroke-width: 1; opacity: .85; }
.zibll-home-aurora .vt-lotus .lt-inner .lt-petal { fill: url(#zb-lp-inner); stroke-width: .9; opacity: .8; }
/*蕊点：内瓣展开后（delay 对齐绽放峰值）逐颗浮现，旋合前隐去*/
.zibll-home-aurora .vt-lotus .lt-stamen {
    fill: var(--theme-color);
    opacity: 0;
    animation: zb-lotus-stamen 10s ease-in-out infinite;
}
.zibll-home-aurora .vt-lotus .lt-stamen:nth-of-type(2n) { animation-delay: -9.05s; }
@keyframes zb-lotus-stamen {
    0%, 38% { opacity: 0; }
    50%     { opacity: .9; }
    60%     { opacity: .9; }
    72%, 100% { opacity: 0; }
}
.zibll-home-aurora .vt-lotus .lt-core {
    fill: var(--theme-color);
    filter: drop-shadow(0 0 8px var(--theme-color));
    transform-box: view-box;
    transform-origin: 260px 150px;
    animation: zb-lotus-core 10s ease-in-out infinite;
}
@keyframes zb-lotus-core {
    0%, 8%  { transform: scale(.7); opacity: .6; }
    50%     { transform: scale(1.15); opacity: 1; }
    62%     { transform: scale(1.1); opacity: .95; }
    92%, 100% { transform: scale(.7); opacity: .6; }
}
/*--- 科幻矩阵（vt-cyber）：点阵对角波 + HUD 四角锁定闪烁 + 双层反转六边形 +
     粒子环游/扫描带/核心涟漪（后三者 SMIL，reduced-motion 下直接隐藏） ---*/
/*点阵对角波：delay=(列+行)×0.16s（内联），亮波沿对角线扫过矩阵*/
.zibll-home-aurora .vt-cyber .cy-dot {
    fill: var(--theme-color);
    opacity: .12;
    transform-box: fill-box;
    transform-origin: center;
    animation: zb-cy-dot 4s ease-in-out infinite;
}
@keyframes zb-cy-dot {
    0%, 100% { opacity: .1;  transform: scale(1); }
    50%      { opacity: .85; transform: scale(1.6); }
}
/*HUD 四角：顺位点亮（delay 0/-1.5/-3/-4.5 → 8s 周期四角依次亮起=目标锁定循环）*/
.zibll-home-aurora .vt-cyber .cy-br {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .2;
    animation: zb-cy-lock 8s ease-in-out infinite;
}
.zibll-home-aurora .vt-cyber .cy-br.b2 { animation-delay: -2s; }
.zibll-home-aurora .vt-cyber .cy-br.b3 { animation-delay: -4s; }
.zibll-home-aurora .vt-cyber .cy-br.b4 { animation-delay: -6s; }
@keyframes zb-cy-lock {
    0%, 100% { opacity: .16; }
    10%      { opacity: .9; }
    30%      { opacity: .16; }
}
.zibll-home-aurora .vt-cyber .cy-hex {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 1.4;
    opacity: .32;
}
.zibll-home-aurora .vt-cyber .cy-hex.rot {
    stroke-width: 1.1;
    stroke-dasharray: 8 12;
    opacity: .5;
}
.zibll-home-aurora .vt-cyber .cy-hex.inner {
    stroke-width: 1;
    stroke-dasharray: 3 6;
    opacity: .3;
}
/*扫描带：渐变拖尾+亮线（组由 SMIL translate 纵扫，CSS 只管亮灭呼吸）*/
.zibll-home-aurora .vt-cyber .cy-scan {
    animation: zb-cy-scan 5.6s ease-in-out infinite;
}
.zibll-home-aurora .vt-cyber .cy-scan-line {
    stroke: var(--theme-color);
    stroke-width: 1.4;
    stroke-linecap: round;
}
@keyframes zb-cy-scan {
    0%, 100% { opacity: .2; }
    50%      { opacity: .75; }
}
/*粒子环游：对向沿六边轨运行（SMIL），拖尾光晕*/
.zibll-home-aurora .vt-cyber .cy-orb {
    fill: var(--theme-color);
    filter: drop-shadow(0 0 6px var(--theme-color));
}
/*核心：涟漪扩散（CSS scale）+ 稳态发光点*/
.zibll-home-aurora .vt-cyber .cy-ping {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    animation: zb-cy-ping 3.2s cubic-bezier(.2, .6, .4, 1) infinite;
}
@keyframes zb-cy-ping {
    from { transform: scale(.4); opacity: .8; }
    to   { transform: scale(3.2); opacity: 0; }
}
.zibll-home-aurora .vt-cyber .cy-core {
    fill: var(--theme-color);
    filter: drop-shadow(0 0 8px var(--theme-color));
    transform-box: fill-box;
    transform-origin: center;
    animation: zb-cy-core 3.2s ease-in-out infinite;
}
@keyframes zb-cy-core {
    0%, 100% { transform: scale(.85); }
    50%      { transform: scale(1.25); }
}
/*--- 水墨圆相（vt-ink）：禅意一笔环（缺口沿环缓行=运笔不歇）+ 墨点呼吸 + 底部淡墨横笔 ---*/
.zibll-home-aurora .vt-ink .ik-enso {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 80 20;
    opacity: .45;
    animation: zb-ink-flow 9s linear infinite;
}
@keyframes zb-ink-flow {
    to { stroke-dashoffset: -100; }
}
.zibll-home-aurora .vt-ink .ik-dot {
    fill: var(--theme-color);
    opacity: .4;
    animation: zb-lotus-glow 3.6s ease-in-out infinite;
}
.zibll-home-aurora .vt-ink .ik-dot.d2 { animation-delay: -1.2s; }
.zibll-home-aurora .vt-ink .ik-dot.d3 { animation-delay: -2.4s; }
.zibll-home-aurora .vt-ink .ik-stroke {
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 30 70;
    opacity: .3;
    animation: zb-ink-flow 12s linear infinite;
}
/*reduced-motion：SMIL 无法经 CSS 暂停→隐藏流光点/波光/波纹，留静态骨架*/
@media (prefers-reduced-motion: reduce) {
    .zibll-home-aurora .vt-orbit .orb-dot,
    .zibll-home-aurora .vt-orbit .orb-glow {
        display: none;
    }
    .zibll-home-aurora .vt-orbit .orb-ring.dotted,
    .zibll-home-aurora .vt-wave .wave {
        animation: none;
    }
    .zibll-home-aurora .vt-wave .wave {
        stroke-dasharray: none;
        opacity: .4;
    }
    /*莲花/水墨：动画全部停在静态骨架（莲花停在绽放峰值：各层无 transform 即完全展开态）*/
    .zibll-home-aurora .vt-lotus .lt-ring,
    .zibll-home-aurora .vt-lotus .lt-layer,
    .zibll-home-aurora .vt-lotus .lt-glow,
    .zibll-home-aurora .vt-lotus .lt-stamen,
    .zibll-home-aurora .vt-lotus .lt-core,
    .zibll-home-aurora .vt-ink .ik-enso,
    .zibll-home-aurora .vt-ink .ik-dot,
    .zibll-home-aurora .vt-ink .ik-stroke {
        animation: none;
    }
    /*科幻：点阵/四角/涟漪/核心停静态；SMIL 部件（双反转六环/环游粒子/扫描带）
      无法经 CSS 暂停，直接隐藏，留实线六边舱+核心点静态骨架*/
    .zibll-home-aurora .vt-cyber .cy-dot,
    .zibll-home-aurora .vt-cyber .cy-br,
    .zibll-home-aurora .vt-cyber .cy-ping,
    .zibll-home-aurora .vt-cyber .cy-core {
        animation: none;
    }
    .zibll-home-aurora .vt-cyber .cy-dot { opacity: .18; }
    .zibll-home-aurora .vt-cyber .cy-hex.rot,
    .zibll-home-aurora .vt-cyber .cy-hex.inner,
    .zibll-home-aurora .vt-cyber .cy-orb,
    .zibll-home-aurora .vt-cyber .cy-scan,
    .zibll-home-aurora .vt-cyber .cy-ping {
        display: none;
    }
}

/*==== hero 背景样式（blob 彩色光斑 / aurora 极光带 / plain 纯净）====
   两模式区分：极光带=单色顶部大渐变光带+细网格纹理（保持原样）；彩色光斑=无网格、
   四色高饱和巨型光斑漂浮（2026-09-13 改：曾与极光带同样叠网格纹理，视觉无差别）*/
.zibll-home-aurora .bg-plain .aurora-bg {
    display: none;
}
.zibll-home-aurora .bg-aurora .aurora-blob {
    display: none;
}
.zibll-home-aurora .bg-blob .aurora-band,
.zibll-home-aurora .bg-blob .aurora-grid-mask {
    display: none;
}
/*星野微光：中心主题色柔光晕 + 两层错相呼吸的星点。⚠️浅色模式曾「看不到效果」——
  纯 1~2px 小点在浅底上对比不足、且呼吸下限 .35 一度淡到不可见；现大点带光晕头
  （14px 外圈+2.6px 实心核）、小点加量加大、呼吸下限提到 .6、光晕提到 22%。
  配色策略=主文本色（浅深两模式都是「深色/亮色」对比主力）+ 主题色/固定点缀色
  混排；纯 radial-gradient 星点零位图，opacity 呼吸走合成层，性能极轻*/
.zibll-home-aurora .aurora-stars {
    position: absolute;
    inset: 0;
    display: none;
}
.zibll-home-aurora .aurora-stars i {
    position: absolute;
    inset: 0;
}
.zibll-home-aurora .bg-stars .aurora-blob,
.zibll-home-aurora .bg-stars .aurora-band,
.zibll-home-aurora .bg-stars .aurora-grid-mask {
    display: none;
}
.zibll-home-aurora .bg-stars .aurora-stars {
    display: block;
}
/*头星：大点带光晕头，主题色/点缀色混排*/
.zibll-home-aurora .aurora-stars .st-head {
    background-image:
        radial-gradient(52% 46% at 50% 38%,
            color-mix(in srgb, var(--theme-color) 22%, transparent),
            transparent 72%),
        radial-gradient(16px 16px at 18% 30%, color-mix(in srgb, var(--theme-color) 16%, transparent), transparent 70%),
        radial-gradient(2.8px 2.8px at 18% 30%, var(--theme-color), transparent 99%),
        radial-gradient(15px 15px at 76% 20%, color-mix(in srgb, #7c5cff 16%, transparent), transparent 70%),
        radial-gradient(2.6px 2.6px at 76% 20%, #7c5cff, transparent 99%),
        radial-gradient(16px 16px at 88% 58%, color-mix(in srgb, var(--theme-color) 14%, transparent), transparent 70%),
        radial-gradient(3px 3px at 88% 58%, var(--theme-color), transparent 99%),
        radial-gradient(14px 14px at 34% 70%, color-mix(in srgb, #20c8d8 14%, transparent), transparent 70%),
        radial-gradient(2.6px 2.6px at 34% 70%, #20c8d8, transparent 99%),
        radial-gradient(15px 15px at 60% 14%, color-mix(in srgb, var(--theme-color) 14%, transparent), transparent 70%),
        radial-gradient(2.8px 2.8px at 60% 14%, var(--theme-color), transparent 99%);
    animation: zb-stars-breathe 5.2s ease-in-out infinite alternate;
}
/*细星：主文本色小点（浅底=深点、深底=亮点，对比永远在线），数量加密*/
.zibll-home-aurora .aurora-stars .st-dust {
    background-image:
        radial-gradient(1.8px 1.8px at 12% 14%, var(--main-color), transparent 99%),
        radial-gradient(1.6px 1.6px at 27% 47%, var(--main-color), transparent 99%),
        radial-gradient(1.9px 1.9px at 41% 22%, var(--main-color), transparent 99%),
        radial-gradient(1.6px 1.6px at 52% 62%, var(--main-color), transparent 99%),
        radial-gradient(1.8px 1.8px at 66% 38%, var(--main-color), transparent 99%),
        radial-gradient(1.6px 1.6px at 71% 74%, var(--main-color), transparent 99%),
        radial-gradient(1.9px 1.9px at 84% 30%, var(--main-color), transparent 99%),
        radial-gradient(1.6px 1.6px at 93% 76%, var(--main-color), transparent 99%),
        radial-gradient(1.7px 1.7px at 16% 84%, var(--main-color), transparent 99%),
        radial-gradient(1.6px 1.6px at 46% 88%, var(--main-color), transparent 99%),
        radial-gradient(1.7px 1.7px at 6% 52%, var(--main-color), transparent 99%),
        radial-gradient(1.6px 1.6px at 33% 8%, var(--main-color), transparent 99%),
        radial-gradient(1.7px 1.7px at 57% 45%, var(--main-color), transparent 99%),
        radial-gradient(1.6px 1.6px at 79% 8%, var(--main-color), transparent 99%),
        radial-gradient(1.7px 1.7px at 95% 24%, var(--main-color), transparent 99%);
    animation: zb-stars-breathe 6.8s ease-in-out -3.4s infinite alternate;
}
@keyframes zb-stars-breathe {
    from { opacity: .6; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .zibll-home-aurora .aurora-stars .st-head,
    .zibll-home-aurora .aurora-stars .st-dust {
        animation: none;
        opacity: .9;
    }
}
/*==== AI 科幻 / 水墨国风：两款意向化背景（2026-09-15 多轮定稿；草地轻风已删——
   大色块被斥不高级、逐根草未达印象派预期）。共同纪律：不用大面积色块铺底、
   不加水平线/水平光带（干扰内容）；一切颜色走主题色/主文本色/页面底色的
   color-mix（前给回退行）→ 深浅色自动翻转；动画只用 transform/opacity/背景位移。====*/
.zibll-home-aurora .aurora-cyber,
.zibll-home-aurora .aurora-ink {
    position: absolute;
    inset: 0;
    display: none;
}
/*新模式互斥隐藏：其余装饰层全部让位*/
.zibll-home-aurora .bg-cyber .aurora-blob,
.zibll-home-aurora .bg-cyber .aurora-band,
.zibll-home-aurora .bg-cyber .aurora-grid-mask,
.zibll-home-aurora .bg-cyber .aurora-stars,
.zibll-home-aurora .bg-cyber .aurora-ink,
.zibll-home-aurora .bg-ink .aurora-blob,
.zibll-home-aurora .bg-ink .aurora-band,
.zibll-home-aurora .bg-ink .aurora-grid-mask,
.zibll-home-aurora .bg-ink .aurora-stars,
.zibll-home-aurora .bg-ink .aurora-cyber {
    display: none;
}
.zibll-home-aurora .bg-cyber .aurora-cyber { display: block; }
.zibll-home-aurora .bg-ink .aurora-ink { display: block; }

/*--- AI 科幻：弱透视地面网格 + 0/1 数据矩阵雨 + 漂浮公式 =「智能在运算」。
   ⚠️无水平线元素（用户两轮否决：扫描带大面积扫光、地平线横线均干扰内容阅读）---*/
.zibll-home-aurora .aurora-cyber > i { position: absolute; }
/*地面透视网格（弱存在感，只作地平线舞台）*/
.zibll-home-aurora .cyber-grid {
    left: -70%;
    right: -70%;
    bottom: -2%;
    height: 46%;
    background-image:
        linear-gradient(90deg, var(--theme-color) 1px, transparent 1px),
        linear-gradient(0deg, var(--theme-color) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: perspective(340px) rotateX(63deg);
    transform-origin: bottom center;
    opacity: .1;
    -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 82%);
    mask-image: linear-gradient(to top, #000 6%, transparent 82%);
    animation: zb-cyber-flow 6s linear infinite;
}
@keyframes zb-cyber-flow {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, 0 46px; }
}
/*数据矩阵雨：竖排 0/1 字符列自上方坠落（白噪声式确定性布列），上下缘渐隐*/
.zibll-home-aurora .cyber-matrix {
    position: absolute;
    inset: 0;
    font-family: ui-monospace, 'Courier New', Consolas, monospace;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent);
}
.zibll-home-aurora .cm {
    position: absolute;
    top: 0;
    white-space: pre;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .1em;
    color: var(--theme-color);
    opacity: .16;
    will-change: transform;
    animation: zb-matrix-fall var(--s) linear var(--dl) infinite;
}
.zibll-home-aurora .cm:nth-child(2n) { opacity: .1; font-size: 11px; }
@keyframes zb-matrix-fall {
    from { transform: translateY(-72%); }
    to   { transform: translateY(120%); }
}
/*公式浮字：散落的经典方程缓慢漂移，像演算悬在思维空气里*/
.zibll-home-aurora .cyber-eq { position: absolute; inset: 0; }
.zibll-home-aurora .ce {
    position: absolute;
    font-family: 'Times New Roman', Georgia, serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--main-color);
    opacity: .1;
    white-space: nowrap;
    animation: zb-eq-float var(--s) ease-in-out var(--dl) infinite alternate;
}
@keyframes zb-eq-float {
    from { transform: translate3d(0, 0, 0); opacity: .06; }
    to   { transform: translate3d(14px, -18px, 0); opacity: .14; }
}
/*--- 水墨国风：三重平滑曲线山脊仅占 hero 底部三分之一（viewBox y≥300），
   山间两条流雾（页面底色渐变，随底色自动翻转）——无月无鸟（用户否决），
   山体=var(--main-color) 低透明：浅底淡墨黛山、深底映白远峰 ---*/
.zibll-home-aurora .ink-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.zibll-home-aurora .ink-r1 { fill: var(--main-color); opacity: .06; }
.zibll-home-aurora .ink-r2 { fill: var(--main-color); opacity: .1; }
.zibll-home-aurora .ink-r3 { fill: var(--main-color); opacity: .17; }
.zibll-home-aurora .ink-mist { transform: translateX(0); animation: zb-ink-drift 24s ease-in-out infinite alternate; }
.zibll-home-aurora .ink-mist:nth-of-type(2) { animation-duration: 19s; animation-delay: -7s; }
.zibll-home-aurora .ink-ms-a { stop-color: var(--main-bg-color); stop-opacity: 0; }
.zibll-home-aurora .ink-ms-b { stop-color: var(--main-bg-color); stop-opacity: .85; }
.zibll-home-aurora .ink-ms-c { stop-color: var(--main-bg-color); stop-opacity: 0; }
@keyframes zb-ink-drift {
    from { transform: translateX(-3%); }
    to   { transform: translateX(3%); }
}
/*reduced-motion：两款背景动效全停（静态构图保留）*/
@media (prefers-reduced-motion: reduce) {
    .zibll-home-aurora .cyber-grid,
    .zibll-home-aurora .cm,
    .zibll-home-aurora .ce,
    .zibll-home-aurora .ink-mist {
        animation: none;
    }
}
/*极光带：顶部大面积主题色渐变光带，缓慢摆动呼吸。
  ⚠️渐变焦点必须落在 hero 可视区内（曾放 50% 0% 且条带 top 为负——焦点被
  overflow:hidden 裁掉，只剩淡尾，表现为「切换背景无效」）*/
.zibll-home-aurora .aurora-band {
    position: absolute;
    left: -10%;
    right: -10%;
    top: -6%;
    height: 74%;
    transform-origin: top center;
    background: var(--theme-color);
    background: radial-gradient(62% 88% at 50% 22%,
        color-mix(in srgb, var(--theme-color) 52%, transparent),
        color-mix(in srgb, var(--theme-color) 18%, transparent) 58%,
        transparent 82%);
    filter: blur(34px);
    animation: zb-band-sway 11s ease-in-out infinite alternate;
}
@keyframes zb-band-sway {
    from { transform: translateX(-2.5%) scaleY(1); }
    to   { transform: translateX(2.5%) scaleY(1.12); }
}

/*==== 异形底部（自然渐隐过渡带）：⚠️教训——绝不能用色块「盖」hero 背景做过渡
   （实色=硬裁、渐变=异色带，光斑背景下一律露馅生硬）。正确做法=背景层 .aurora-bg
   挂「遮罩渐隐」：内联 SVG data-URI（--zsh-shape-mask，白=保留黑=擦除的亮度遮罩，
   SVG 内部用 <mask> 转成真 alpha 以便 CSS 多层掩码兼容）把 hero 背景沿波浪曲线
   擦到透明——曲线以下不再是「换了一层颜色」而是背景自身淡出，直边底缘一并吞掉，
   无论光斑/极光带/星野/纯净什么背景都不可能有生硬换色，与下方区块自然衔接。
   遮罩两图层叠加：实色层盖住 hero 主体 + 曲线羽化层挂底部 --zsh-shape-h 高
   （viewBox 100 单位，y75≈hero 底缘：峰在缘上、谷垂入下探舌形区，羽化坡约 40% 带宽
   =柔和边界）。背景层同步下探 25% 带高供舌形淡出。
   动效（shape-anim）：data-URI 遮罩无法逐帧换形，波动观感由描边/扫描线 d 形变承担
   （柔化坡远大于摆幅，边界不动而光带游动，读起来正是「水面呼吸」）。
   微光（shape-glow）：极淡轨道线 + 两端渐隐的彩色光斑沿曲线扫描（SMIL 平移渐变窗）。
   深浅色全走变量自动翻转 ====*/
.zibll-home-aurora .zibll-home-hero {
    --zsh-shape-h: var(--zsh-shape-h-set, 120px); /*过渡带高度（设置内联覆写 --zsh-shape-h-set）*/
    --zsh-shape-bleed: calc(var(--zsh-shape-h) * 0.25); /*背景层下探深度（遮罩 y75 与 hero 底缘对齐的关键比例）*/
}
.zibll-home-aurora .zibll-home-hero.shape-on {
    overflow: visible; /*让背景层下探与带体越过 hero 直边*/
}
.zibll-home-aurora .shape-on .aurora-bg {
    bottom: calc(-1 * var(--zsh-shape-bleed)); /*背景层下探（光斑舌形区）*/
    overflow: hidden; /*光斑裁切下沉到本层（原靠 hero overflow:hidden）*/
}
.zibll-home-aurora .shape-on .aurora-bg {
    -webkit-mask-image: linear-gradient(#000 0 0), var(--zsh-shape-mask);
    mask-image: linear-gradient(#000 0 0), var(--zsh-shape-mask);
    -webkit-mask-size: 100% calc(100% - var(--zsh-shape-h) + 2px), 100% var(--zsh-shape-h);
    mask-size: 100% calc(100% - var(--zsh-shape-h) + 2px), 100% var(--zsh-shape-h);
    -webkit-mask-position: 0 0, 0 100%;
    mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.zibll-home-aurora .aurora-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--zsh-shape-bleed) - 1px); /*与背景层下探区同幅，描边/扫描线正骑在渐隐边界上*/
    height: var(--zsh-shape-h);
    pointer-events: none;
    z-index: 3;
}
.zibll-home-aurora .aurora-shape svg {
    position: absolute;
    inset: 0; /*双 svg 重叠摆放（正常流会上下堆叠）*/
    width: 100%;
    height: 100%;
}
/*微光描边（默认关）：常显极淡主题色轨道线，作扫描亮线的底衬*/
.zibll-home-aurora .shape-main .shape-edge {
    display: none;
}
.zibll-home-aurora .shape-glow .shape-main .shape-edge {
    display: block;
    fill: none;
    stroke: var(--theme-color);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: .01;
}
/*扫描亮线=沿曲线移动、两端渐隐的彩色光斑（渐变窗由 defs 的 animateTransform 平移，
  两端 stop-opacity=0 天然淡入淡出）。stop 色走 CSS 变量随深浅色翻转*/
.zibll-home-aurora .zb-sc-a { stop-color: var(--theme-color); stop-opacity: 0; }
.zibll-home-aurora .zb-sc-b { stop-color: #50a5ea; stop-opacity: 0.85; }
.zibll-home-aurora .zb-sc-c { stop-color: var(--theme-color); stop-opacity: 0; }
.zibll-home-aurora .shape-main .shape-scan {
    display: none;
}
.zibll-home-aurora .shape-glow .shape-main .shape-scan {
    display: block;
    fill: none;
    stroke: url(#zb-scan-grad);
    stroke-width: 1.6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/*动效：描边/扫描线沿曲线 d 形变（背景渐隐边界由 data-URI 遮罩固定，摆幅在柔化坡内不可见）
  ⚠️.shape-wave 等用 :where() 归零权重，使 reduced-motion 的 .shape-anim(0,2,0) 能压过本组并靠后者胜出*/
.zibll-home-aurora .shape-anim:where(.shape-wave)   .shape-edge,
.zibll-home-aurora .shape-anim:where(.shape-wave)   .shape-scan { animation: zb-shape-edge-wave 16s ease-in-out infinite alternate; }
.zibll-home-aurora .shape-anim:where(.shape-curve)  .shape-edge,
.zibll-home-aurora .shape-anim:where(.shape-curve)  .shape-scan { animation: zb-shape-edge-curve 14s ease-in-out infinite alternate; }
.zibll-home-aurora .shape-anim:where(.shape-angle)  .shape-edge,
.zibll-home-aurora .shape-anim:where(.shape-angle)  .shape-scan { animation: zb-shape-edge-angle 12s ease-in-out infinite alternate; }
@keyframes zb-shape-edge-wave {
    from { d: path("M0,70 C 120,42 260,96 420,64 C 580,38 700,98 880,70 C 1060,44 1180,94 1440,60"); }
    to   { d: path("M0,58 C 120,94 260,40 420,74 C 580,98 700,36 880,62 C 1060,96 1180,32 1440,78"); }
}
@keyframes zb-shape-edge-curve {
    from { d: path("M0,95 Q 720,40 1440,95"); }
    to   { d: path("M0,86 Q 720,62 1440,86"); }
}
@keyframes zb-shape-edge-angle {
    from { d: path("M0,92 L 1440,48"); }
    to   { d: path("M0,66 L 1440,86"); }
}
/*reduced-motion：描边/扫描线动效全停（data-URI 遮罩本就静态）；扫描光斑隐藏*/
@media (prefers-reduced-motion: reduce) {
    .zibll-home-aurora .shape-anim .shape-edge,
    .zibll-home-aurora .shape-anim .shape-scan,
    .zibll-home-aurora .shape-glow .shape-main .shape-scan {
        animation: none;
    }
    .zibll-home-aurora .shape-glow .shape-main .shape-scan {
        display: none;
    }
}
/*内容避让：渐隐带峰部高出底缘约 .3 带高（柔化坡再往上一点）——内容区留出底边距，
  按钮与下滑箭头均入流排布，不压进渐隐区*/
.zibll-home-aurora .aurora-hero-in {
    position: relative;
    z-index: 2;
}
.zibll-home-aurora .zibll-home-hero.shape-on .aurora-hero-in {
    padding-bottom: calc(var(--zsh-shape-h) * .42);
}

/*下滑指示：按钮下方入流（间距 ≥20px），呼吸动画箭头*/
.zibll-home-aurora .aurora-scroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 24px auto 0;
    border-radius: 50%;
    font-size: 16px;
    color: var(--muted-2-color);
    border: 1px solid var(--main-border-color);
    animation: zb-aurora-scroll 2.2s ease-in-out infinite;
}
@keyframes zb-aurora-scroll {
    0%, 100% { transform: translateY(0); opacity: .6; }
    50%      { transform: translateY(7px); opacity: 1; }
}

/*==== 文章卡：主题色发光悬浮（覆写 base 默认外观）====*/
.zibll-home-aurora .zibll-home-post-card {
    border: 1px solid var(--main-border-color);
    border-color: color-mix(in srgb, var(--main-border-color) 60%, transparent);
}
.zibll-home-aurora .zibll-home-post-card:hover {
    box-shadow: 0 14px 40px color-mix(in srgb, var(--theme-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
}
.zibll-home-aurora .zibll-home-post-card .card-title {
    transition: color .2s;
}
.zibll-home-aurora .zibll-home-post-card:hover .card-title {
    color: var(--theme-color);
}
.zibll-home-aurora .zibll-home-post-card .card-more {
    color: var(--theme-color);
}

/*==== 分类导航卡：封面图卡（无图=图标占位）+ 名称 + 描述 + 计数徽标 ====*/
.zibll-home-aurora .aurora-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.zibll-home-aurora .aurora-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 14px;
    border-radius: var(--zsh-radius, var(--main-radius));
    overflow: hidden;
    background: var(--muted-bg-color);
    border: 1px solid var(--main-border-color);
    border-color: color-mix(in srgb, var(--main-border-color) 55%, transparent);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.zibll-home-aurora .aurora-cat-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-color) 15%, transparent);
}
/*封面：约 21:9 横幅；无图=主题色微染图标位；hover 图片微放大*/
.zibll-home-aurora .aurora-cat-card .cat-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: calc(var(--zsh-radius, var(--main-radius)) - 4px);
    overflow: hidden;
    background: var(--theme-color);
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-color) 20%, var(--muted-bg-color)), color-mix(in srgb, var(--theme-color) 8%, var(--muted-bg-color)));
}
.zibll-home-aurora .aurora-cat-card .cat-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s;
}
.zibll-home-aurora .aurora-cat-card:hover .cat-cover img {
    transform: scale(1.06);
}
.zibll-home-aurora .aurora-cat-card .cat-cover .fa {
    font-size: 30px;
    color: var(--theme-color);
    background: var(--theme-color);
    background: color-mix(in srgb, var(--theme-color) 14%, transparent);
    padding: 20px;
    border-radius: 50%;
}
/*计数徽标：右上角深色半透明胶囊（有图/无图均可读）*/
.zibll-home-aurora .aurora-cat-card .cat-count {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
/*文字区：名称 + 描述两行截断*/
.zibll-home-aurora .aurora-cat-card .cat-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 4px 0;
    min-width: 0;
}
.zibll-home-aurora .aurora-cat-card .cat-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s;
}
.zibll-home-aurora .aurora-cat-card:hover .cat-name {
    color: var(--theme-color);
}
.zibll-home-aurora .aurora-cat-card .cat-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted-2-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*==== 响应式 ====*/
@media (max-width: 992px) {
    .zibll-home-aurora .aurora-cats {
        grid-template-columns: repeat(2, 1fr);
    }
    .zibll-home-aurora .aurora-orbit {
        width: min(100%, 320px);
    }
}
@media (max-width: 768px) {
    .zibll-home-aurora .zibll-home-hero {
        min-height: 0;
        padding: var(--zsh-pt, 52px) 0 var(--zsh-pb, 0);
    }
    /*异形底部收窄：窄屏曲线过高压不住（用户设置值仍为上限）*/
    .zibll-home-aurora .zibll-home-hero {
        --zsh-shape-h: min(22px, var(--zsh-shape-h-set, 22px));
    }
    .zibll-home-aurora .aurora-orbit {
        width: min(100%, 240px);
        margin-bottom: -6px;
    }
    .zibll-home-aurora .aurora-hero-title {
        font-size: 30px;
    }
    .zibll-home-aurora .aurora-hero-desc {
        font-size: 14px;
    }
    .zibll-home-aurora .aurora-blob {
        filter: blur(48px);
        opacity: .35;
    }
    .zibll-home-aurora .aurora-band {
        filter: blur(26px);
    }
}
@media (max-width: 560px) {
    .zibll-home-aurora .aurora-cats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .zibll-home-aurora .aurora-scroll {
        display: none;
    }
}

/*尊重系统减弱动效设置*/
@media (prefers-reduced-motion: reduce) {
    .zibll-home-aurora .aurora-blob {
        animation: none;
    }
}