/* ═══════════════════════════════════════════════════════════════════════════
   STEPS — HARAKAT (animatsiya) uslublari. Egasi: ANIMATSIYA agenti (ui/motion.js bilan birga).
   • Faqat transform va opacity — 60fps, compositor'da.
   • prefers-reduced-motion (tokens.css) va :root[data-motion="reduce"] (base.css) da hamma harakat
     .01ms ga tushadi; bu yerda qo'shimcha ravishda parallaks va "suzish" o'chiriladi (pastda).
   • Bazaviy keyframe'lar (sheetUp/sheetDown, toastIn…) components.css da; bu yerda — ularni boyitish.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{--ios:cubic-bezier(.32,.72,0,1)}          /* iOS push/pop va sheet egri chizig'i */

@keyframes pushIn{from{transform:translate3d(100%,0,0)}to{transform:none}}
@keyframes popOut{from{transform:none}to{transform:translate3d(100%,0,0)}}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes alertIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}

/* ───── Tablar: yangi ekran o'tish boshlanguncha yashirin (motion.pageTransition ochadi) ─────
   Ikki ekran bir lahza ustma-ust ko'rinib "miltillamasin". */
#view > .screen ~ .screen{opacity:0}

/* ───── Sahifa overlay'i: iOS "push" (o'ngdan) va "pop" (o'ngga) ─────
   Kirish animatsiyasi `backwards` — tugagach transform bo'sh qoladi (pastdagi parallaks ishlashi uchun). */
.ov--page{animation:pushIn .5s var(--ios) backwards;transition:transform .3s var(--ios);
          box-shadow:-1px 0 0 var(--edge),-24px 0 48px -18px rgba(0,0,0,.28)}
.ov--page.is-leaving{animation:popOut .24s cubic-bezier(.4,0,.9,.6) forwards}
/* birinchi ochilish (welcome) — surilmaydi, sokin paydo bo'ladi */
.ov--page[data-overlay="welcome"]{animation:fadeUp .5s var(--ease) backwards;box-shadow:none}

/* Ostidagi qatlam biroz chapga suriladi (parallaks) — sahifa ochilganda va yopilganda.
   Ketish — push bilan bir xil .5s, qaytish — pop bilan hamnafas .3s (o'tish maqsad holatidagi qoidadan olinadi). */
#view,.tabbar{transition:transform .3s var(--ios)}
.phone[data-top-kind="page"] #view,.phone[data-top-kind="page"] .tabbar{transform:translate3d(-22%,0,0);transition-duration:.5s}
#layer > .ov--page:has(~ .ov--page:not(.is-leaving)){transform:translate3d(-22%,0,0);transition-duration:.5s}
/* welcome/onboarding ostida — ilova hali ko'rinmaydi, surish shart emas */
.phone:is([data-top="welcome"],[data-top="onboarding"]) :is(#view,.tabbar){transition:none}

/* ───── Pastdan chiqadigan oyna ───── */
.sheet{animation-duration:.5s;animation-timing-function:var(--ios);transition:transform .45s var(--ios)}
.sheet.is-dragging{transition:none;will-change:transform}
.sheet-dim{transition:opacity .2s ease}
.sheet-wrap:has(.sheet.is-dragging) .sheet-dim{transition:none}
/* sheet ustida sheet (natija → tarkib): orqadagisi iOS'dagidek biroz kichrayadi */
#layer > .sheet-wrap:has(~ .sheet-wrap:not(.is-leaving)) > .sheet{transform:scale(.94) translate3d(0,-8px,0);transform-origin:50% 0}
/* tortish zonasi: matn belgilanmaydi, sichqonchada "ushlash" kursori */
.sheet .grab,.sheet .sheet-head{-webkit-user-select:none;user-select:none}
@media (hover:hover) and (pointer:fine){.sheet .grab{cursor:grab}.sheet.is-dragging{cursor:grabbing}}
/* tutqich tortilayotganini his qildiradi */
.grab{transition:transform .2s var(--ease),background-color .2s ease}
.sheet.is-dragging .grab{transform:scaleX(1.25);background:var(--muted)}

/* ───── Tasdiqlash oynasi: iOS alert — kattadan joyiga ───── */
.alert{animation:alertIn .32s var(--ease)}

/* ───── Toast: tepadan prujina bilan tushadi, ikonkasi "pop" qiladi ───── */
.toast-ic{animation:popIn .5s var(--spring) .08s backwards}

/* ───── Bosilish effektlari ───── */
.btn--block:active:not(:disabled),.cta:active:not(:disabled){transform:scale(.975)}
.fab:active:not(:disabled){transform:scale(.92)}
.icon-btn:active:not(:disabled),.avatar:active{transform:scale(.9)}
.toggle:active{transform:none}
/* toggle dastagi bosilganda cho'ziladi (iOS) */
.toggle i{transform-origin:0 50%;transition:transform .3s var(--spring)}
.toggle:active i{transform:scaleX(1.16)}
.toggle[aria-checked="true"] i{transform-origin:100% 50%}
.toggle[aria-checked="true"]:active i{transform:translateX(20px) scaleX(1.16)}
/* ro'yxat qatori — fon bilan, tez yonadi, sekin so'nadi */
button.cell{transition:background-color .35s ease}
button.cell:active{transition-duration:.05s}

/* ───── Halqa va progress: to'lish ───── */
.ring-p{transition:stroke-dashoffset 1.1s var(--ease),stroke .3s}

/* ───── Bo'sh holat: illyustratsiya yumshoq ko'rinadi ───── */
.empty-art,.empty-ic{animation:popIn .6s var(--spring) backwards}
.empty-t,.empty-p,.empty .btn{animation:fadeUp .5s var(--ease) .08s backwards}

/* ───── Harakatni kamaytirish: parallaks, surish, cho'zilish — hammasi o'chadi ───── */
@media (prefers-reduced-motion:reduce){
  .phone[data-top-kind="page"] #view,.phone[data-top-kind="page"] .tabbar,
  #layer > .ov--page:has(~ .ov--page:not(.is-leaving)),
  #layer > .sheet-wrap:has(~ .sheet-wrap:not(.is-leaving)) > .sheet{transform:none}
  .toggle:active i{transform:none}
  .toggle[aria-checked="true"]:active i{transform:translateX(20px)}
}
:root[data-motion="reduce"] .phone[data-top-kind="page"] #view,
:root[data-motion="reduce"] .phone[data-top-kind="page"] .tabbar,
:root[data-motion="reduce"] #layer > .ov--page:has(~ .ov--page:not(.is-leaving)),
:root[data-motion="reduce"] #layer > .sheet-wrap:has(~ .sheet-wrap:not(.is-leaving)) > .sheet{transform:none}
:root[data-motion="reduce"] .toggle:active i{transform:none}
:root[data-motion="reduce"] .toggle[aria-checked="true"]:active i{transform:translateX(20px)}