/* =========================================================================
   iCar24 — motion qatlami
   =========================================================================
   Alohida fayl: `styles.css` (3400 qator) ga tegilmaydi, shuning uchun
   harakatni butunlay o'chirish uchun shu bitta <link> ni olib tashlash
   kifoya. Barcha animatsiya FAQAT `transform`, `opacity` va `filter`
   ustida — layout qayta hisoblanmaydi, 60 fps saqlanadi.

   Egri chiziqlar ataylab `styles.css` dagidan uzunroq: u yerdagilar
   interfeys reaksiyasi uchun (160–360ms), bu yerdagilar esa sahnaga
   kirish uchun (700–900ms) — ikki xil maqsad, ikki xil his.
   ========================================================================= */

:root {
  /* Kirish egrisi — oxirida sekinlashadi, "og'irlik" hissi beradi. */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  /* Prujina — bosilgan tugma qaytganda. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --m-dur-word: 820ms;
  --m-dur-reveal: 700ms;
  --m-stagger: 70ms;
}

/* ---------------------------------------------------------------- reveal
   `styles.css` dagi `.reveal` asosiy holatni beradi (opacity 0 + 18px).
   Bu yerda uni kuchaytiramiz: ozgina blur qo'shiladi — element fokusga
   kelayotgandek ko'rinadi, bu sof siljishdan ancha "qimmat" his beradi.
   Kechikish `--i` (guruh ichidagi tartib raqami) orqali, JS beradi. */
.reveal {
  transition:
    opacity var(--m-dur-reveal) var(--ease-entrance),
    transform var(--m-dur-reveal) var(--ease-entrance),
    filter var(--m-dur-reveal) var(--ease-entrance);
  transition-delay: calc(var(--i, 0) * var(--m-stagger));
  transform: translateY(22px);
  filter: blur(6px);
}
.reveal.is-visible {
  transform: none;
  filter: blur(0);
}

/* Yo'nalish variantlari — bo'limga qarab tanlanadi, hammasi bir xil
   tomondan kelsa sahifa monoton bo'lib qoladi. */
.reveal[data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
.reveal[data-reveal="right"] { transform: translate3d(34px, 0, 0); }
.reveal[data-reveal="scale"] { transform: scale(0.94); filter: blur(8px); }
.reveal[data-reveal="left"].is-visible,
.reveal[data-reveal="right"].is-visible,
.reveal[data-reveal="scale"].is-visible { transform: none; }

/* ------------------------------------------------------- sarlavha so'zlari
   H1 so'zma-so'z ko'tariladi. Har so'z `overflow:hidden` niqob ichida —
   matn pastdan "chiqib keladi", shunchaki paydo bo'lmaydi.

   `padding-bottom`/`margin-bottom` juftligi MAJBURIY: niqob bo'lmasa
   pastga tushuvchi harflar (y, g, j, q) kesilib qolardi. */
.m-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.m-word__i {
  display: inline-block;
  transform: translateY(110%);
  transition:
    transform var(--m-dur-word) var(--ease-entrance),
    opacity var(--m-dur-word) var(--ease-entrance);
  opacity: 0;
}
.m-split.is-in .m-word__i {
  transform: none;
  opacity: 1;
}

/* ------------------------------------------------------------ hero sahnasi
   Yuklanishda ketma-ketlik: nadpis -> sarlavha -> matn -> tugmalar ->
   raqamlar -> telefon. Har biri `--d` (soniya) kechikish oladi. */
.m-hero-el {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
  transition:
    opacity 760ms var(--ease-entrance),
    transform 760ms var(--ease-entrance),
    filter 760ms var(--ease-entrance);
  transition-delay: var(--d, 0s);
}
.m-ready .m-hero-el {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Telefon maketi — biroz kattaroq masofadan va uzunroq vaqtda keladi,
   shunda u sahnaning "og'ir" elementi ekani seziladi. */
.m-hero-device {
  opacity: 0;
  transform: translateY(44px) scale(0.965);
  transition:
    opacity 1100ms var(--ease-entrance),
    transform 1100ms var(--ease-entrance);
  transition-delay: var(--d, 0s);
}
.m-ready .m-hero-device {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- parallaks
   JS `--py` ni (piksel) yozadi; CSS uni qo'llaydi. Transform JS'da emas
   CSS'da turgani muhim — boshqa transform'lar bilan urishmaydi. */
.m-parallax {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* ------------------------------------------------------------ bo'lim chizig'i
   Sarlavha ostidagi chiziq ko'ringanda chapdan o'ngga chiziladi. */
.section-head .eyebrow::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 14px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-entrance) 180ms;
  max-width: 64px;
}
.section-head.is-visible .eyebrow::after { transform: scaleX(1); }

/* ------------------------------------------------------------- qadamlar
   "Qanday ishlaydi" raqamlari ko'ringanda signal rangga to'ladi. */
.step__n {
  transition:
    color 520ms var(--ease-entrance) 120ms,
    transform 520ms var(--ease-spring) 120ms;
}
.step.is-visible .step__n {
  color: var(--signal);
  transform: scale(1.06);
}

/* -------------------------------------------------------------- kartochka
   Hover'da ko'tarilish — soya bilan emas, transform bilan (arzonroq). */
.card,
.city {
  transition:
    transform 320ms var(--ease-entrance),
    border-color 320ms var(--ease-entrance),
    box-shadow 320ms var(--ease-entrance);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .city:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px -22px rgba(15, 17, 21, 0.32);
  }
}

/* --------------------------------------------------------------- tugmalar
   Magnit effekt: kursor yaqinlashganda tugma unga ozgina intiladi.
   Siljish JS'dan `--mx/--my` orqali keladi, maksimum 5px — ko'proq
   bo'lsa o'yinchoqqa o'xshaydi. */
.btn {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 260ms var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.btn.is-magnetic { transition-duration: 80ms; }
.btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.97); }

/* Asosiy CTA ichidagi yorug'lik — hover'da chapdan o'ngga o'tadi. */
.btn--signal { position: relative; overflow: hidden; isolation: isolate; }
.btn--signal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.26) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform 720ms var(--ease-entrance);
}
@media (hover: hover) and (pointer: fine) {
  .btn--signal:hover::after { transform: translateX(120%); }
}

