/* ============================================================
   Preloader — halqa va markazda Akademiya emblemasi
   ============================================================
 *
 * Shablon (`gorom/css/style.css` -> `.preloader`) bu blokka
 * `preloader.gif` ni fon rasmi qilib beradi: markazda hech qanday
 * belgi yo'q, segmentli kulrang-ko'k spinner aylanadi.
 *
 * Bu yerda fon bekor qilinadi va o'rniga ikki qism turadi:
 *
 *   `.va-loader__ring` — ikki yoyli halqa (yuqori va past chetlari
 *                        shaffof), 1.5s da bir marta aylanadi;
 *   `.va-loader__logo` — markazda Akademiya emblemasi, AYLANMAYDI.
 *
 * Logotip alohida element bo'lishining sababi shu: animatsiya faqat
 * halqaga qo'yiladi. Agar u o'rab turuvchi blokka qo'yilsa, emblema
 * ham aylanib ketardi.
 *
 * Rang shablonning o'z akcentidan (`#2962ff`) — `style.css` da 100
 * marta ishlatiladi. Sahifalarga xos `--cb-*`, `--dir-*`, `--ep-*`
 * o'zgaruvchilari bu yerga yaramaydi: ular faqat o'z sahifalarida
 * e'lon qilingan, preloader esa HAR BIR sahifada chiqadi.
 *
 * Fayl `PreloaderAsset` orqali, `TypographyAsset` ga bog'liq holda
 * ulanadi — ya'ni shablon CSS'idan KEYIN. Shuning uchun bu qoidalar
 * ustun va `!important` kerak emas.
 */

:root {
    --pl-accent: #2962ff;
    --pl-line: #e2e8f0;
}

.preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
}

.va-loader {
    position: relative;
    width: 110px;
    height: 110px;
}

.va-loader__ring {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-right-color: var(--pl-accent);
    border-left-color: var(--pl-accent);
    border-radius: 50%;
    animation: va-loader-spin 1.5s linear infinite;
}

.va-loader__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

@keyframes va-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
 * Harakat kamaytirilgan rejimda aylanish to'xtaydi. Yoylar o'sha
 * holatda qolsa halqa "yarim chizilgan" bo'lib ko'rinadi, shuning
 * uchun to'liq, ochiq rangli halqaga aylantiriladi — emblema baribir
 * markazda ko'rinib turadi.
 */
@media (prefers-reduced-motion: reduce) {
    .va-loader__ring {
        border-color: var(--pl-line);
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .va-loader {
        width: 88px;
        height: 88px;
    }

    .va-loader__logo {
        width: 44px;
        height: 44px;
    }
}