/* ==========================================================================
   GRAUMANN · HARAKAT QATLAMI 2 (Otabek, 14.09: «animatsiyani yanada yaxshilash»)

   harakat.css falsafasi oʻzgarmaydi: harakat — bezak emas, yoʻnaltirgich.
   Bu qatlam FAQAT toʻrt narsani qoʻshadi:
     1) bento kataklari bitta blok boʻlib emas, KETMA-KET ochiladi (60 ms qadam)
     2) boʻlim shapkasi: yorliq chizigʻi chapdan chiziladi, oʻng lid sal kech keladi
     3) oʻlchov grafikalari (0 °C barlari, 550 °C shkalasi, 550 raqami) blok
        koʻringanda «oʻlchab beradi» — statik chizilgan emas
     4) holat oʻzgarishi (tab, mobil menyu, akkordeon, karta hover) silliq
   Bitta egri (--ease), avvalgi tokenlar (--tez 180 / --anim 280 / --ochil 560)
   + bitta yangi: --olchov 900 ms (faqat oʻlchov grafikalari uchun).
   Sakrash, aylanish, kattalashtirish, «bounce», parallaks — hali ham YOʻQ.
   Mobilda (≤1000 px) kirish animatsiyasi g6.css qarori boʻyicha OʻCHIQ qoladi —
   bu yerda ham ochilish qoidalari faqat ≥1001 px da.
   Ortga qaytarish: qur.py dagi "harakat-2" ni olib tashlash.
   14.09 kech (Otabek: «umumiy saytni oʻrganib chiq, plavniy animatsiya»): §5 qoʻshildi —
   ochilish uzunroq va yumshoqroq · kadr ochilishi · hero bandi yuklanishda · sahifalar
   orasida krossfeyd (View Transitions) · karuselda sekin yaqinlashish · nav chizigʻi.
   JS (qismlar/skript.html «HARAKAT-2»): grid kataklariga .s6-anim + --i, gridga .s6-tayyor,
   550 raqami sanaladi, langar havolalari silliq skroll.
   ========================================================================== */

:root{ --olchov:900ms; --qadam:60ms; }

/* ---------- 1. KATAKLAR KETMA-KET ----------
   JS grid ichidagi kataklarga .s6-anim + --i beradi va gridga .s6-tayyor qoʻyadi.
   .s6-tayyor boʻlmasa (JS ishlamasa) eski xulq: grid bitta boʻlib ochiladi. */
@media (min-width:1001px){
  .kir.s6-tayyor{opacity:1;transform:none;transition:none}
  .kir.s6-tayyor .s6-anim{
    opacity:0;transform:translateY(12px);
    transition:opacity var(--ochil) var(--ease) calc(var(--i,0) * var(--qadam)),
               transform var(--ochil) var(--ease) calc(var(--i,0) * var(--qadam));
  }
  .kir.s6-tayyor.korindi .s6-anim{opacity:1;transform:none}

  /* ---------- 2. BOʻLIM SHAPKASI ----------
     Yorliq chizigʻi chapdan oʻsadi, oʻng lid sarlavhadan 140 ms keyin keladi. */
  .s6-bosh.kir .s6-yoz::before{transform:scaleX(0);transform-origin:left;
    transition:transform 480ms var(--ease) 120ms}
  .s6-bosh.kir.korindi .s6-yoz::before{transform:scaleX(1)}
  .s6-bosh.kir .s6-bosh__ong{opacity:0;transform:translateY(8px);
    transition:opacity var(--ochil) var(--ease) 140ms,transform var(--ochil) var(--ease) 140ms}
  .s6-bosh.kir.korindi .s6-bosh__ong{opacity:1;transform:none}
  /* karta ichidagi yorliq (hamkorlik, soʻrov, 0 °C) — katak kelgach chiziladi */
  .kir.s6-tayyor .s6-anim .s6-yoz::before{transform:scaleX(0);transform-origin:left;
    transition:transform 480ms var(--ease) calc(var(--i,0) * var(--qadam) + 200ms)}
  .kir.s6-tayyor.korindi .s6-anim .s6-yoz::before{transform:scaleX(1)}

  /* ---------- 3. OʻLCHOV GRAFIKALARI ----------
     Bar va shkala nol holatdan oʻz qiymatigacha oʻsadi (kenglik emas — scaleX,
     layout qayta hisoblanmaydi). Kechikish: katak kechikishi + 240 ms. */
  .kir .s6-bar__iz i{transform:scaleX(0);transform-origin:left;
    transition:transform var(--olchov) var(--ease) calc(var(--i,0) * var(--qadam) + 240ms)}
  .kir.korindi .s6-bar__iz i{transform:scaleX(1)}
  .kir .s6-550__chiziq::after{transform:scaleX(0);transform-origin:left;
    transition:transform var(--olchov) var(--ease) calc(var(--i,0) * var(--qadam) + 240ms)}
  .kir.korindi .s6-550__chiziq::after{transform:scaleX(1)}
  .kir .s6-550__t{opacity:0;transition:opacity var(--anim) var(--ease)}
  .kir.korindi .s6-550__t{opacity:1}
  .kir.korindi .s6-550__t:nth-child(2){transition-delay:calc(var(--i,0) * var(--qadam) + 240ms)}
  .kir.korindi .s6-550__t:nth-child(3){transition-delay:calc(var(--i,0) * var(--qadam) + 400ms)}
  .kir.korindi .s6-550__t:nth-child(4){transition-delay:calc(var(--i,0) * var(--qadam) + 1040ms)}
}
/* 550 raqami sanalganda kenglik titramasin */
.s6-550__raqam.sanalmoqda{font-variant-numeric:tabular-nums}

