/* =========================================================
   ZIVO — Jonlantirish (animatsiya) qatlami
   style.css dan KEYIN ulanadi. Faqat transform/opacity harakat
   qiladi; barcha ilgaklar assets/js/jonlantirish.js da.
   ========================================================= */

/* ---------- 1. Skroll chizig'i ---------- */
.skroll-chiziq{
  position:fixed; top:0; left:0; right:0; z-index:90;   /* header (80) ustida */
  height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left center;
  pointer-events:none; will-change:transform;
}

/* ---------- 2. Hero ---------- */

/* Sarlavha so'zlari: JS har bir so'zni .hero__soz ga o'raydi.
   Tashqi qatlam kesadi (overflow), ichki qatlam pastdan ko'tariladi.
   Padding/margin juftligi harflarning quyruqlari kesilmasligi uchun. */
.hero__soz{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.06em .05em .16em; margin:-.06em -.05em -.16em;
}
.hero__soz__ichki{
  display:inline-block;
  transform:translateY(112%); opacity:0;
  animation:sozChiq .85s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 95ms + 140ms);
}
@keyframes sozChiq{to{transform:none; opacity:1}}

/* Gradient matn ustidan har 6 soniyada bir marta yorug'lik o'tadi.
   Yorug'lik — alohida fon qatlami; background-clip:text tufayli
   u ham faqat harflar ichida ko'rinadi. */
.hero h1 .grad{
  background-image:
    linear-gradient(115deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%),
    var(--grad);
  background-size:300% 100%,100% 100%;
  background-repeat:no-repeat;
  background-position:100% 0,0 0;
  animation:shimmer 6s linear 1.4s infinite;
}
/* .grad so'z blokiga aylanganda ikkala animatsiya birga ishlaydi —
   aks holda yuqoridagi qoida sozChiq ni bosib qo'yadi */
.hero h1 .grad.hero__soz__ichki{
  animation:sozChiq .85s var(--ease) forwards, shimmer 6s linear infinite;
  animation-delay:calc(var(--i,0) * 95ms + 140ms), 1.4s;
}
@keyframes shimmer{
  0%{background-position:100% 0,0 0}
  22%{background-position:0% 0,0 0}
  100%{background-position:0% 0,0 0}
}

/* Rasm suzadi (translate xususiyati) va sichqonchaga qarab egiladi
   (transform). Ikkalasi bir-biriga xalaqit bermaydi. */
.hero__rasm > img,.hero__lottie{
  animation:suzish 6s ease-in-out infinite;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--ease);
  will-change:transform;
}
@keyframes suzish{
  0%,100%{translate:0 8px}
  50%{translate:0 -8px}
}

/* Sovun pufakchalari — canvas fon qatlamida, matn ostida */
.hero__pufak{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}

/* Asosiy tugma ustidan diagonal yorug'lik o'tadi */
.btn--primary{position:relative; overflow:hidden; isolation:isolate}
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);
  transform:translateX(-130%);
}
.btn--primary:hover::after{transform:translateX(130%); transition:transform .75s var(--ease)}
.btn--primary > *{position:relative; z-index:1}

/* ---------- 3. Xizmatlar lentasi (marquee) ---------- */
.lenta-xizmat{
  position:relative; z-index:1;
  overflow:hidden; margin:-34px 0 40px; padding:12px 0;
  border-block:1px solid var(--line-2);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.lenta-xizmat[hidden]{display:none}
.lenta-xizmat__yol{
  display:flex; width:max-content;
  animation:lentaSilj var(--muddat,48s) linear infinite;
  will-change:transform;
}
.lenta-xizmat:hover .lenta-xizmat__yol{animation-play-state:paused}
.lenta-xizmat__guruh{display:flex; align-items:center; flex:none; gap:26px; padding-right:26px}
.lenta-xizmat__el{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.86rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
.lenta-xizmat__el svg{
  width:18px; height:18px; flex:none; color:var(--brand-600);
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.lenta-xizmat__nuqta{color:var(--brand-300); font-weight:800; font-size:1rem}
@keyframes lentaSilj{to{transform:translateX(-50%)}}

/* ---------- 4. Reveal: ketma-ketlik ---------- */
/* JS qo'shni .reveal larga --d (indeks × 80ms) beradi */
.reveal{transition-delay:var(--d,0ms)}

/* ---------- 5. Kartalar: 3D egilish va kursor nuri ---------- */
.cat,.svc,.promo,.trust__item{position:relative; isolation:isolate}
@media (hover:hover) and (pointer:fine){
  .cat::before,.svc::before,.promo::before,.trust__item::before{
    content:""; position:absolute; inset:0; z-index:-1;
    border-radius:inherit; pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(79,155,255,.17),transparent 62%);
    opacity:0; transition:opacity .4s var(--ease);
  }
  .promo--hero::before{
    background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 62%);
  }
  .cat:hover::before,.svc:hover::before,.promo:hover::before,.trust__item:hover::before{opacity:1}

  /* style.css dagi hover ko'tarilishi saqlanadi, ustiga egilish qo'shiladi */
  .cat:hover,.svc:hover{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
  }
  .promo:hover,.trust__item:hover{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);
  }
}

