/* Harakat — «Sukunat». Qoidalar Emil Kowalski naqshlaridan:
   bosiladigan har element bosilganda javob beradi, animatsiya 300ms dan
   oshmaydi, `ease-in` ishlatilmaydi (u sekin boshlanadi va interfeys
   javob bermayotgandek tuyuladi).

   Bosish javobi rangda emas, o'lchamda: rang o'zgarishi ko'z bilan
   sekinroq o'qiladi, kichrayish esa darrov seziladi. */
:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --press-fast: 140ms;
  --press-surface: 180ms;
  /* Sahifa almashinuvi: chiqish kirishdan qisqa. Ketayotgan sahifa
     kutdirmaydi, kelayotgani esa joyiga qo'nib ulguradi. */
  --page-out: 120ms;
  --page-in: 260ms;
}

/* Ko'tarilgan yuza: soya va siljish bir vaqtda o'zgaradi. `box-shadow`
   o'zi GPU da chizilmaydi, lekin bu yerda u faqat hover'da bir marta
   ishlaydi va ro'yxat bo'ylab takrorlanmaydi. */
.quick-tile-icon, .card-icon {
  transition: transform var(--press-fast) var(--ease-out),
              box-shadow var(--press-fast) var(--ease-standard),
              color var(--press-fast) var(--ease-standard);
}
.tile { transition: box-shadow var(--press-surface) var(--ease-standard); }

/* Kichik boshqaruv: tugma, chip, ikonka, havola. */
.button, .chip, .icon-button, .nav-link, .bottom-link, .quick-tile,
.float-pill, .lesson-crumb, .lesson-toc-link, .toifa-toc-link, .text-link, .language-option,
a.lesson-topic-link, .lesson-cite, a.doc-ref, .lesson-return,
.lesson-equipment-link, .motion-control {
  transition: transform var(--press-fast) var(--ease-out),
              color var(--press-fast) var(--ease-standard),
              border-color var(--press-fast) var(--ease-standard),
              background-color var(--press-fast) var(--ease-standard);
}
.button:active, .chip:active, .icon-button:active, .nav-link:active, .bottom-link:active, .quick-tile:active, .float-pill:active, .lesson-crumb:active, .lesson-toc-link:active, .toifa-toc-link:active, .text-link:active, .language-option:active, a.lesson-topic-link:active, .lesson-cite:active, a.doc-ref:active, .lesson-return:active, .lesson-equipment-link:active, .motion-control:active {
  transform: scale(.97);
}

/* Katta yuza: plitka, qator, variant. Kichikroq kichrayadi — katta
   elementda .97 haddan tashqari seziladi. */
a.tile, .tile[href], a.row, .row[href], .quiz-option, .quiz-mode,
.lesson-pager-link, .home-section-link, .catalog-card, .data-table td a,
.access-expand, .home-ad-media, .motion-surface, .account-maqsad-pace-option {
  transition: transform var(--press-surface) var(--ease-out),
              color var(--press-surface) var(--ease-standard),
              border-color var(--press-surface) var(--ease-standard),
              background-color var(--press-surface) var(--ease-standard);
}
a.tile:active, .tile[href]:active, a.row:active, .row[href]:active,
.quiz-option:not(:disabled):active, .quiz-mode:not(:disabled):active,
.lesson-pager-link:active, .home-section-link:active, .catalog-card:active,
.data-table td a:active, .access-expand:active, .home-ad:active .home-ad-media, .home-ad-live:active, .metrika-tile:active, .motion-surface:active, .account-maqsad-pace-option:active {
  transform: scale(.985);
}

/* ─── Bosish tomchisi ──────────────────────────────────────────────────────
   Brauzerning o'z javobi — sensorli ekrandagi ko'kish to'rtburchak
   (`-webkit-tap-highlight-color`) — o'chiriladi: u element shaklini
   bilmaydi, dumaloq tugmada ham to'rtburchak bo'lib chaqnaydi va bosishdan
   keyin bir zum «yopishib» qoladi.

   O'rniga bosilgan NUQTADAN tarqaladigan tomchi. Uni `shell.js` chizadi:
   element ichiga emas, ustidagi qatlamga — shuning uchun hech bir
   komponentga `overflow: hidden` yoki `position: relative` qo'shilmaydi va
   hech bir mavjud fon buzilmaydi.

   Tomchi qaysi elementda chiqishi `shell.js` dagi `PRESS_SELECTOR` bilan
   hal bo'ladi — u yuqoridagi press-javobi ro'yxati bilan BIRGA yangilanadi. */