/* ---------- 4. HOLAT OʻZGARISHI ---------- */
/* karta: ichida havola boʻlsa, kursor kelganda havola oʻqi 45° buriladi (g6.css 2-band
   bilan bir xil belgi), kadr 3 % yaqinlashadi. Soya yoʻq, koʻtarilish yoʻq.
   ⚠ 14.09 kech-2 (Otabek): «kursorni toʻrtburchak ustiga oborsa rangi oʻzgaradigan animatsiya
   yoqmadi» — sirt rangi hoverda OʻZGARMAYDI (§6 da butun sayt uchun bekor qilingan). */
.s6-karta:has(.s6-ha):hover .s6-ha .ik{transform:rotate(-45deg)}
.s6-kadr{overflow:hidden}
.s6-kadr img{transition:transform 600ms var(--ease)}
.s6-karta:has(.s6-ha):hover .s6-kadr img{transform:scale(1.03)}

/* tab kontenti: almashganda sakramaydi, 6 px dan koʻtarilib keladi */
@keyframes s6-tab-kir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tab-ich:not([hidden]){animation:s6-tab-kir 260ms var(--ease) both}

/* mobil menyu: yuqoridan tushadi */
@keyframes s6-mob-kir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mobil:not([hidden]){animation:s6-mob-kir 220ms var(--ease) both}

/* akkordeon (<details>): balandlik silliq ochiladi — qoʻllaydigan brauzerda
   (Chrome 131+), qolganlarida avvalgidek darhol. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;
    transition:height 320ms var(--ease),content-visibility 320ms allow-discrete}
  details[open]::details-content{height:auto}
}

/* texnika plitasi tanlanganda ikonka ham rangga ergashadi */
.plita .ik{transition:color var(--anim) var(--ease)}

/* ---------- REDUCED MOTION: hammasi oʻchadi ---------- */
@media (prefers-reduced-motion:reduce){
  .kir.s6-tayyor .s6-anim,.s6-bosh.kir .s6-bosh__ong{opacity:1;transform:none;transition:none}
  .s6-bosh.kir .s6-yoz::before,.kir.s6-tayyor .s6-anim .s6-yoz::before,
  .kir .s6-bar__iz i,.kir .s6-550__chiziq::after{transform:none;transition:none}
  .kir .s6-550__t{opacity:1;transition:none}
  .tab-ich:not([hidden]),.mobil:not([hidden]){animation:none}
  details::details-content{transition:none}
  .s6-kadr img{transition:none}
  .s6-karta:has(.s6-ha):hover .s6-kadr img{transform:none}
}


/* ==========================================================================
   §5 · PLAVNIY (14.09 kech) — ochilish yumshoqroq, kadr va hero, sahifa oʻtishi
   ========================================================================== */
:root{ --ochil:760ms; }                                   /* 560/620 → 760: koʻz «uchib kelish»ni emas, «paydo boʻlish»ni koʻradi */
@media (min-width:1001px){
  .kir{transform:translateY(18px)}                        /* 10–14 → 18 px: siljish sezilarli, lekin yumshoq */
  .kir.korindi{transform:none}
  /* kadr: ochilganda 4 % dan tabiiy oʻlchamiga qaytadi — «surat qoʻyildi» emas, «surat ochildi» */
  .kir .s6-kadr img,.kir.s6-tayyor .s6-anim .s6-kadr img,.kir .g5-kadr img{
    transform:scale(1.04);transition:transform 1100ms var(--ease) calc(var(--i,0) * var(--qadam))}
  .kir.korindi .s6-kadr img,.kir.s6-tayyor.korindi .s6-anim .s6-kadr img,.kir.korindi .g5-kadr img{transform:scale(1)}
  /* hover kattalashuvi (§4) ochilish bilan toʻqnashmasin */
  .s6-karta:has(.s6-ha):hover .s6-kadr img{transform:scale(1.03)}
}

