/* =========================================================================
   motion.css — sahifalarni "jonlantiruvchi" harakat qatlami.

   ASOSIY QOIDA: faqat `opacity` va `transform` animatsiya qilinadi. Bu ikki
   xossa elementning layout qutisiga (eni, balandligi, joyi) ta'sir qilmaydi,
   shuning uchun Figma'dan eksport qilingan qat'iy 1920px kompozitsiya
   piksel-aniq o'z joyida qoladi. Hech qanday rang, o'lcham yoki joylashuv
   o'zgartirilmaydi.

   Barcha qoidalar `html.mo` bilan yopilgan — bu klassni `motion.js` <head>
   da qo'shadi. JS o'chiq bo'lsa yoki brauzer `IntersectionObserver` ni
   qo'llab-quvvatlamasa, klass umuman qo'shilmaydi va sahifa avvalgidek
   (statik) ko'rinadi.

   Yashirin holat (`opacity: 0`) qoidasini shu fayl EMAS, `motion.js` o'zi
   <style> sifatida kiritadi: nishon selektorlar ro'yxati faqat bitta joyda
   (JS da) turishi kerak, aks holda ikki fayl bir-biridan uzilib qolsa
   kontent butunlay ko'rinmay qolish xavfi bor.
   ========================================================================= */

:root {
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
  --mo-rise: 18px;
}

/* ---- 1. Ko'rinib chiqish (scroll reveal) --------------------------------
   `motion.js` element ekranga kirganda `.mo-in` qo'shadi. Animatsiya
   (transition emas) ataylab tanlangan: tugagach `.mo-done` bilan butunlay
   o'chiriladi va `transform` quyidagi hover effektlariga bo'shatib beriladi
   (ishlab turgan animatsiya transitiondan ustun turadi). */
@keyframes mo-rise-in {
  from { opacity: 0; transform: translateY(var(--mo-rise)); }
  to   { opacity: 1; transform: none; }
}
@keyframes mo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html.mo .page .mo-in {
  animation: mo-rise-in .6s var(--mo-ease) both;
}

/* `.page` ning BEVOSITA bolalari faqat so'nadi — siljimaydi.
   Sabab: `page-scale.js` dagi `relayoutFooter()` aynan shu bolalarning
   `getBoundingClientRect().bottom` ini o'lchab footer `top` ini hisoblaydi,
   `transform` esa o'sha o'lchovni siljitib yuborardi. */
html.mo .page > .mo-in {
  animation-name: mo-fade-in;
}

html.mo .page .mo-done {
  animation: none;
  opacity: 1;
}

/* ---- 2. Kartochkalar: sichqoncha va bosish javobi ----------------------- */

/* Slayder slaydlari o'z animatsiyasiga ega (hero-slider.css) — tegilmaydi. */
@media (hover: hover) and (pointer: fine) {
  html.mo .page :is(article, .lnk-host):not(.hero-slide) {
    transition: transform .3s var(--mo-ease);
  }
  html.mo .page :is(article, .lnk-host):not(.hero-slide):hover {
    transform: translateY(-5px);
  }

  /* Karta ichidagi rasm sekin kattalashadi. `.fig-bg` da `overflow: hidden`
     bor (base.css), shuning uchun rasm karta chegarasidan chiqmaydi.
     `--cover-zoom` — bazadan keladigan muqova masshtabi; hero-slider.css
     dagidek unga KO'PAYTIRILADI, aks holda tahrirchi qo'ygan masshtab
     hover paytida yo'qolib qolardi. */
  html.mo .page :is(article, .lnk-host):not(.hero-slide) .fig-bg > .fig-img {
    transition: transform .55s var(--mo-ease);
  }
  html.mo .page :is(article, .lnk-host):not(.hero-slide):hover .fig-bg > .fig-img {
    transform: scale(calc(1.05 * var(--cover-zoom, 100) / 100));
  }

  /* Podkast kartasidagi "play" tugmasi — yumshoq sakrash. */
  html.mo .page .play-button-container {
    transition: transform .35s cubic-bezier(.34, 1.4, .64, 1);
  }
  html.mo .page .lnk-host:hover .play-button-container {
    transform: scale(1.12);
  }
}

/* Sensorli ekranda hover yo'q — bosilganda javob beradi. */
@media (hover: none) {
  html.mo .page :is(article, .lnk-host):not(.hero-slide) {
    transition: transform .18s ease-out;
  }
  html.mo .page :is(article, .lnk-host):not(.hero-slide):active {
    transform: scale(.985);
  }
}

/* Yuqoridagi ikki blokdagi `transform` `.page` ning bevosita bolasiga
   tushmasligi kerak — 1-banddagi bilan bir xil sabab (footer o'lchovi).
   `!important` ataylab: bu bezak emas, joylashuvni himoya qiluvchi qoida. */
html.mo .page > :is(article, .lnk-host):hover,
html.mo .page > :is(article, .lnk-host):active {
  transform: none !important;
}

/* ---- 3. Tugmalar va boshqaruv elementlari ------------------------------- */
html.mo .page a.button,
html.mo .page .related-pager-btn,
html.mo .page .gazeta-issues-nav,
html.mo .page .hero-slider-arrow {
  transition: transform .25s var(--mo-ease), opacity .25s var(--mo-ease);
}
@media (hover: hover) and (pointer: fine) {
  html.mo .page a.button:hover { transform: translateY(-2px); }
  html.mo .page .related-pager-btn:not(:disabled):hover,
  html.mo .page .gazeta-issues-nav:not(:disabled):hover,
  html.mo .page .hero-slider-arrow:hover { transform: scale(1.1); }
}
html.mo .page a.button:active { transform: translateY(0) scale(.97); }
html.mo .page .related-pager-btn:not(:disabled):active,
html.mo .page .gazeta-issues-nav:not(:disabled):active,
html.mo .page .hero-slider-arrow:active { transform: scale(.94); }

/* ---- 4. "Harakatni kamaytirish" rejimi ---------------------------------
   `motion.js` bu rejimda umuman ishga tushmaydi; bu blok esa rejim sahifa
   ochilgandan KEYIN yoqilgan holat uchun — qolgan animatsiyalar bir zumda
   tugaydi, kontent ko'rinmay qolmaydi. */
@media (prefers-reduced-motion: reduce) {
  html.mo .page *,
  html.mo .page *::before,
  html.mo .page *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}