/* ======================================================================
   SAHNA TAFSILOTLARI
   ======================================================================
   Quyidagilar "bor-yo'g'i bezak" emas: har biri bitta narsani
   tushuntiradi — hero nuri chuqurlik beradi, qadam chizig'i oqimni
   ko'rsatadi, marshrut esa mahsulotning asosiy va'dasini (usta yo'lda)
   jonlantiradi. Hammasi `transform`/`opacity`/`clip-path` ustida.
   ====================================================================== */

/* ---------------------------------------------------------------- hero nuri
   Sarlavha ortida sekin suzuvchi issiq yorug'lik — tekis fon chuqurlik
   oladi. `.hero` da `overflow: hidden` bor, shuning uchun nur chetga
   chiqmaydi; `z-index: 0` — matn (`.hero > .container`, z-index 1)
   doimo ustida qoladi va kontrast buzilmaydi (shu sabab shaffoflik
   atayin past: 0.13 dan oshmaydi). */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -16%;
  top: -22%;
  width: 76%;
  height: 90%;
  pointer-events: none;
  /* Yadro ataylab sarlavha boshlanadigan nuqtaga to'g'rilangan (taxminan
     ekranning 19% x, 23% y) — shunda nur tasodifiy dog' emas, kompozitsiya
     elementi bo'lib ko'rinadi. */
  background:
    radial-gradient(42% 46% at 46% 50%, rgba(244, 91, 23, 0.13), transparent 70%),
    radial-gradient(38% 42% at 74% 76%, rgba(37, 99, 235, 0.07), transparent 72%);
  filter: blur(28px);
  opacity: 0;
  transition: opacity 1400ms var(--ease-entrance) 300ms;
  animation: m-aurora 24s ease-in-out infinite alternate;
}
.m-ready .hero::after { opacity: 1; }

@keyframes m-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 5%, 0) scale(1.03); }
}

/* ----------------------------------------------------------- qadam chizig'i
   Har bir qadamning ustki chizig'i chapdan o'ngga chiziladi va o'ngga
   borib so'nadi. `styles.css` dagi `border-top` JOYIDA QOLADI — ya'ni
   JS ishlamasa ham bo'lim o'z ko'rinishini yo'qotmaydi, biz faqat
   uning ustiga yorqin chiziq qo'shamiz. */
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), rgba(244, 91, 23, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 860ms var(--ease-entrance) 60ms;
}
.step:first-child::before { display: none; }
.step.is-visible::before { transform: scaleX(1); }

