/* 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, .text-link, .language-option,
.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, .text-link:active,
.language-option: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,
.motion-surface {
  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, .motion-surface:active {
  transform: scale(.985);
}

/* 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); }
}

/* 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; }
  .language-option { translate: none; scale: none; }
  /* O'qish rejimi: panellar sakramasdan, darrov holatini o'zgartiradi. */
  .site-header, .reader-progress, .float-pill { 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);
}