/* ===========================================================
   KAFTIMDA — umumiy UX qatlami (animatsiya)
   Har sahifaning o'z inline uslubidan KEYIN ulanadi.
   Barcha sinflar "ux-" prefiksi bilan — mavjud uslublarga tegmaydi.
   =========================================================== */

/* ---------- Sahifa ochilishi ---------- */
@keyframes ux-page-in { from { opacity: 0; transform: translateY(6px); } }
html.ux-ready body { animation: ux-page-in .26s cubic-bezier(.22,.61,.36,1) both; }
html.ux-leaving body { opacity: 0; transition: opacity .16s ease; }

/* ---------- Bosish javobi (Apple uslubi: mayin, tez) ---------- */
button, .ux-press, a.card, .navitem, .tab, .chip {
  transition: transform .12s cubic-bezier(.2,.8,.3,1), opacity .12s ease, background-color .16s ease, border-color .16s ease, box-shadow .18s ease;
}
button:active, .ux-press:active, a.card:active, .navitem:active, .tab:active, .chip:active {
  transform: scale(.972);
}
button:disabled:active, .ux-press.is-busy:active { transform: none; }

/* ---------- Ripple (juda mayin, deyarli sezilmas) ---------- */
.ux-rp { position: relative; overflow: hidden; }
.ux-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .16; transform: scale(0);
  animation: ux-rp .5s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ux-rp { to { transform: scale(1); opacity: 0; } }

/* ---------- Modal / overlay ---------- */
@keyframes ux-fade { from { opacity: 0; } }
@keyframes ux-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes ux-modal-out { to { opacity: 0; transform: translateY(6px) scale(.99); } }
.ux-in  { animation: ux-modal-in .22s cubic-bezier(.22,.61,.36,1) both; }
.ux-out { animation: ux-modal-out .16s ease both; }

/* ---------- Ro'yxat / karta ketma-ket paydo bo'lishi ---------- */
@keyframes ux-item-in { from { opacity: 0; transform: translateY(8px); } }
.ux-stagger > * { animation: ux-item-in .34s cubic-bezier(.22,.61,.36,1) both; }
.ux-stagger > *:nth-child(1){animation-delay:.02s}
.ux-stagger > *:nth-child(2){animation-delay:.055s}
.ux-stagger > *:nth-child(3){animation-delay:.09s}
.ux-stagger > *:nth-child(4){animation-delay:.125s}
.ux-stagger > *:nth-child(5){animation-delay:.16s}
.ux-stagger > *:nth-child(6){animation-delay:.195s}
.ux-stagger > *:nth-child(7){animation-delay:.23s}
.ux-stagger > *:nth-child(8){animation-delay:.265s}
.ux-stagger > *:nth-child(n+9){animation-delay:.3s}

/* ---------- Holat animatsiyalari ---------- */
@keyframes ux-shake {
  10%,90%{transform:translateX(-1.5px)} 20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)}
}
.ux-shake { animation: ux-shake .42s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes ux-ok-pulse {
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--green,#16a34a) 45%, transparent)}
  100%{box-shadow:0 0 0 14px transparent}
}
.ux-ok { animation: ux-ok-pulse .7s ease-out both; }

@keyframes ux-pop-once { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
.ux-pop { animation: ux-pop-once .32s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- Skeleton yuklanish ---------- */
@keyframes ux-sk { to { background-position: 200% 0; } }
.ux-skel {
  background: linear-gradient(90deg,
    color-mix(in srgb, currentColor 7%, transparent) 25%,
    color-mix(in srgb, currentColor 14%, transparent) 37%,
    color-mix(in srgb, currentColor 7%, transparent) 63%);
  background-size: 200% 100%; animation: ux-sk 1.3s linear infinite;
  border-radius: 8px; color: var(--muted, #8a93a6);
}

/* ---------- Toast ---------- */
.ux-toasts {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 9999; pointer-events: none; width: max-content; max-width: min(92vw, 460px);
}
.ux-toast {
  pointer-events: auto; padding: 11px 16px; border-radius: 13px;
  font: 600 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--card, #fff); color: var(--ink, #1a2233);
  border: 1px solid var(--line, #e5e9f2);
  box-shadow: 0 10px 34px -12px rgba(20,26,46,.42);
  animation: ux-toast-in .28s cubic-bezier(.22,.61,.36,1) both;
  display: flex; align-items: center; gap: 9px; text-align: left;
}
.ux-toast.out { animation: ux-toast-out .2s ease both; }
.ux-toast.ok   { border-color: color-mix(in srgb, var(--green,#16a34a) 45%, transparent); }
.ux-toast.err  { border-color: color-mix(in srgb, var(--red,#dc2626) 45%, transparent); }
.ux-toast.warn { border-color: color-mix(in srgb, var(--orange,#ea8a00) 50%, transparent); }
.ux-toast i { font-style: normal; font-size: 15px; }
.ux-toast.ok i   { color: var(--green,#16a34a); }
.ux-toast.err i  { color: var(--red,#dc2626); }
.ux-toast.warn i { color: var(--orange,#ea8a00); }
@keyframes ux-toast-in  { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes ux-toast-out { to   { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Ovoz o'chirgichi ---------- */
.ux-sound-btn { cursor: pointer; }
.ux-sound-btn.off { opacity: .62; }

/* ---------- Harakatni kamaytirish talabi ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}