/* --------------------------------------------------------- shahar chiplari
   `.cities` bitta blok sifatida ochiladi (markupda `.reveal` o'shanda),
   lekin ichidagi chiplar birin-ketin tushadi. Tartib raqamini JS
   `--i` orqali beradi. */
.cities .city {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 460ms var(--ease-entrance),
    transform 520ms var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.cities.is-visible .city {
  opacity: 1;
  transform: none;
}
/* Hover yuqoridagi qoidadan KUCHLIROQ bo'lishi shart: `.cities.is-visible
   .city` (0,2,1) oddiy `.city:hover` (0,2,0) ni yengib, ko'tarilishni
   bekor qilardi. */
@media (hover: hover) and (pointer: fine) {
  .cities.is-visible .city:hover { transform: translateY(-5px); }
}

/* --------------------------------------------------------- kuzatuv maketi
   "Qanday ishlaydi" bo'limidagi telefon ko'ringanda ketma-ketlik:
   marshrut chiziladi -> usta nuqtasi tushadi -> vaqt chizig'i to'ladi
   -> "hozir" tuguni puls beradi. Bu bo'lim mahsulotning asosiy
   va'dasi, shuning uchun u statik rasm emas, jonli sahna bo'lishi
   kerak. */

/* inset(yuqori o'ng past chap): yuqoridan 100% kesilgan — ko'rinmaydi;
   o'ngdan "hammasi minus 4px" kesilgan — faqat chap chiziq zonasi
   qoladi. Shu ikki o'lchov ketma-ket ochilib, avval vertikal, keyin
   gorizontal chiziq "chizilgandek" ko'rinadi. */
.how__visual .aroute { clip-path: inset(100% calc(100% - 4px) 0 0); }
.how__visual.is-visible .aroute {
  animation: m-route 1500ms var(--ease-entrance) 240ms forwards;
}
@keyframes m-route {
  0%   { clip-path: inset(100% calc(100% - 4px) 0 0); }
  52%  { clip-path: inset(0 calc(100% - 4px) 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* `.ppin` ning asl holati `translate(-50%, -50%)` — kadrlar ham shu
   bilan tugaydi, aks holda nuqta joyidan siljib qolardi. */
.how__visual .ppin { opacity: 0; }
.how__visual.is-visible .ppin {
  animation: m-pin 620ms var(--ease-spring) 1480ms forwards;
}
@keyframes m-pin {
  from { opacity: 0; transform: translate(-50%, -150%) scale(0.82); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Vaqt chizig'i: `.seg.done` ning to'q rangi 0% dan 100% gacha
   "quyiladi". Element kengligi o'zgarmaydi (background-size animatsiya
   qilinadi), shuning uchun layout qimirlamaydi. */
.how__visual .atimeline .seg.done {
  background-color: var(--rule);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 0% 100%;
}
.how__visual.is-visible .atimeline .seg.done {
  animation: m-seg 640ms var(--ease-entrance) 1680ms forwards;
}
@keyframes m-seg {
  to { background-size: 100% 100%; }
}

.how__visual.is-visible .atimeline .node.now {
  animation: m-now 2400ms ease-out 2100ms infinite;
}
@keyframes m-now {
  0%, 100% { box-shadow: 0 0 0 3px var(--orange-200); }
  55%      { box-shadow: 0 0 0 10px rgba(244, 91, 23, 0); }
}

/* ======================================================================
   HARAKATNI KAMAYTIRISH — tizim sozlamasi. Hamma narsa darhol joyida va
   KO'RINADIGAN bo'lishi shart: animatsiya o'chsa kontent yo'qolmaydi.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .m-hero-el,
  .m-hero-device,
  .m-word__i {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .m-parallax { transform: none !important; }
  .section-head .eyebrow::after { transform: scaleX(1); transition: none; }
  .btn { transform: none !important; }
  .card:hover, .city:hover { transform: none; }

  /* Sahna tafsilotlari — animatsiyasiz, lekin YAKUNIY holatda. */
  .hero::after,
  .how__visual .aroute,
  .how__visual .ppin,
  .how__visual .atimeline .seg.done,
  .how__visual .atimeline .node.now {
    animation: none !important;
  }
  .hero::after { opacity: 1; }
  .step::before { transform: scaleX(1) !important; transition: none !important; }
  .cities .city {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .how__visual .aroute { clip-path: none !important; }
  .how__visual .ppin { opacity: 1 !important; }
  .how__visual .atimeline .seg.done { background-size: 100% 100% !important; }
}