/* ============================================================
 * 千牛揽收助手 · 统一加载动画工具集 (loading.css)
 * 设计原则（基于 Emil Kowalski animations.dev）：
 *   1. 仅动画 transform / opacity → 全程 GPU 合成，零 layout/paint
 *   2. 旋转类用 linear（匀速循环）；脉冲/弹跳用 ease-in-out（自然节奏）
 *   3. 所有 loader 接入品牌色 token（--primary / --primary-light）
 *   4. 统一 @media (prefers-reduced-motion: reduce) 降级
 * 复用方式：<div class="qn-spin"></div> 等，可用 --qn-size / --qn-thick 微调
 * ============================================================ */

/* ---------- 1. 渐变旋转器（锥形渐变环，现代质感） ---------- */
.qn-spin {
    --qn-size: 36px;
    --qn-thick: 3px;
    width: var(--qn-size);
    height: var(--qn-size);
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, var(--primary-light) 38%, var(--primary) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--qn-thick)), #000 calc(100% - var(--qn-thick)));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--qn-thick)), #000 calc(100% - var(--qn-thick)));
    animation: qn-rotate 0.8s linear infinite;
    will-change: transform;
}

/* ---------- 2. 旋转圆环（经典描边环，带轨道底色） ---------- */
.qn-ring {
    --qn-size: 36px;
    --qn-thick: 3px;
    width: var(--qn-size);
    height: var(--qn-size);
    border-radius: 50%;
    border: var(--qn-thick) solid var(--bg-tertiary);
    border-top-color: var(--primary);
    animation: qn-rotate 0.8s linear infinite;
    will-change: transform;
}

/* ---------- 3. 脉冲圆点（三点缩放，简约节奏） ---------- */
.qn-dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.qn-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: qn-dot-pulse 1.2s ease-in-out infinite both;
    will-change: transform, opacity;
}
.qn-dots span:nth-child(2) { animation-delay: 0.15s; }
.qn-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ---------- 4. 打字指示器（对话 UI 三点上下浮动） ---------- */
.qn-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.qn-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-tertiary);
    animation: qn-typing-bounce 1.4s ease-in-out infinite;
    will-change: transform, opacity;
}
.qn-typing span:nth-child(2) { animation-delay: 0.2s; }
.qn-typing span:nth-child(3) { animation-delay: 0.4s; }

/* ---------- 5. 弹跳柱条（五柱交错，音频可视化风） ---------- */
.qn-bars {
    display: inline-flex;
    gap: 3px;
    align-items: flex-end;
    height: 24px;
}
.qn-bars span {
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: var(--primary);
    transform-origin: bottom;
    animation: qn-bar-bounce 1s ease-in-out infinite;
    will-change: transform;
}
.qn-bars span:nth-child(1) { animation-delay: 0s; }
.qn-bars span:nth-child(2) { animation-delay: 0.15s; }
.qn-bars span:nth-child(3) { animation-delay: 0.3s; }
.qn-bars span:nth-child(4) { animation-delay: 0.45s; }
.qn-bars span:nth-child(5) { animation-delay: 0.6s; }

/* ---------- 6. 波纹圆圈（涟漪扩散，雷达感） ---------- */
.qn-ripple {
    --qn-size: 36px;
    width: var(--qn-size);
    height: var(--qn-size);
    border-radius: 50%;
    border: 2px solid var(--primary);
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}
.qn-ripple::before,
.qn-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primary);
    box-sizing: border-box;
    animation: qn-ripple 1.6s ease-out infinite;
    will-change: transform, opacity;
}
.qn-ripple::after { animation-delay: 0.8s; }

/* ---------- 7. 骨架屏微光（GPU translateX 高光，零 paint） ---------- */
.qn-skeleton {
    --qn-skeleton-bg: var(--bg-tertiary);
    --qn-shimmer: rgba(255, 255, 255, 0.45);
    position: relative;
    overflow: hidden;
    background: var(--qn-skeleton-bg);
    border-radius: var(--radius-sm, 6px);
}
.qn-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--qn-shimmer), transparent);
    animation: qn-shimmer 1.4s ease-in-out infinite;
    will-change: transform;
}
[data-theme="dark"] .qn-skeleton { --qn-shimmer: rgba(255, 255, 255, 0.08); }

/* ---------- 8. DNA 双螺旋（装饰性品牌彩蛋，3D 扭转梯） ---------- */
.qn-dna {
    --qn-w: 24px;
    --qn-h: 36px;
    width: var(--qn-w);
    height: var(--qn-h);
    position: relative;
    display: inline-block;
    perspective: 90px;
}
.qn-dna i {
    position: absolute;
    left: 2px;
    right: 2px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-light), var(--primary));
    transform-origin: 50% 50%;
    animation: qn-dna-twist 1.4s linear infinite;
    will-change: transform;
}
.qn-dna i:nth-child(1) { top: 0;    animation-delay: 0s; }
.qn-dna i:nth-child(2) { top: 25%;  animation-delay: 0.14s; }
.qn-dna i:nth-child(3) { top: 50%;  animation-delay: 0.28s; }
.qn-dna i:nth-child(4) { top: 75%;  animation-delay: 0.42s; }
.qn-dna i:nth-child(5) { top: auto; bottom: 0; animation-delay: 0.56s; }

/* ---------- 公共关键帧 ---------- */
@keyframes qn-rotate {
    to { transform: rotate(360deg); }
}
@keyframes qn-dot-pulse {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
@keyframes qn-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}
@keyframes qn-bar-bounce {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}
@keyframes qn-ripple {
    0% { transform: scale(0.4); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes qn-shimmer {
    100% { transform: translateX(100%); }
}
@keyframes qn-dna-twist {
    0% { transform: rotateY(0deg) scaleX(1); }
    50% { transform: rotateY(90deg) scaleX(0.18); }
    100% { transform: rotateY(180deg) scaleX(1); }
}

/* ---------- 无障碍：尊重用户"减少动态效果"系统设置 ---------- */
@media (prefers-reduced-motion: reduce) {
    .qn-spin,
    .qn-ring,
    .qn-dots span,
    .qn-typing span,
    .qn-bars span,
    .qn-ripple,
    .qn-ripple::before,
    .qn-ripple::after,
    .qn-skeleton::after,
    .qn-dna i {
        animation: none !important;
    }
    /* 保留可读静态态，而非完全消失 */
    .qn-dots span,
    .qn-typing span,
    .qn-bars span { opacity: 0.6; transform: none; }
    .qn-skeleton::after { display: none; }
    .qn-ripple::before,
    .qn-ripple::after { display: none; }
    .qn-dna i { transform: none; }
}