/* ======================== 魔改加载动画：头像+白粉背景 ======================== */

/* ====== 左右遮罩：极浅粉（几乎全白+一丢丢粉）====== */
.loading-bg,
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #fffbfc 30%,
            #fff5f7 50%,
            #fff0f3 70%,
            #ffeef2 100%
    ) !important;
}

/* 右侧遮罩反向 */
#loading-box .loading-right-bg {
    background: linear-gradient(
            225deg,
            #ffffff 0%,
            #fffbfc 30%,
            #fff5f7 50%,
            #fff0f3 70%,
            #ffeef2 100%
    ) !important;
}

/* ====== 隐藏原版旋转方块（橙色+青色的那个）====== */
#loading-box .spinner-box .configure-border-1,
#loading-box .spinner-box .configure-border-2,
#loading-box .spinner-box .configure-core {
    display: none !important;
}

/* ====== 用伪元素插入头像 ====== */
#loading-box .spinner-box::before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* 你的头像 */
    background-image: url('/img/avatar.jpg');
    background-size: cover;
    background-position: center;
    /* 粉色光晕边框 */
    box-shadow:
            0 0 20px rgba(255, 107, 157, 0.4),
            0 0 40px rgba(255, 182, 217, 0.2);
    /* 呼吸脉冲动画 */
    animation: avatar-pulse 2s ease-in-out infinite;
    border: 3px solid rgba(255, 255, 255, 0.8);
}

/* 头像呼吸动画 - 轻柔缩放 */
@keyframes avatar-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
                0 0 20px rgba(255, 107, 157, 0.4),
                0 0 40px rgba(255, 182, 217, 0.2);
    }
    50% {
        transform: scale(1.08);
        box-shadow:
                0 0 25px rgba(255, 107, 157, 0.6),
                0 0 50px rgba(255, 182, 217, 0.35);
    }
}

/* ====== 加载文字样式 ====== */
#loading-box .spinner-box .loading-word {
    /* 移到头像下方 */
    position: relative;
    top: 95px;
    font-size: 14px;
    letter-spacing: 4px;
    color: rgb(255, 102, 102) !important;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255, 182, 217, 0.5);
}

/* ====== 进度条（用 ::after 画一条粉色进度条）====== */
#loading-box .spinner-box::after {
    content: '';
    display: block;
    position: absolute;
    top: 190px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(
            90deg,
            transparent,
            rgb(255, 102, 102),
            #FF6B9D,
            rgb(255, 102, 102),
            transparent
    );
    background-size: 200% 100%;
    border-radius: 2px;
    /* 流动动画 */
    animation: progress-flow 1.5s ease-in-out infinite;
}

/* 进度条流动效果 */
@keyframes progress-flow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ====== 暗色模式适配 ====== */
/* ====== 暗色模式：深色为主 + 极微弱粉 ====== */
[data-theme="dark"] .loading-bg,
[data-theme="dark"] #loading-box .loading-left-bg {
    background: linear-gradient(
            135deg,
            #1a1018 0%,
            #211520 40%,
            #2a1522 70%,
            #330033 100%
    ) !important;
}

[data-theme="dark"] #loading-box .loading-right-bg {
    background: linear-gradient(
            225deg,
            #1a1018 0%,
            #211520 40%,
            #2a1522 70%,
            #330033 100%
    ) !important;
}