/**
 * Zibll动态Logo引擎 - 前台样式
 * 全部尺寸由 PHP 端编译为 CSS 变量（--zclx-*），此处只消费
 */

/* ============ 结构 ============ */
.zclx-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--zclx-gap, 6px);
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}
.zclx-logo-icon {
    width: var(--zclx-icon-size, 34px);
    height: var(--zclx-icon-size, 34px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zclx-logo-icon svg,
.zclx-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
.zclx-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--zclx-gap, 6px);
    min-width: 0;
}
.zclx-logo-main {
    font-family: var(--zclx-main-font, 'Noto Sans SC', sans-serif);
    font-size: var(--zclx-main-size, 19px);
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.1;
    color: var(--zclx-main-color, #2b2b2b);
    display: flex;
    justify-content: space-between;
    position: relative;
    white-space: nowrap;
}
.zclx-logo-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--zclx-sub-size, 8px);
    font-weight: 700;
    color: var(--zclx-sub-color, #fc4956);
    letter-spacing: 3.5px;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}
.zclx-logo .word {
    display: inline-block;
    will-change: transform, opacity, color, text-shadow;
}

/* ============ 设计器作品：后台 Logo 设计器保存的完整 SVG ============ */
/* 画布尺寸仅占位：前台不显示画布底色（导出 SVG 已透明），高度由 --zclx-designer-h 约束 */
.zclx-logo.zclx-designer {
    gap: 0;
    margin: 0;
}
.zclx-logo.zclx-designer .zclx-logo-icon {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zclx-logo.zclx-designer .zclx-designer-wrap {
    width: auto;
    height: var(--zclx-designer-h, 64px);
    max-width: 100%;
    /* 防突出菜单栏：JS 接管时按主题导航原 Logo 的占位高度写入 --zclx-fit（并随窗口断点重测）；
       未写入时（如页脚）不约束，保持设定高度 */
    max-height: min(var(--zclx-designer-h, 64px), var(--zclx-fit, 100vh));
}
.zclx-logo.zclx-designer .zclx-designer-wrap svg {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    background: transparent; /* 画布底色绝不带到前台 */
    filter: none;
}
/* 接管宿主：Logo 垂直居中于菜单栏（替换掉主题默认对齐，避免贴顶/贴底溢出） */
.navbar-logo:has(.zclx-designer),
.footer-logo:has(.zclx-designer) {
    display: flex;
    align-items: center;
}

/* 日 / 夜 Logo 叠放切换：日间在文档流中定尺寸，夜间绝对定位覆盖 */
.zclx-logo.zclx-designer .zclx-designer-wrap--night {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}
/* 子比夜间主题（兼容多种夜间标记）：隐藏日间、显示夜间 */
html.nuit .zclx-logo.zclx-designer .zclx-designer-wrap--day,
body.nuit .zclx-logo.zclx-designer .zclx-designer-wrap--day,
.zibll-dark-theme .zclx-logo.zclx-designer .zclx-designer-wrap--day,
html[data-theme="dark"] .zclx-logo.zclx-designer .zclx-designer-wrap--day,
body.dark .zclx-logo.zclx-designer .zclx-designer-wrap--day {
    display: none;
}
html.nuit .zclx-logo.zclx-designer .zclx-designer-wrap--night,
body.nuit .zclx-logo.zclx-designer .zclx-designer-wrap--night,
.zibll-dark-theme .zclx-logo.zclx-designer .zclx-designer-wrap--night,
html[data-theme="dark"] .zclx-logo.zclx-designer .zclx-designer-wrap--night,
body.dark .zclx-logo.zclx-designer .zclx-designer-wrap--night {
    display: block;
}

/* 设计器作品 CSS 特效（filter 动画作用于整个 SVG，SVG 天然兼容） */
.zclx-designer.zclx-dfx-glitch .zclx-designer-wrap svg {
    animation: zclx-dfx-glitch 2.4s steps(2, end) infinite;
}
@keyframes zclx-dfx-glitch {
    0%, 84%, 100% { filter: none; }
    86% { filter: hue-rotate(-50deg) saturate(2.4); }
    88% { filter: hue-rotate(35deg) contrast(1.5); }
    90% { filter: invert(.15); }
    92% { filter: hue-rotate(-20deg) saturate(1.8); }
    94% { filter: none; }
}
.zclx-designer.zclx-dfx-spotlight .zclx-designer-wrap svg {
    animation: zclx-dfx-spotlight 3.6s ease-in-out infinite;
}
@keyframes zclx-dfx-spotlight {
    0%, 100% { filter: none; }
    25% { filter: brightness(1.18) hue-rotate(60deg) saturate(1.6); }
    50% { filter: brightness(1.1) hue-rotate(-60deg) saturate(1.4); }
    75% { filter: brightness(1.22) hue-rotate(140deg) saturate(1.7); }
}
.zclx-designer.zclx-dfx-glass .zclx-designer-wrap svg {
    animation: zclx-dfx-glass 3.2s ease-in-out infinite;
}
@keyframes zclx-dfx-glass {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.28) saturate(1.3) drop-shadow(0 0 6px rgba(255, 255, 255, .65)); }
}

/* 深色模式适配：子比夜间主题下主标题自动变亮 */
.zibll-dark-theme .zclx-logo-main {
    color: #fff;
}