/* hero bandi (cs-hero): sahifa yuklanganda yuqoridan-pastga ketma-ket paydo boʻladi — IO ga bogʻliq emas, mobilda ham ishlaydi */
@keyframes cs-kir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cs-hero__kadrlar{animation:cs-kir 640ms var(--ease) both}
.cs-hero__nuqtalar,.cs-hero__krosh{animation:cs-kir 560ms var(--ease) 140ms both}
.cs-hero__matn.is-faol .cs-hero__h{animation:cs-kir 620ms var(--ease) 220ms both}
.cs-hero__matn.is-faol .cs-hero__lid{animation:cs-kir 620ms var(--ease) 300ms both}
.cs-hero__matn.is-faol .cs-hero__amal{animation:cs-kir 620ms var(--ease) 380ms both}
/* karusel almashganda faqat matn qatlami oʻzi oʻtadi (cs-hero.css), yuklanish animatsiyasi qayta chalinmasin */
.cs-hero.harakatlandi .cs-hero__matn .cs-hero__h,
.cs-hero.harakatlandi .cs-hero__matn .cs-hero__lid,
.cs-hero.harakatlandi .cs-hero__matn .cs-hero__amal{animation:none}
/* faol slaydning sekin 3 % yaqinlashishi (cs-nafas) 14.09 kech-2 da OLIB TASHLANDI —
   Otabek: «oʻsha rasm oʻzgarmasin». Kadr statik, faqat krossfeyd bilan almashadi (cs-hero.css). */
.cs-hero:not(.cs-hero--sahifa) .cs-hero__slayd.is-faol .cs-hero__kadr img{transform:none;animation:none}

/* sahifalar orasida krossfeyd (Chrome/Edge/Safari 18+; boshqalarida oddiy oʻtish) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-ket 220ms var(--ease) both}
::view-transition-new(root){animation:vt-kel 300ms var(--ease) both}
@keyframes vt-ket{to{opacity:0}}
@keyframes vt-kel{from{opacity:0}}

/* nav: faol/hover chizigʻi chapdan oʻsadi (bor boʻlsa) */
.nav > a::after,.nav__band > a::after{transition:transform var(--anim) var(--ease),background var(--anim) var(--ease)}

/* §5 reduced motion */
@media (prefers-reduced-motion:reduce){
  .cs-hero__kadrlar,.cs-hero__nuqtalar,.cs-hero__krosh,.cs-hero__matn .cs-hero__h,.cs-hero__matn .cs-hero__lid,.cs-hero__matn .cs-hero__amal{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .kir .s6-kadr img,.kir .g5-kadr img{transform:none;transition:none}
}

/* ---------- 6. TOʻRTBURCHAK SIRT HOVERDA RANGINI OʻZGARTIRMAYDI ----------
   Otabek 14.09 kech-2: «baʼzi bloklarda kursorni rectangle ustiga oborsa rangi oʻzgaradigan
   animatsiya qilibsan — yoqmadi». Karta (§4 da olib tashlandi) · toifa plitasi · soha havolasi ·
   katalog yoʻnalish katagi — hoverda OʻZ fonida qoladi (qiymat = shu elementning bazaviy foni).
   Hover belgisi faqat havola oʻqi (45°) va kursor. Tugma · chip · tab · segment · filtr — kontrol,
   ularning hover holati qoladi. Tanlangan plita (.tanlangan) navy boʻlib turaveradi. */
main .s6-kat .s6-kat-yonalish__q:hover{background:var(--s6-canvas) !important}
main .s6-kat .s6-kat-yonalish__q[aria-pressed="true"]:hover{background:var(--navy) !important}   /* faol yoʻnalish navy qoladi */
main .bolim[data-blok="S6-02"] .s6-soha:hover{background:var(--s6-canvas) !important}
main .bolim[data-blok="S6-07"] .plita:hover{background:var(--s6-canvas) !important}
main .bolim[data-blok="S6-07"] .plita.tanlangan:hover{background:var(--navy) !important}
main .bolim.s6[data-blok] .s6-plita:hover{background:#fff !important}
main .bolim.s6[data-blok] .s6-plita.tanlangan:hover{background:var(--navy) !important}