/* =========================================================
   PERSONAL PORTFOLIO
   BACKGROUND.CSS
   ---------------------------------------------------------
   سیستم پس‌زمینه‌ی سایت
   شامل:
   - Grid
   - Glow
   - Noise
   - Particles Canvas
   - افکت‌های Light / Dark
   ========================================================= */


/* =========================================================
   1. BACKGROUND WRAPPER
   ---------------------------------------------------------
   تمام افکت‌های پس‌زمینه داخل این لایه قرار می‌گیرند.
   این لایه روی محتوای سایت قرار نمی‌گیرد.
   ========================================================= */

.site-background {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: var(--z-background);
}


/* =========================================================
   2. GRID
   ---------------------------------------------------------
   یک Grid بسیار ظریف برای ایجاد حس تکنولوژیک و مدرن
   ========================================================= */

.background-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            to right,
            var(--color-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--color-border) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    opacity: 0.55;

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        rgba(0, 0, 0, 0.7) 45%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        rgba(0, 0, 0, 0.7) 45%,
        transparent 100%
    );
}


/* =========================================================
   3. GLOW CONTAINER
   ---------------------------------------------------------
   محل قرارگیری نورهای نرم و شناور
   ========================================================= */

.background-glows {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


/* =========================================================
   4. GLOW BASE
   ---------------------------------------------------------
   ساختار مشترک تمام نورها
   ========================================================= */

.background-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.12;

    will-change: transform;
}


/* =========================================================
   5. GLOW ONE
   ---------------------------------------------------------
   نور اول - بالا سمت چپ
   ========================================================= */

.background-glow--one {
    top: -180px;
    left: -120px;

    background: var(--color-primary);

    animation:
        glowFloatOne 14s ease-in-out infinite;
}


/* =========================================================
   6. GLOW TWO
   ---------------------------------------------------------
   نور دوم - سمت راست
   ========================================================= */

.background-glow--two {
    top: 20%;
    right: -180px;

    width: 360px;
    height: 360px;

    background: var(--color-accent);

    opacity: 0.09;

    animation:
        glowFloatTwo 17s ease-in-out infinite;
}


/* =========================================================
   7. GLOW THREE
   ---------------------------------------------------------
   نور سوم - پایین صفحه
   ========================================================= */

.background-glow--three {
    bottom: -220px;
    left: 35%;

    width: 500px;
    height: 500px;

    background: var(--color-primary);

    opacity: 0.07;

    animation:
        glowFloatThree 20s ease-in-out infinite;
}


/* =========================================================
   8. GLOW ANIMATIONS
   ---------------------------------------------------------
   حرکت بسیار نرم نورها
   ========================================================= */

@keyframes glowFloatOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(80px, 60px, 0)
            scale(1.08);
    }
}


@keyframes glowFloatTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-70px, 80px, 0)
            scale(1.12);
    }
}


@keyframes glowFloatThree {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(60px, -50px, 0)
            scale(1.06);
    }
}


/* =========================================================
   9. NOISE
   ---------------------------------------------------------
   لایه‌ی بسیار ظریف Noise برای جلوگیری از تخت بودن
   پس‌زمینه.

   این لایه با CSS ساخته شده و نیازی به فایل تصویر ندارد.
   ========================================================= */

.background-noise {
    position: absolute;
    inset: 0;

    opacity: 0.025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    mix-blend-mode: soft-light;
}


/* =========================================================
   10. PARTICLES CANVAS
   ---------------------------------------------------------
   Canvas مربوط به JavaScript.

   در مرحله‌ی JS، ذرات متحرک داخل این Canvas ساخته
   خواهند شد.
   ========================================================= */

#particles-canvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0.45;
}


/* =========================================================
   11. LIGHT MODE
   ---------------------------------------------------------
   در حالت روشن، افکت‌ها ظریف‌تر هستند.
   ========================================================= */

html:not([data-theme="dark"]) .background-glow {
    opacity: 0.10;
}

html:not([data-theme="dark"]) #particles-canvas {
    opacity: 0.25;
}


/* =========================================================
   12. DARK MODE
   ---------------------------------------------------------
   در حالت تاریک، Glow کمی واضح‌تر می‌شود.
   ========================================================= */

html[data-theme="dark"] .background-grid {
    opacity: 0.35;
}

html[data-theme="dark"] .background-glow {
    opacity: 0.15;
}

html[data-theme="dark"] #particles-canvas {
    opacity: 0.40;
}


/* =========================================================
   13. MOBILE OPTIMIZATION
   ---------------------------------------------------------
   روی موبایل شدت افکت‌ها کمتر می‌شود تا مصرف منابع پایین
   بماند.
   ========================================================= */

@media (max-width: 768px) {

    .background-grid {
        background-size: 48px 48px;
    }

    .background-glow {
        width: 280px;
        height: 280px;

        filter: blur(70px);
    }

    .background-glow--three {
        width: 340px;
        height: 340px;
    }

    #particles-canvas {
        opacity: 0.20;
    }
}


/* =========================================================
   14. REDUCED MOTION
   ---------------------------------------------------------
   اگر کاربر انیمیشن را در سیستم خود غیرفعال کرده باشد،
   حرکت Glowها متوقف می‌شود.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .background-glow {
        animation: none;
    }
}