* { -webkit-tap-highlight-color: transparent; }

/* Tarqalish 260ms — bosishga javob shuncha vaqtda «yetib boradi». So'nish
   tarqalish bilan ustma-ust tushadi: tomchi to'xtab turmaydi, yo'lda erib
   ketadi. Rang tokendan olinadi va shuning uchun har fonda o'ziga moslashadi. */
:root { --press-ripple-ms: 260ms; --press-ripple: color-mix(in oklab, var(--accent) 24%, transparent); }
.press-ripple-layer { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
/* Qirqim: elementning o'z joyi va o'z radiusi. Tomchi undan tashqariga
   chiqmaydi, ya'ni dumaloq tugmada dumaloq, plitkada plitka shaklida. */
.press-ripple { position: absolute; overflow: hidden; pointer-events: none; }
.press-ripple i {
  position: absolute; display: block; border-radius: 50%;
  background: var(--press-ripple);
  transform: translate(-50%, -50%) scale(.28);
  animation: press-ripple-spread var(--press-ripple-ms) var(--ease-out) forwards;
}
@keyframes press-ripple-spread {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Hover faqat haqiqiy kursorli qurilmada: sensorli ekranda bosish
   hover'ni ham qo'zg'atadi va element bosilgandan keyin «yopishib» qoladi. */
@media (hover: hover) and (pointer: fine) {
  .motion-surface:hover { transform: translateY(-1px); }
}

/* ─── Kirish harakati (js/motion-enter.js) ─────────────────────────────────
   Element ekranga kirganda bir marta: plitka tushadi, karta ko'tariladi,
   jadval parda bo'lib ochiladi. Atributni JS qo'yadi — skript yuklanmasa
   hamma narsa darhol ko'rinadi. Harakat 340ms dan oshmaydi.

   Istisno — son va chiziq (650ms): bu bezak emas, ma'lumotning «yuklanib
   kelishi». 300ms da sanash ko'zga ilg'anmaydi, 650ms da ham kutdirmaydi. */
:root {
  --enter-rise: 280ms;
  --enter-drop: 340ms;
  --enter-curtain: 380ms;
  /* Kichik prujina: plitka joyidan sezilar-sezilmas o'tib, qaytib qo'nadi. */
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
}
[data-enter] {
  transition: opacity var(--enter-rise) var(--ease-out) var(--enter-delay, 0ms),
              transform var(--enter-rise) var(--ease-out) var(--enter-delay, 0ms);
}
[data-enter="rise"]:not([data-entered]) { opacity: 0; transform: translateY(14px); }
[data-enter="drop"] {
  transition: opacity var(--enter-rise) var(--ease-out) var(--enter-delay, 0ms),
              transform var(--enter-drop) var(--ease-spring) var(--enter-delay, 0ms);
}
[data-enter="drop"]:not([data-entered]) { opacity: 0; transform: translateY(-16px) scale(.92); }
[data-enter="curtain"] {
  transition: clip-path var(--enter-curtain) var(--ease-out) var(--enter-delay, 0ms),
              opacity var(--enter-rise) var(--ease-out) var(--enter-delay, 0ms);
}
[data-enter="curtain"]:not([data-entered]) { clip-path: inset(0 0 100% 0); opacity: .4; }
/* Chiziq to'lishi: qiymat (kenglik) joyida, ustidan scaleX 0 → 1. */
[data-fill] { transform-origin: left center; }
[data-fill="start"] { transform: scaleX(0); transition: none; }
[data-fill="run"] { transform: scaleX(1); transition: transform var(--fill-duration, 650ms) var(--ease-out) var(--fill-delay, 0ms); }
/* Ustun o'sishi (growBars): rect asosdan scaleY 0 → 1; gorizontal ustun va
   yig'ma bo'lak chapdan scaleX. `transform-box: fill-box` — SVG'da o'z qutisi. */
[data-grow] .bar, [data-grow] .bar-alt { transform-box: fill-box; transform-origin: center bottom; }
[data-grow] .hbar, [data-grow] .stack { transform-box: fill-box; transform-origin: left center; }
[data-grow="start"] .bar, [data-grow="start"] .bar-alt { transform: scaleY(0); transition: none; }
[data-grow="start"] .hbar, [data-grow="start"] .stack { transform: scaleX(0); transition: none; }
[data-grow="run"] .bar, [data-grow="run"] .bar-alt, [data-grow="run"] .hbar, [data-grow="run"] .stack { transform: none; transition: transform var(--grow-duration, 420ms) var(--ease-out) var(--grow-delay, 0ms); }
/* Halqa aylanishi (sweepRing): dasharray 0 → yakuniy, bo'laklar ketma-ket. */
[data-sweep="run"] .ring-part { transition: stroke-dasharray var(--sweep-duration, 600ms) var(--ease-out) var(--sweep-delay, 0ms); }
/* Son sanash: asl (yakuniy) matn joyni band qiladi va shaffof turadi,
   sanalayotgan qiymat uning ustiga chiziladi. Ekran o'quvchiga faqat asl
   matn o'qiladi (`/ ""` — chizilgan matnning muqobil matni bo'sh). */
[data-count] { position: relative; -webkit-text-fill-color: transparent; }
[data-count]::after {
  content: attr(data-count);
  content: attr(data-count) / "";
  position: absolute; inset: 0;
  -webkit-text-fill-color: currentColor;
  white-space: nowrap; text-align: inherit;
  pointer-events: none;
}

/* Harakatni kamaytirish yoqilgan bo'lsa: rang va shaffoflik qoladi
   (ular tushunishga yordam beradi), siljish va o'lcham o'zgarishi ketadi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .button:active, .chip:active, .icon-button:active, .nav-link:active,
  .bottom-link:active, .quick-tile:active, .float-pill:active, .language-option:active,
  a.tile:active, .row[href]:active, .quiz-option:active, .quiz-mode:active,
  .motion-control:active, .motion-surface:active, .motion-surface:hover {
    transform: none;
  }
  .quick-tile:hover .quick-tile-icon { transform: none; }
  /* Tomchini `shell.js` baribir yaratmaydi; bu qoida — ikkinchi qulf. */
  .press-ripple-layer { display: none; }
  .language-option { translate: none; scale: none; }
  /* O'qish rejimi: panellar sakramasdan, darrov holatini o'zgartiradi. */
  .site-header, .reader-progress, .float-pill { transition: none !important; }
  [data-enter], [data-fill] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-grow] .bar, [data-grow] .bar-alt, [data-grow] .hbar, [data-grow] .stack { transform: none !important; transition: none !important; }
  [data-sweep] .ring-part { transition: none !important; }
  /* Sahifa almashinuvi butunlay o'chadi — bu eng katta harakat. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

@media (prefers-contrast: more) { :root { --border-subtle: var(--border-strong); } }
@media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight !important; } }

/* ─── Sahifadan sahifaga o'tish ────────────────────────────────────────────
   Sayt ko'p sahifali: har havola to'liq yuklanish. Shu sababli sahifa
   «qars» etib almashardi — oq chaqnash, so'ng tayyor ekran.

   View Transitions buni brauzer darajasida yechadi va animatsiya asosiy
   oqimda emas, kompozitorda ishlaydi: yangi sahifa yuklanayotganda ham
   kadr tushmaydi. Qo'llab-quvvatlamaydigan brauzerda hech nima
   o'zgarmaydi — o'sha eski, keskin almashinuv qoladi, xato bermaydi. */
@view-transition { navigation: auto; }

/* Sarlavha va pastki nav sahifa bilan birga suzmaydi: ularga alohida nom
   berilgani uchun brauzer ularni sahifadan ajratib oladi va joyida
   qoldiradi. Doimiy chrome — «premium» hissining eng arzon manbai. */
.site-header { view-transition-name: site-header; }
.mobile-bottom-nav { view-transition-name: bottom-nav; }

@keyframes page-fade-out { to { opacity: 0; } }
/* 8px — ko'z ilg'aydigan eng kichik masofa. Kattaroq bo'lsa sahifa
   «uchib kelgandek» bo'ladi va bu har o'tishda charchatadi. */
@keyframes page-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes page-sink { from { opacity: 0; transform: translateY(-6px); } }

::view-transition-old(root) { animation: page-fade-out var(--page-out) var(--ease-standard) both; }
::view-transition-new(root) { animation: page-rise var(--page-in) var(--ease-out) both; }

/* Orqaga qaytish teskari yo'nalishda: oldinga yurganda kontent pastdan
   ko'tariladi, qaytganda yuqoridan tushadi. Yo'nalish `pagereveal` da
   aniqlanadi (sahifa <head> idagi skript). */
:root:active-view-transition-type(orqaga) ::view-transition-new(root) {
  animation-name: page-sink;
}

/* Doimiy chrome tez almashadi: unda faqat faol havola rangi o'zgaradi. */
::view-transition-old(site-header), ::view-transition-new(site-header),
::view-transition-old(bottom-nav), ::view-transition-new(bottom-nav) {
  animation-duration: var(--page-out);
}