/* ============ 文字特效：赛博朋克故障 ============ */
.zclx-glitch .word {
    position: relative;
    animation: zclx-skew calc(4s / var(--zclx-speed, 1)) infinite;
}
.zclx-glitch .word::before,
.zclx-glitch .word::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0.8;
    pointer-events: none;
}
.zclx-glitch .word::before {
    animation: zclx-g1 calc(0.8s / var(--zclx-speed, 1)) infinite linear alternate-reverse;
    color: inherit;
    text-shadow: 2px 0 0 rgba(78, 158, 255, 0.8), -2px 0 0 rgba(0, 255, 0, 0.8);
    z-index: -1;
}
.zclx-glitch .word::after {
    animation: zclx-g2 calc(0.8s / var(--zclx-speed, 1)) infinite linear alternate-reverse;
    color: inherit;
    text-shadow: 2px 0 0 rgba(233, 69, 96, 0.8), -2px 0 0 rgba(255, 255, 0, 0.8);
    z-index: -2;
}
@keyframes zclx-skew {
    0%, 100% { transform: skew(0deg); }
    2% { transform: skew(2deg); }
    4% { transform: skew(-2deg); }
    6% { transform: skew(1deg); }
    8% { transform: skew(-1deg); }
    10%, 90% { transform: skew(0deg); }
}
@keyframes zclx-g1 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: .8; }
    10% { clip-path: inset(20% 0 30% 0); transform: translate(-1.5px, .5px); opacity: 1; }
    20% { clip-path: inset(10% 0 60% 0); transform: translate(1.5px, -.5px); opacity: .6; }
    30% { clip-path: inset(40% 0 40% 0); transform: translate(-1.5px, 1.5px); opacity: 1; }
    40% { clip-path: inset(70% 0 10% 0); transform: translate(1.5px, -1.5px); opacity: .7; }
    50% { clip-path: inset(30% 0 50% 0); transform: translate(-.5px, .5px); opacity: .9; }
    60% { clip-path: inset(50% 0 30% 0); transform: translate(.5px, -.5px); opacity: .5; }
    70% { clip-path: inset(80% 0 10% 0); transform: translate(-1.5px, 1.5px); opacity: .8; }
    80% { clip-path: inset(15% 0 70% 0); transform: translate(1.5px, -1.5px); opacity: 1; }
}
@keyframes zclx-g2 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: .8; }
    10% { clip-path: inset(60% 0 20% 0); transform: translate(1.5px, -.5px); opacity: .6; }
    20% { clip-path: inset(30% 0 50% 0); transform: translate(-1.5px, .5px); opacity: 1; }
    30% { clip-path: inset(10% 0 70% 0); transform: translate(1.5px, -1.5px); opacity: .7; }
    40% { clip-path: inset(40% 0 40% 0); transform: translate(-1.5px, 1.5px); opacity: .9; }
    50% { clip-path: inset(70% 0 10% 0); transform: translate(.5px, -.5px); opacity: .5; }
    60% { clip-path: inset(20% 0 60% 0); transform: translate(-.5px, .5px); opacity: 1; }
    70% { clip-path: inset(50% 0 30% 0); transform: translate(1.5px, -1.5px); opacity: .8; }
    80% { clip-path: inset(80% 0 10% 0); transform: translate(-1.5px, 1.5px); opacity: .6; }
}

/* ============ 文字特效：玻璃高光 ============ */
.zclx-glass .zclx-logo-main { overflow: hidden; }
.zclx-glass .zclx-logo-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100px;
    width: 35px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: zclx-shine calc(4s / var(--zclx-speed, 1)) ease-in-out infinite;
    pointer-events: none;
}
@keyframes zclx-shine {
    0% { left: -50px; }
    20% { left: 120%; }
    100% { left: 120%; }
}

/* ============ 文字特效：聚光灯 ============ */
.zclx-spotlight .sl-base { position: relative; display: inline-block; opacity: 0.25; }
.zclx-spotlight .sl-layer {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    color: inherit;
    pointer-events: none;
}
.zclx-spotlight .sl-1 { animation: zclx-c1 calc(3.5s / var(--zclx-speed, 1)) infinite alternate ease-in-out; filter: blur(1px); }
.zclx-spotlight .sl-2 { animation: zclx-c2 calc(4.5s / var(--zclx-speed, 1)) infinite alternate ease-in-out; filter: blur(.5px); }
.zclx-spotlight .sl-3 { animation: zclx-c3 calc(5.5s / var(--zclx-speed, 1)) infinite alternate ease-in-out; filter: blur(1.5px); }
@keyframes zclx-c1 {
    0% { clip-path: circle(30% at 0% 0%); }
    25% { clip-path: circle(40% at 100% 20%); }
    50% { clip-path: circle(20% at 50% 50%); }
    75% { clip-path: circle(35% at 0% 100%); }
    100% { clip-path: circle(45% at 100% 100%); }
}
@keyframes zclx-c2 {
    0% { clip-path: circle(25% at 100% 0%); }
    25% { clip-path: circle(35% at 0% 20%); }
    50% { clip-path: circle(45% at 50% 50%); }
    75% { clip-path: circle(25% at 100% 100%); }
    100% { clip-path: circle(35% at 0% 100%); }
}
@keyframes zclx-c3 {
    0% { clip-path: circle(40% at 50% -20%); }
    25% { clip-path: circle(20% at 100% 50%); }
    50% { clip-path: circle(30% at 0% 50%); }
    75% { clip-path: circle(40% at 50% 120%); }
    100% { clip-path: circle(20% at 50% 50%); }
}