/*
 * space-bg.css
 * ------------------------------------------------------------------
 * Referans ekrandaki gibi yildizli derin uzay arka plani.
 * Ayrica fare gecikmesinin onune gecmek icin "mask-image" ile fareyi
 * takip eden katmanlar devre disi birakilir; yildizlar tamamen statik
 * oldugu icin her mousemove'da repaint yapilmaz.
 */

html {
    background-color: #01020a;
}

body {
    background-color: #01020a !important;
    background-image:
        /* buyuk parlak yildizlar */
        radial-gradient(1.6px 1.6px at 32px 58px, rgba(255, 255, 255, .95), transparent 100%),
        radial-gradient(1.4px 1.4px at 148px 26px, rgba(200, 220, 255, .9), transparent 100%),
        radial-gradient(1.5px 1.5px at 92px 172px, rgba(255, 255, 255, .85), transparent 100%),
        radial-gradient(1.3px 1.3px at 210px 96px, rgba(190, 210, 255, .8), transparent 100%),
        /* orta yildizlar */
        radial-gradient(1px 1px at 18px 128px, rgba(255, 255, 255, .7), transparent 100%),
        radial-gradient(1px 1px at 74px 44px, rgba(255, 255, 255, .65), transparent 100%),
        radial-gradient(1px 1px at 126px 108px, rgba(255, 255, 255, .6), transparent 100%),
        radial-gradient(1px 1px at 186px 150px, rgba(220, 235, 255, .7), transparent 100%),
        radial-gradient(1px 1px at 232px 40px, rgba(255, 255, 255, .6), transparent 100%),
        radial-gradient(1px 1px at 56px 196px, rgba(255, 255, 255, .55), transparent 100%),
        /* kucuk solgun yildizlar */
        radial-gradient(.8px .8px at 40px 14px, rgba(255, 255, 255, .5), transparent 100%),
        radial-gradient(.8px .8px at 108px 78px, rgba(255, 255, 255, .45), transparent 100%),
        radial-gradient(.8px .8px at 160px 190px, rgba(255, 255, 255, .5), transparent 100%),
        radial-gradient(.8px .8px at 218px 128px, rgba(255, 255, 255, .4), transparent 100%),
        radial-gradient(.8px .8px at 12px 76px, rgba(255, 255, 255, .45), transparent 100%),
        radial-gradient(.8px .8px at 196px 12px, rgba(255, 255, 255, .4), transparent 100%),
        /* nebula parlakliklari (sabit, statik) */
        radial-gradient(900px 600px at 12% -5%, rgba(30, 60, 140, .22), transparent 65%),
        radial-gradient(700px 500px at 95% 15%, rgba(60, 30, 130, .16), transparent 65%),
        radial-gradient(1100px 700px at 50% 115%, rgba(20, 45, 110, .18), transparent 70%);
    background-size:
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        250px 250px,
        auto,
        auto,
        auto;
    background-attachment: scroll, scroll, scroll, scroll,
        scroll, scroll, scroll, scroll, scroll,
        scroll, scroll, scroll, scroll, scroll,
        scroll, scroll, fixed, fixed, fixed !important;
    background-repeat: repeat, repeat, repeat, repeat,
        repeat, repeat, repeat, repeat, repeat,
        repeat, repeat, repeat, repeat, repeat,
        repeat, repeat, no-repeat, no-repeat, no-repeat !important;
}

/* ---------------------------------------------------------------
 * Fareyi takip eden mask-image katmanlari kaldir.
 * Bu katmanlar her mousemove'da tam ekran boyama (repaint)
 * tetikler; fareyi yavaslatan ana sebep budur.
 * --------------------------------------------------------------- */
.cursor-glow-layer {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

body::before {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-image: none !important;
}

/* vivid.css body::before/after ile nebula bulutlari olusturur;
   maskeleri kaldirinca bu bulutlar fareyle degil, sabit konumda
   ve sadece donus (transform) animasyonuyla hareket eder - ucuz. */
body::before,
body::after {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Yildiz katmaninda eski nokta-grid motifini tamamen kapat */
body.loaded .cursor-glow-layer {
    opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }
}