/* ---------- 6. Qadamlar ---------- */
.steps{position:relative}
/* Kartalar orqasidan o'tadigan uzluksiz chiziq — faqat bir qatorli holatda */
.steps::before{
  content:""; position:absolute; z-index:0; left:28px; right:28px; top:46px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--brand-200),var(--brand-400));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.3s var(--ease) .15s;
}
.steps.is-korindi::before{transform:scaleX(1)}
.step{z-index:1}
.step:not(:last-child)::after{display:none}   /* kichik bo'g'inlar o'rniga uzluksiz chiziq */
.step.is-in .step__n{
  animation:raqamPop .55s var(--ease) both;
  animation-delay:calc(var(--d,0ms) + 260ms);
}
@keyframes raqamPop{
  0%{transform:scale(.4); opacity:0}
  60%{transform:scale(1.12); opacity:1}
  100%{transform:none; opacity:1}
}
@media (max-width:1200px){
  .steps::before{display:none}
}

/* ---------- 7. Trust ikonkalari chizilib chiqadi ---------- */
/* JS har bir shaklga pathLength="1" beradi — shuning uchun 1 yetarli */
.trust__ico svg.is-chiz *{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1s var(--ease) calc(var(--d,0ms) + 220ms);
}
.trust__item.is-in .trust__ico svg.is-chiz *{stroke-dashoffset:0}

/* ---------- 8. FAQ ---------- */
/* Yopilish jarayonida strelka darhol qaytadi (open atributi hali turibdi) */
.qa.is-yopilmoqda summary::after{transform:translateY(-70%) rotate(45deg)}

/* ---------- 9. Yuqoriga tugma ---------- */
.yuqoriga{
  position:fixed; right:20px; bottom:22px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--brand-700);
  border:1px solid var(--line); box-shadow:var(--sh-md);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s, color .2s, box-shadow .2s;
}
.yuqoriga svg{width:20px; height:20px}
.yuqoriga.is-korinadi{opacity:1; transform:none; pointer-events:auto}
.yuqoriga:hover{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--sh-brand)}
.yuqoriga:active{transform:scale(.94)}
@media (max-width:720px){
  .yuqoriga{right:14px; bottom:calc(90px + env(safe-area-inset-bottom)); width:44px; height:44px}
}

/* ---------- 10. Sharhlar: qo'shtirnoq bezagi ---------- */
.review{position:relative; overflow:hidden}
.review::before{
  content:"\201C"; position:absolute; right:16px; top:-10px; z-index:0;
  font-family:Georgia,'Times New Roman',serif; font-size:7.5rem; line-height:1; font-weight:900;
  color:var(--brand-700); opacity:0; pointer-events:none;
  transform:translateY(14px) scale(.7); transform-origin:right top;
  transition:opacity .9s var(--ease) calc(var(--d,0ms) + 320ms), transform .9s var(--ease) calc(var(--d,0ms) + 320ms);
}
.review.is-in::before{opacity:.08; transform:none}
.review > *{position:relative; z-index:1}

/* ---------- 11. Bo'lim sarlavhalari: eyebrow ostidagi chiziq ---------- */
.eyebrow{position:relative}
.eyebrow::after{
  content:""; position:absolute; left:50%; bottom:-7px; width:28px; height:2px; margin-left:-14px;
  border-radius:2px; background:var(--grad);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s var(--ease) .3s;
}
.section__head--left .eyebrow::after,
.section__head--yon .eyebrow::after,
.track__copy .eyebrow::after,
.kons__matn .eyebrow::after{left:0; margin-left:0}
.reveal.is-in .eyebrow::after,
.section__head:not(.reveal) .eyebrow::after{transform:scaleX(1)}

/* ---------- 12. Modal bosqichlari ---------- */
.modal__body.is-kirish{animation:bosqichKir .38s var(--ease) both}
@keyframes bosqichKir{
  from{opacity:0; transform:translateX(26px)}
  to{opacity:1; transform:none}
}

/* ---------- 13. Header: yopishganda belgi kichrayadi ---------- */
.header.is-stuck .brand__mark{transform:scale(.84)}
.header.is-stuck .brand:hover .brand__mark{transform:rotate(-8deg) scale(.9)}

/* ---------- 14. Moslashuv ---------- */
@media (max-width:900px){
  .lenta-xizmat{margin:-22px 0 30px}
}
@media (max-width:720px){
  .lenta-xizmat{margin:-16px 0 24px; padding:10px 0}
  .lenta-xizmat__guruh{gap:20px; padding-right:20px}
  .lenta-xizmat__el{font-size:.8rem}
  .review::before{font-size:6rem}
}

/* ---------- 15. Harakatni kamaytirish ---------- */
@media (prefers-reduced-motion:reduce){
  .skroll-chiziq{display:none}
  .hero__soz__ichki{animation:none; transform:none; opacity:1}
  .hero h1 .grad{animation:none; background-image:var(--grad); background-size:100% 100%; background-position:0 0}
  .hero__rasm > img,.hero__lottie{animation:none; transform:none; transition:none; will-change:auto}
  .hero__pufak{display:none}
  .btn--primary::after{display:none}
  .lenta-xizmat__yol{animation:none; will-change:auto}
  .reveal{transition-delay:0ms}
  .cat:hover,.svc:hover,.promo:hover,.trust__item:hover{transform:none}
  .cat::before,.svc::before,.promo::before,.trust__item::before{display:none}
  .steps::before{transform:scaleX(1); transition:none}
  .step .step__n{animation:none; transform:none; opacity:1}
  .trust__ico svg.is-chiz *{stroke-dasharray:none; stroke-dashoffset:0; transition:none}
  .yuqoriga{transition:none}
  .review::before{opacity:.08; transform:none; transition:none}
  .eyebrow::after{transform:scaleX(1); transition:none}
  .modal__body.is-kirish{animation:none}
  .header.is-stuck .brand__mark{transform:none}
}