/* scroll-bg.css
   لایه‌های پس‌زمینه‌ی کهکشانی - سازگار با .main-bg
   ذخیره کن به نام scroll-bg.css و در HTML لینک کن
*/

:root {
    --sgz-zindex: 0; /* اگر خواستی بالاتر یا پایین‌تر ببری تغییر بده */
    --sgz-opacity: 0.95; /* شفافیت کلی افکت (0..1) */
}

/* کانتینر فیکس که دقیقا پوشش دهنده صفحه است.
   قرار دادن آن زیر محتوا ولی بالای بک‌گراند انجام می‌شود.
   با z-index قابل کنترل است. */
.sgz-root {
    position: fixed;
    inset: 0;
    pointer-events: none; /* تداخلی با کلیک/اسکرول نداشته باشه */
    z-index: var(--sgz-zindex);
    opacity: var(--sgz-opacity);
    mix-blend-mode: normal;
}

/* هر کدام از canvasها full-cover و بدون تعامل */
.sgz-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    transform-origin: 50% 50%;
}

/* لایه‌های ترتیب از دور به نزدیک:
   nebula-*: ابر کهکشانی با چند لایه
   stars: ستاره‌های ریز
   meteors: شهاب‌ها */
.sgz-nebulaFar,
.sgz-nebulaMid,
.sgz-nebulaNear,
.sgz-stars,
.sgz-meteors {
    will-change: transform, opacity;
}

/* وینیِت ملایم برای عمق بصری */
.sgz-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: multiply;
    background: radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.45) 100%);
}

/* تنظیمات موبایل — در صورت نیاز می‌تونی تغییر بدی */
@media (pointer: coarse) {
    :root {
        --sgz-opacity: 0.98;
    }
}

/* اگر می‌خوای لایه رو پنهان یا کم‌رنگ کنی می‌تونی از این کلاس استفاده کنی */
.sgz-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}