/*
 * PDP School'ning yuklanish belgisi — bitta animatsiya, ikki joyda ishlatiladi:
 * index.html'dagi boot ekrani va React yuklagichlari (src/components/Loading.tsx).
 *
 * Bu fayl ataylab `public/` ichida va Tailwind bundle'idan tashqarida turadi:
 * boot ekrani JS bundle ishga tushishidan oldin ko'rinishi kerak, ya'ni uslub
 * hujjatning o'zida bo'lishi shart. `url(...)` esa nisbiy — shu CSS faylga
 * nisbatan hisoblanadi, shuning uchun Electron'ning `file://` build'ida ham,
 * webdagi chuqur yo'llarda ham bir xil ishlaydi.
 *
 * Animatsiya — dizayner bergan 3 soniyalik roliknining 72 kadri bitta PNG
 * ichida 6x12 to'r bo'lib yotibdi (scripts/make-loading-sprite.mjs). PNG CSS
 * maskasi sifatida qo'llanadi, rang esa `color`dan olinadi — shu sababli bitta
 * fayl light va dark mavzuga ham yetadi.
 *
 * Sikl 1.5 soniya — ya'ni rolik ikki barobar tez o'ynaydi (72 kadr / 1.5s =
 * 48 kadr/s). Uch soniyada logotip chizilib bo'lgach ikki soniyacha deyarli
 * qimirlamay turardi va bu "qotib qoldi" degan taassurot berardi.
 *
 * O'zgartirsangiz ikkita muddat 12:1 nisbatida qolishi SHART (12 qator), va
 * qator/ustun soni sprite bilan mos kelishi kerak: 6 ustun, 12 qator.
 *
 * ── VERSIYA: v2 ──────────────────────────────────────────────────────────────
 * Bu faylni O'ZGARTIRSANGIZ, uni chaqiruvchi UCHTA joyda `?v=` ni oshiring:
 *
 *   frontend/index.html
 *   frontend/chat-embed.html
 *   mobile/scripts/patch-index-html.mjs   (+ Mini App'ni qayta yig'ib yuklang)
 *
 * Sababi Cloudflare: fayl nomi hash'lanmagan, va u chekkada `max-age=86400`
 * bilan HAMMA uchun birdan keshlanadi. O'lchangan: 1.5s ga o'tkazilgandan
 * keyin ham chekka bir sutkacha eski 3s ni tarqatib turardi — ya'ni butun
 * ilovadagi yuklagich eski tezlikda qolardi, chunki bu uslublar bundle'da
 * yo'q. `?v=` ni oshirish — yangi manzil, ya'ni yangi kesh kaliti.
 */
.pdp-loading-mark {
    display: block;
    overflow: hidden;
    width: var(--pdp-loading-mark-size, 96px);
    height: var(--pdp-loading-mark-size, 96px);
    /* Mavzu tokeni yuklangach o'zi to'g'rilanadi; boot ekranida hali hech qanday
       token yo'q, shuning uchun zaxira qiymat — brand-600. */
    color: var(--color-fg-brand-primary, #2168f2);
}

/* Qator: 1.5 soniyada 12 qadam pastga. */
.pdp-loading-mark > * {
    display: block;
    width: 600%;
    height: 1200%;
    will-change: transform;
    animation: pdp-loading-mark-row 1.5s steps(12) infinite;
}

/* Ustun: har qatorni 0.125s (1.5s / 12) ichida 6 qadam chapga. */
.pdp-loading-mark > * > * {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url(loading-mark.png);
    mask-image: url(loading-mark.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    will-change: transform;
    animation: pdp-loading-mark-col 0.125s steps(6) infinite;
}

@keyframes pdp-loading-mark-row {
    to {
        transform: translateY(-100%);
    }
}

@keyframes pdp-loading-mark-col {
    to {
        transform: translateX(-100%);
    }
}

/* theme.css harakatni butunlay o'chiradi (animation-duration: 0.01ms !important),
   va to'xtagan animatsiya 0-kadrga qaytadi — u esa bo'sh, ya'ni ekranda hech
   nima qolmaydi. Shuning uchun bu yerda to'liq chizilgan kadr (36-chi, 6-qator,
   0-ustun) qo'lda qo'yiladi. */
@media (prefers-reduced-motion: reduce) {
    .pdp-loading-mark > * {
        transform: translateY(-50%);
    }
    .pdp-loading-mark > * > * {
        transform: translateX(0);
    }
}

/* Boot ekrani — index.html, React hali ishga tushmagan payt.
   `width`/`flex` Mini App uchun: u yerda Expo `#root` ni o'zi flex qilib
   qo'yadi (`display:flex`, satr yo'nalishida), va busiz boot ekrani
   kengligicha emas, logotip enida chap chekkada qolib ketardi. Saytda `#root`
   oddiy blok — bu ikki xossa u yerda hech narsani o'zgartirmaydi. */
.pdp-boot {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-bg-primary, #fff);
}

/* ThemeProvider `.dark-mode`ni faqat JS yuklangach qo'yadi, shuning uchun boot
   ekrani tizim sozlamasidan o'qiydi — aks holda dark mavzudagi foydalanuvchi
   oq chaqnashni ko'radi. */
@media (prefers-color-scheme: dark) {
    .pdp-boot {
        background-color: var(--color-bg-primary, #0b1240);
    }
    .pdp-loading-mark {
        color: var(--color-fg-brand-primary, #437ff4);
    }
}