/* ─── BASE — با CSS Variable برای دارک مود ─── */
html,
body {
    margin: 0;
    overflow-x: hidden;
    /* [FIX] از variable استفاده می‌کنیم تا .dark-mode بتونه override کنه */
    background-color: var(--gl-bg-base, #f0f5fc);
}

/* ─── GRID OVERLAY ─── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background-image:
        linear-gradient(to right,  rgba(42, 95, 142, .09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(42, 95, 142, .09) 1px, transparent 1px),
        linear-gradient(to right,  rgba(160, 175, 6, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(160, 175, 6, .05) 1px, transparent 1px);

    background-size:
        80px 80px,
        80px 80px,
        20px 20px,
        20px 20px;

    opacity: .55;
    /* [FIX] transition برای تغییر نرم در دارک مود */
    transition: opacity .35s ease, background-image .35s ease;
}

/* ─── AMBIENT LIGHT (Top-Right) ─── */
body::after {
    content: '';
    position: fixed;
    width: 900px;
    height: 900px;
    top: -320px;
    right: -280px;
    background:
        radial-gradient(circle,
            rgba(42, 95, 142, .18),
            transparent 55%),
        radial-gradient(circle at 40% 60%,
            rgba(160, 175, 6, .12),
            transparent 60%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    animation: glBgFloatA 30s ease-in-out infinite alternate;
    transition: background .35s ease;
}

/* ─── AMBIENT LIGHT (Bottom-Left) ─── */
html::before {
    content: '';
    position: fixed;
    width: 700px;
    height: 700px;
    bottom: -280px;
    left: -240px;
    background:
        radial-gradient(circle,
            rgba(42, 95, 142, .12),
            transparent 65%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    animation: glBgFloatB 35s ease-in-out infinite alternate;
    transition: background .35s ease;
}

/* ─── MICRO TEXTURE ─── */
html::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
}

/* ─── ANIMATIONS ─── */
@keyframes glBgFloatA {
    0%   { transform: translate(0, 0)   scale(1); }
    100% { transform: translate(-60px, 50px) scale(1.08); }
}

@keyframes glBgFloatB {
    0%   { transform: translate(0, 0)  scale(1); }
    100% { transform: translate(60px, -50px) scale(1.12); }
}

/* ─── DARK MODE OVERRIDE ─── */
/* [FIX] این بخش مهم‌ترین اصلاح است */
html.dark-mode,
html.dark-mode body {
    --gl-bg-base: #0f172a;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

html.dark-mode body::before {
    background-image:
        linear-gradient(to right,  rgba(96, 165, 250, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(96, 165, 250, .07) 1px, transparent 1px),
        linear-gradient(to right,  rgba(196, 214, 0, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(196, 214, 0, .04) 1px, transparent 1px);
    opacity: .50;
}

html.dark-mode body::after {
    background:
        radial-gradient(circle,
            rgba(96, 165, 250, .10),
            transparent 55%),
        radial-gradient(circle at 40% 60%,
            rgba(196, 214, 0, .06),
            transparent 60%);
}

html.dark-mode html::before,
html.dark-mode::before {
    background:
        radial-gradient(circle,
            rgba(96, 165, 250, .08),
            transparent 65%);
}

html.dark-mode html::after,
html.dark-mode::after {
    display: none;
}

/* ─── REDUCE MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    body::after,
    html::before {
        animation: none !important;
    }
}
/* [PERF v5.0.7] روی موبایل blur سنگین CPU را اشغال می‌کند و scrolling janky می‌شود.
 * blur را کم/حذف می‌کنیم تا paint سریع‌تر باشد. */
@media (max-width: 768px) {
    body::after,
    body::before {
        filter: none !important;
        opacity: 0.3 !important;
    }
}

/* روی موبایل بسیار ضعیف، حتی gradient هم را حذف کنیم */
@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
    body::after,
    body::before {
        display: none !important;
    }
}