/* dlx-login-bg.css - 登录页几何背景
   所有颜色均由主题色 --primary-r/g/b 衍生（dlx-layui.css 第 5-7 行），
   修改主题色后本背景自动跟随，无需改动本文件。 */

.login-bg-wrapper {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* 两团主题色光晕：右上浓一点，左下淡一点，中间干净过渡 */
    background:
        radial-gradient(circle at 85% 12%,
            rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.10) 0%,
            rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.04) 32%,
            transparent 62%),
        radial-gradient(circle at 10% 90%,
            rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.08) 0%,
            rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.03) 34%,
            transparent 64%);
}

/* 右上：描边圆环（box-shadow 在左中投一个极淡的圆盘作点缀），超慢漂移 */
.login-bg-wrapper::before {
    content: '';
    position: absolute;
    top: -12vw;
    right: -10vw;
    width: 34vw;
    height: 34vw;
    min-width: 300px;
    min-height: 300px;
    border: 1.5px solid rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.22);
    border-radius: 50%;
    box-shadow: -36vw 60vh 0 -8vw rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.10);
    animation: dlx-login-drift 26s ease-in-out infinite;
}

/* 左下：实心小圆，反向漂移 */
.login-bg-wrapper::after {
    content: '';
    position: absolute;
    bottom: -6vw;
    left: -5vw;
    width: 16vw;
    height: 16vw;
    min-width: 150px;
    min-height: 150px;
    border-radius: 50%;
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.10);
    animation: dlx-login-drift 22s ease-in-out infinite reverse;
}

/* 超慢浮动：幅度小、周期长，安静不抢戏 */
@keyframes dlx-login-drift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-24px, 28px); }
}

/* 深色主题：整体减弱，避免光斑发灰 */
.theme-dark .login-bg-wrapper {
    opacity: 0.5;
}

/* ========== 左上：点线点缀（点阵 + 渐隐细线） ========== */
/* 点阵：7×7 主题色小点（"点"），页面加载时淡入 */
body::before {
    content: '';
    position: fixed;
    top: 48px;
    left: 48px;
    width: 112px;
    height: 112px;
    background-image: radial-gradient(
        rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.28) 1.5px,
        transparent 1.6px
    );
    background-size: 16px 16px;
    z-index: 0;
    pointer-events: none;
    animation: dlx-login-dots-in .8s ease-out both;
}

/* 水平渐隐细线（"线"）：从点阵右侧垂直中心引出，加载时自左向右生长 */
body::after {
    content: '';
    position: fixed;
    top: 103px;   /* 48 + 112/2 - 1 ≈ 点阵垂直中心 */
    left: 172px;  /* 48 + 112 + 12 间距 */
    width: 160px;
    height: 1.5px;
    background: linear-gradient(90deg,
        rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.35),
        transparent);
    border-radius: 999px;
    z-index: 0;
    pointer-events: none;
    transform-origin: left center;
    animation: dlx-login-line-grow 1s ease-out .3s both;
}

@keyframes dlx-login-dots-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dlx-login-line-grow {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* 深色主题：点线同样减弱 */
.theme-dark body::before,
.theme-dark body::after {
    filter: opacity(.5);
}

/* 尊重系统"减弱动态效果"设置（禁动画后元素保持自然可见状态） */
@media (prefers-reduced-motion: reduce) {
    .login-bg-wrapper::before,
    .login-bg-wrapper::after,
    body::before,
    body::after {
        animation: none;
    }
}