/* ============================================================
   YaqinJoy — JONLANTIRISH QATLAMI (v19)
   Sof qo'shimcha modul: bu fayl olib tashlansa sayt avvalgidek
   ishlayveradi (barqarorlik qoidasi).
   Intizom: faqat transform/opacity, 160–300ms, ketma-ket 45ms,
   sakrash/aylanish yo'q. GPU-yengil — telefon qotmaydi.
   ============================================================ */

/* ── 0. TINIQLIK: qatlamli soyalar + chuqurlik ── */
:root {
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.07), 0 6px 22px rgba(15, 23, 42, 0.09);
  --shadow-float: 0 4px 10px rgba(15, 23, 42, 0.13), 0 14px 36px rgba(15, 23, 42, 0.19);
}
.btn-primary {
  box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.input, .textarea, .select {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chip.active { box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35); }
body { text-rendering: optimizeLegibility; }

/* ── 1. BOSISH SEZGISI: har bir element qo'lga javob beradi ── */
.btn, .chip, .biz-card, .pop-card, .prof-item, .icon-btn, .cat-item,
.bn-item, .pg-add, .addr-item, .sheet-item, .adm-row, .faq-q, .upload-box {
  transition: transform 0.12s ease, box-shadow 0.15s ease,
              background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:active, .chip:active, .prof-item:active, .cat-item:active,
.pg-add:active, .addr-item:active, .sheet-item:active, .adm-row:active,
.faq-q:active, .upload-box:active { transform: scale(0.965); }
.biz-card:active, .pop-card:active { transform: scale(0.975); }
.icon-btn:active { transform: scale(0.88); }
.bn-item:active { transform: scale(0.9); }

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

  /* ── 2. SAHIFA KIRISHI: yumshoq ko'tarilish ──
     DIQQAT: fill-mode ATAYLAB yo'q — transform-animatsiya "filling" holatda
     qolsa, ichidagi position:fixed pastki menyu viewport'ga emas, sahifaga
     bog'lanib qoladi (containing block qoidasi). Shu holicha qolsin. */
  #app > .page:not(.map-page) {
    animation: yj-page-in 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  @keyframes yj-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  /* ── 3. KARTALAR KETMA-KET JONLANADI (birinchi 8 tasi) ── */
  .biz-card, .pop-card, .abiz, .cat-item, .review-item, .benefit {
    animation: yj-card-in 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .biz-card:nth-child(2), .pop-card:nth-child(2), .cat-item:nth-child(2), .abiz:nth-child(2) { animation-delay: 0.045s; }
  .biz-card:nth-child(3), .pop-card:nth-child(3), .cat-item:nth-child(3), .abiz:nth-child(3) { animation-delay: 0.09s; }
  .biz-card:nth-child(4), .pop-card:nth-child(4), .cat-item:nth-child(4), .abiz:nth-child(4) { animation-delay: 0.135s; }
  .biz-card:nth-child(5), .pop-card:nth-child(5), .cat-item:nth-child(5) { animation-delay: 0.18s; }
  .biz-card:nth-child(6), .pop-card:nth-child(6), .cat-item:nth-child(6) { animation-delay: 0.225s; }
  .biz-card:nth-child(7), .cat-item:nth-child(7) { animation-delay: 0.27s; }
  .biz-card:nth-child(8), .cat-item:nth-child(8) { animation-delay: 0.315s; }
  @keyframes yj-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }

  /* ── 4. "NAFAS OLUVCHI" JONLI ELEMENTLAR ── */
  /* Ochiq joylar — yashil nuqta tirik urib turadi (kartada ham, sahifada ham) */
  .badge-open::before, .open-t::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; margin-right: 5px;
    animation: yj-pulse 1.7s ease-in-out infinite;
  }
  @keyframes yj-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
  }

  /* Xaritadagi "men" nuqtasi nafas oladi */
  .um-dot { animation: yj-breathe 2.6s ease-in-out infinite; }
  @keyframes yj-breathe {
    0%, 100% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(37, 99, 235, 0.1), 0 2px 8px rgba(0, 0, 0, 0.4); }
  }

  /* Bosh sahifa illyustratsiyasi ohista suzadi */
  .hero-art { animation: yj-float 4.5s ease-in-out infinite alternate; }
  @keyframes yj-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }

  /* ── 5. SKELETON: o'lik miltillash o'rniga YALTIROQ TO'LQIN ── */
  .skeleton { position: relative; overflow: hidden; animation: none; opacity: 0.9; }
  .skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: yj-shimmer 1.25s ease-in-out infinite;
  }
  [data-theme="dark"] .skeleton::after,
  .force-dark .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  }
  @keyframes yj-shimmer { to { transform: translateX(100%); } }

  /* ── 6. XARITA MARKERLARI tomchilab tushadi ── */
  .bm-wrap { animation: yj-marker-in 0.2s ease-out both; }
  @keyframes yj-marker-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.85); }
    to { opacity: 1; transform: translateY(-2px) scale(1); }
  }

  /* ── 7. PASTKI MENYU: tanlanganda ikonka "pop" qiladi ── */
  .bn-item.active svg { animation: yj-pop 0.28s cubic-bezier(0.3, 1.5, 0.5, 1); }
  @keyframes yj-pop {
    0% { transform: scale(0.7); }
    62% { transform: scale(1.14); }
    100% { transform: scale(1); }
  }

  /* ── 8. Mayda jonliliklar ── */
  .uz-total:not(.hide) { animation: yj-badge-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  @keyframes yj-badge-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
  .vcheck svg { animation: yj-pop 0.3s ease-out; }
  .rate-stars button { transition: transform 0.12s ease; }
  .rate-stars button:active { transform: scale(1.25); }
  .rate-stars button.on { animation: yj-pop 0.24s ease-out; }
  .hero-dots span { transition: all 0.22s cubic-bezier(0.2, 0.8, 0.3, 1); }
  .toggle .knob { transition: all 0.18s cubic-bezier(0.3, 1.2, 0.4, 1); }
}

/* ── 9. Reytingi hali yo'q joylarda yulduz xira — e'tibor faqat haqiqiy
   bahoga tushadi (halol reyting ko'rinishi) ── */
.stars.empty { color: var(--text-3); }
.stars.empty svg { opacity: 0.55; }

/* ── 10. KOMPYUTER: ustun "ilova ramkasi" ichida, atrofga yorug' nafas ──
   (mobil ko'rinishga umuman ta'sir qilmaydi) */
@media (min-width: 900px) {
  body {
    background:
      radial-gradient(640px 420px at 6% 10%, rgba(37, 99, 235, 0.055), transparent 62%),
      radial-gradient(760px 520px at 95% 90%, rgba(37, 99, 235, 0.065), transparent 62%),
      var(--bg);
  }
  #app > .page {
    background: var(--bg); min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--border), 0 28px 90px rgba(15, 23, 42, 0.1);
  }
  [data-theme="dark"] #app > .page, #app > .page.force-dark {
    box-shadow: 0 0 0 1px var(--border), 0 28px 90px rgba(0, 0, 0, 0.55);
  }
}