/* ==========================================================================
   Prohisob — animatsiya qatlami
   styles.css va index.html tuzilmasiga tegilmagan. Bu faylni o'chirsangiz,
   sayt avvalgi holatida ishlayveradi.
   Barcha animatsiyalar faqat "harakatni kamaytirish" rejimi yoqilmagan
   qurilmalarda ishlaydi.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Aylantirganda paydo bo'lish ---------- */
  .anim-ready [data-rv] {
    opacity: 0;
    transition: opacity .75s cubic-bezier(.16, 1, .3, 1),
                transform .75s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  .anim-ready [data-rv="up"]    { transform: translateY(26px) }
  .anim-ready [data-rv="left"]  { transform: translateX(-28px) }
  .anim-ready [data-rv="right"] { transform: translateX(28px) }
  .anim-ready [data-rv="zoom"]  { transform: scale(.965) translateY(14px) }
  .anim-ready [data-rv].rv-in   { opacity: 1; transform: none; will-change: auto }

  /* ---------- 2. Asosiy ekran: ketma-ket chiqish ---------- */
  .anim-ready .hero-copy > *,
  .anim-ready .hero-art { opacity: 0 }
  .anim-ready .hero-copy > * {
    animation: pr-up .85s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 95ms + 120ms);
  }
  .anim-ready .hero-art {
    animation: pr-art 1.05s cubic-bezier(.16, 1, .3, 1) .34s forwards;
  }
  @keyframes pr-up  { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
  @keyframes pr-art { from { opacity: 0; transform: translateY(34px) scale(.975) } to { opacity: 1; transform: none } }

  /* sarlavhadagi sariq belgi chapdan o'ngga yoyiladi */
  .anim-ready .hero-copy .registration-mark,
  .anim-ready .hero-copy mark {
    animation: pr-mark .7s cubic-bezier(.65, 0, .35, 1) .75s both;
    -webkit-box-decoration-break: clone;
  }
  @keyframes pr-mark {
    from { clip-path: inset(0 100% 0 0) }
    to   { clip-path: inset(0 0 0 0) }
  }

  /* ---------- 3. To'lov bildirishnomasi ---------- */
  .anim-ready .payment-toast {
    animation: pr-toast .7s cubic-bezier(.34, 1.4, .5, 1) 1.15s both,
               pr-float 5.5s ease-in-out 2s infinite;
  }
  @keyframes pr-toast {
    from { opacity: 0; transform: translateY(16px) scale(.94) }
    to   { opacity: 1; transform: none }
  }
  @keyframes pr-float { 50% { transform: translateY(-7px) } }

  /* ---------- 4. Diagramma ustunlari o'sadi ---------- */
  .anim-ready .bar-pair i {
    height: 0;
    transition: height .85s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--bd, 0ms);
  }
  .anim-ready .chart-bars.bars-in .bar-pair i { height: var(--h) }

  /* ---------- 5. Telegram yozishmasi ketma-ket ---------- */
  .anim-ready .chat-bubble {
    opacity: 0;
    transform: translateY(12px) scale(.97);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.3, .5, 1);
    transition-delay: var(--cd, 0ms);
  }
  .anim-ready .bot-chat.chat-in .chat-bubble { opacity: 1; transform: none }
  .anim-ready .chat-date { opacity: 0; transition: opacity .4s ease }
  .anim-ready .bot-chat.chat-in .chat-date { opacity: 1 }

  /* ---------- 6. Kartochkalar: sichqoncha tekkanda ---------- */
  .feature-card, .step, .capability, .more-capability, .worker, .mini-stat {
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease;
  }
  .feature-card:hover, .step:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px -22px rgba(23, 28, 32, .34);
  }
  .more-capability:hover, .capability:hover { transform: translateY(-3px) }
  .feature-icon, .step-number, .stat-icon { transition: transform .3s cubic-bezier(.34, 1.4, .5, 1) }
  .feature-card:hover .feature-icon { transform: scale(1.09) rotate(-4deg) }
  .step:hover .step-number { transform: scale(1.1) }

  /* ---------- 7. Tugmalar va havolalar ---------- */
  .button { transition: transform .2s cubic-bezier(.16,1,.3,1), background .2s ease, box-shadow .2s ease, color .2s ease }
  .button:hover { transform: translateY(-2px) }
  .button:active { transform: translateY(0) }
  .button .arrow, .text-link .arrow { transition: transform .25s cubic-bezier(.34, 1.4, .5, 1) }
  .button:hover .arrow, .text-link:hover .arrow { transform: translate(3px, -3px) }
  .text-link { position: relative }
  .text-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  }
  .text-link:hover::after { transform: scaleX(1) }
  .site-nav a, .footer a { transition: color .18s ease, opacity .18s ease }

  /* ---------- 8. Savol-javoblar ---------- */
  details[open] > *:not(summary) { animation: pr-faq .38s cubic-bezier(.16, 1, .3, 1) }
  @keyframes pr-faq {
    from { opacity: 0; transform: translateY(-6px) }
    to   { opacity: 1; transform: none }
  }
  summary { transition: color .18s ease }

  /* ---------- 9. Yuqori panel ---------- */
  .site-header { transition: box-shadow .25s ease, border-color .25s ease, background .25s ease }
  .site-header.pr-scrolled {
    border-bottom-color: #e4e3db;
    box-shadow: 0 6px 22px -18px rgba(23, 28, 32, .5);
  }

  /* ---------- 10. Dastur oynasi: yengil parallaks ---------- */
  .anim-ready .hero-art .app-shell,
  .anim-ready .hero-art > div:first-child { transition: transform .15s linear }
}

/* Raqam sanog'i paytida kenglik sakramasin */
.mini-stat strong, .toast-amount { font-variant-numeric: tabular-nums }