/* ==========================================================================
   GRAUMANN · HARAKAT QATLAMI (Otabek, 12.09: «umumiy animatsiya, minimalistik toza»)

   Falsafa: harakat — bezak emas, yoʻnaltirgich. Uch vazifasi bor:
     1) kontent paydo boʻlganini bildirish (skroll-ochilish)
     2) nima bosiladiganini bildirish (hover / bosish)
     3) holat oʻzgarganini bildirish (tab, chip, header)
   Sakrash, aylanish, kattalashtirish, «bounce», parallaks — YOʻQ.
   Bitta egri (--ease), ikki davomiylik (--tez 180ms / --anim 280ms), bitta
   ochilish (--ochil 560ms). Boshqa qiymat kiritilmaydi.
   Butun fayl `prefers-reduced-motion` da oʻchadi (asos.css:107 global qoidasi).
   ========================================================================== */

:root{ --tez:180ms; --ochil:560ms; }

html{scroll-behavior:smooth}

/* ---------- 1. SKROLL-OCHILISH ----------
   14 px → 10 px: koʻz siljishni sezadi, lekin «uchib kelish» boʻlmaydi. */
.kir{transform:translateY(10px);transition:opacity var(--ochil) var(--ease),
     transform var(--ochil) var(--ease)}
/* bir guruhdagi elementlar ketma-ket ochiladi (JS --i ni qoʻyadi, maks. 6×55 ms) */
.kir{transition-delay:calc(var(--i,0) * 55ms)}

/* ---------- 2. HAVOLA VA OʻQ ----------
   Matn-havolada oʻq 4 px siljiydi, tag chiziq chapdan oʻngga oʻsadi. */
/* Tag chiziq ATAYLAB yoʻq: havola ichida oʻq belgisi bor, chiziq oʻq ostidan
   ham oʻtib ketardi. Affordans — oʻqning siljishi va rangning quyuqlashuvi. */
.ha{transition:color var(--tez) var(--ease)}
.ha .ik{transition:transform var(--anim) var(--ease)}
.ha:hover .ik,.ha:focus-visible .ik{transform:translateX(4px)}

/* ---------- 3. TUGMALAR ----------
   Hover — rang; bosish — 1 px pastga. Kattalashtirish yoʻq. */
.btn,.oq-tugma,.chip,.plita,.tab{transition:
  background-color var(--anim) var(--ease),border-color var(--anim) var(--ease),
  color var(--anim) var(--ease),transform var(--tez) var(--ease)}
.btn:active,.oq-tugma:active,.chip:active,.plita:active{transform:translateY(1px)}
.btn .ik{transition:transform var(--anim) var(--ease)}
.btn:hover .ik{transform:translateX(3px)}

/* ---------- 4. NAVIGATSIYA ----------
   Faol boʻlim chizigʻi oʻsib chiqadi, sakrab paydo boʻlmaydi. */
.nav > a,.nav > .nav__q > a{position:relative}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--anim) var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- 5. HEADER ----------
   Quyuq herodan oq holatga oʻtish silliq. */
.header{transition:background-color var(--anim) var(--ease),
        border-color var(--anim) var(--ease)}

/* ---------- 6. FORMA ----------
   Fokus halqasi ham silliq kiradi. */
.maydon input,.maydon select,.maydon textarea{
  transition:border-color var(--tez) var(--ease),background-color var(--tez) var(--ease)}

/* ---------- 7. AKKORDEON ----------
   <details> ochilganda belgisi buriladi. */
summary .ik,.brd-fq__q summary::after,.sss__q summary::after{
  transition:transform var(--anim) var(--ease)}
details[open] > summary .ik{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav a::after{transition:none;transform:scaleX(1)}
  .kir{transition-delay:0ms!important}
}