/* ================================================================
   ARQON TORTISH — ROPE-SAFE ANIMATION FIX — 2026-08-28
   ESKIRGAN BO'LIM (endi hech narsaga ta'sir qilmaydi): ".arqon-team-art",
   ".arqon-people", ".arqon-rope" — bu elementlar index.html'da ENDI YO'Q
   (avval reference-scene'ga, endi 3-qatlamli bg/people'ga almashtirilgan).
   Sabab: arqon PNG rasmlarining ICHIDA chizilgan. Chap va o'ng
   PNG larni alohida transform/animation bilan qarama-qarshi siljitish
   markazdagi arqon uchlarini ajratib yuboradi.
   Yechim: PNG ichidagi arqon hech qachon alohida animatsiya qilinmaydi.
   Ikkala jamoa wrapperi bir xil yo'nalishda mikro-harakat qiladi.
   Shuning uchun arqon uzilmaydi.
   ================================================================ */

/* PNG ichidagi arqonni ajratib yuboradigan eski mustaqil animatsiyalarni bekor qilamiz. */
#pageOyin2.arqon-active .arqon-team-art,
#pageOyin2.arqon-active .arqon-center.pull-left .arqon-team-art,
#pageOyin2.arqon-active .arqon-center.pull-right .arqon-team-art,
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .arqon-team-art,
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .arqon-team-art{
  animation:none !important;
  transform:none !important;
}

/* Ikkala jamoa bir xil harakat qiladi — ular orasidagi PNG-arqon masofasi o'zgarmaydi. */
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .arqon-people.left-team,
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .arqon-people.right-team{
  animation:arqonSafePullLeft .62s cubic-bezier(.18,.8,.22,1);
}

#pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .arqon-people.left-team,
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .arqon-people.right-team{
  animation:arqonSafePullRight .62s cubic-bezier(.18,.8,.22,1);
}

@keyframes arqonSafePullLeft{
  0%,100%{transform:translateX(var(--arqon-shift,0%));}
  24%{transform:translateX(calc(var(--arqon-shift,0%) - 5px)) scaleY(1.002);}
  55%{transform:translateX(calc(var(--arqon-shift,0%) - 2px)) scaleY(1.001);}
}

@keyframes arqonSafePullRight{
  0%,100%{transform:translateX(var(--arqon-shift,0%));}
  24%{transform:translateX(calc(var(--arqon-shift,0%) + 5px)) scaleY(1.002);}
  55%{transform:translateX(calc(var(--arqon-shift,0%) + 2px)) scaleY(1.001);}
}

/* Tugagandan keyin ham transform holati asosiy JS siljishini saqlaydi. */
#pageOyin2.arqon-active .arqon-people{
  will-change:transform;
}


/* ================================================================
   ARQON START + PULL — UZLUKSIZ KO'RINISH
   Start holatida ham ikki qo'l orasidagi markaziy arqon ko'rinadi.
   Pull paytida jamoalar VA markaziy arqon bir xil koordinatada siljiydi.
   ================================================================ */
#pageOyin2.arqon-active .arqon-rope{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  left:35% !important;
  right:35% !important;
  top:45% !important;
  height:15px !important;
  z-index:7 !important;
  pointer-events:none !important;
  transform:translate3d(var(--arqon-shift,0%),0,0);
  transform-origin:center;
  transition:transform .5s cubic-bezier(.18,.8,.22,1);
  will-change:transform;
}
#pageOyin2.arqon-active .arqon-rope:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; top:2px !important;
  height:11px !important;
  border-radius:999px !important;
  background:repeating-linear-gradient(0deg,#8f5729 0 3px,#d59a54 3px 6px,#74461f 6px 9px) !important;
  box-shadow:0 3px 6px rgba(65,38,18,.24),inset 0 1px rgba(255,255,255,.4) !important;
}
#pageOyin2.arqon-active .arqon-rope-knot,
#pageOyin2.arqon-active .arqon-rope-tail,
#pageOyin2.arqon-active .arqon-rope-marker{
  display:none !important;
}

/* Startda juda yengil taranglik: arqon uzilmaydi, faqat tortilayotgandek tirik ko'rinadi. */
#pageOyin2.arqon-active:not(.rope-hit) .arqon-people{
  animation:arqonStartTension 1.35s ease-in-out infinite;
}
#pageOyin2.arqon-active:not(.rope-hit) .arqon-rope{
  animation:arqonRopeTension 1.35s ease-in-out infinite;
}
@keyframes arqonStartTension{
  0%,100%{transform:translate3d(var(--arqon-shift,0%),0,0)}
  50%{transform:translate3d(calc(var(--arqon-shift,0%) - 2px),1px,0)}
}
@keyframes arqonRopeTension{
  0%,100%{transform:translate3d(var(--arqon-shift,0%),0,0) scaleX(1)}
  50%{transform:translate3d(calc(var(--arqon-shift,0%) - 2px),1px,0) scaleX(1.012)}
}

/* Pull klassi kelganda start animatsiyasi aralashib ketmasin. */
#pageOyin2.arqon-active.arqon-pull-now-left .arqon-people,
#pageOyin2.arqon-active.arqon-pull-now-right .arqon-people,
#pageOyin2.arqon-active.arqon-pull-now-left .arqon-rope,
#pageOyin2.arqon-active.arqon-pull-now-right .arqon-rope{
  animation:none !important;
}

@media(max-width:700px){
  #pageOyin2.arqon-active .arqon-rope{left:34% !important;right:34% !important;top:45% !important;height:13px !important}
  #pageOyin2.arqon-active .arqon-rope:before{top:2px !important;height:9px !important}
}


/* ================================================================
   ESKIRGAN BO'LIM (endi hech narsaga ta'sir qilmaydi): pastdagi barcha
   ".arqon-reference-scene" qoidalari o'lik — bu klass endi index.html'da
   yo'q (sahna 3 qatlamga bo'lindi: .arqon-scene-bg + .arqon-scene-people,
   qarang arqon-v15-motion-final.css). Xavfsizlik uchun saqlab qo'yildi.
   ================================================================ */
/* ================================================================
   ARQON TORTISH — STARTDA DOIMIY O'NG-CHAP TORTISH HARAKATI
   va 3 TA TO'G'RI JAVOBDA BUTUN SAHNANING G'OLIB TOMONGA O'TISHI.
   Faqat #pageOyin2.arqon-active ichida ishlaydi.
   ================================================================ */

/* Rasm ichida ishtirokchilar va arqon bitta yaxlit sahna bo'lgani uchun
   faqat shu rasm siljitiladi — arqon uchlari hech qachon ajralmaydi. */
#pageOyin2.arqon-active .arqon-center{
  overflow:hidden !important;
  --arqon-scene-shift:0%;
}
#pageOyin2.arqon-active .arqon-reference-scene{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 !important;
  transform-origin:center center !important;
  will-change:transform;
  z-index:5 !important;
}
/* v17 TUZATISH: transform shu yerda ham (arqon-reference-scene-v14.css dagi
   kabi) !important bilan statik qotib qolgan edi. Oddiy !important qoida
   har doim animatsiyadan ustun turgani uchun bu yagona qoida arqonWholeScenePull
   VA arqonV16Idle (v15-motion-final.css) — ikkalasini ham ko'rinishda
   ishlamay qo'ygan edi, animatsiya nomi to'g'ri tanlangan bo'lsa ham.
   Endi statik transform faqat o'yin o'ynalmayotgan paytda ishlaydi. */
body:not(.arqon-playing) #pageOyin2.arqon-active .arqon-reference-scene{
  transform:translate3d(var(--arqon-scene-shift,0%),0,0) !important;
  transition:transform .72s cubic-bezier(.18,.8,.22,1) !important;
}

/* O'yin BOSHLANGANDA: ikkala tomon ham arqonni tortayotgandek
   juda sezilarli, lekin tabiiy o'ng-chap mikro-harakatda turadi. */
#pageOyin2.arqon-active .arqon-reference-scene{
  animation:arqonWholeScenePull 1.15s ease-in-out infinite !important;
}

@keyframes arqonWholeScenePull{
  0%,100%{
    transform:translate3d(var(--arqon-scene-shift,0%),0,0) rotate(0deg);
  }
  22%{
    transform:translate3d(calc(var(--arqon-scene-shift,0%) - 7px),1px,0) rotate(-0.25deg);
  }
  50%{
    transform:translate3d(calc(var(--arqon-scene-shift,0%) + 7px),-1px,0) rotate(0.25deg);
  }
  78%{
    transform:translate3d(calc(var(--arqon-scene-shift,0%) - 4px),0,0) rotate(-0.12deg);
  }
}

/* Javob berilganda qisqa kuchli tortish impulsi. */
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-left .arqon-reference-scene{
  animation:arqonScenePullLeft .62s cubic-bezier(.18,.8,.22,1) !important;
}
#pageOyin2.arqon-active .arqon-center.arqon-pull-now-right .arqon-reference-scene{
  animation:arqonScenePullRight .62s cubic-bezier(.18,.8,.22,1) !important;
}

@keyframes arqonScenePullLeft{
  0%{transform:translate3d(var(--arqon-scene-shift,0%),0,0)}
  25%{transform:translate3d(calc(var(--arqon-scene-shift,0%) - 14px),3px,0) rotate(-0.6deg)}
  60%{transform:translate3d(calc(var(--arqon-scene-shift,0%) - 6px),1px,0) rotate(-0.25deg)}
  100%{transform:translate3d(var(--arqon-scene-shift,0%),0,0)}
}
@keyframes arqonScenePullRight{
  0%{transform:translate3d(var(--arqon-scene-shift,0%),0,0)}
  25%{transform:translate3d(calc(var(--arqon-scene-shift,0%) + 14px),3px,0) rotate(0.6deg)}
  60%{transform:translate3d(calc(var(--arqon-scene-shift,0%) + 6px),1px,0) rotate(0.25deg)}
  100%{transform:translate3d(var(--arqon-scene-shift,0%),0,0)}
}

/* 3 ta to'g'ri javob: animatsiya to'xtaydi va butun sahna g'olib
   tomonga qat'iy joylashadi. JS --arqon-scene-shift ni ±36% qiladi. */
#pageOyin2.arqon-active .arqon-center.arqon-finished-left .arqon-reference-scene{
  animation:none !important;
  transform:translate3d(-36%,0,0) !important;
  transition:transform 1s cubic-bezier(.18,.8,.22,1) !important;
}
#pageOyin2.arqon-active .arqon-center.arqon-finished-right .arqon-reference-scene{
  animation:none !important;
  transform:translate3d(36%,0,0) !important;
  transition:transform 1s cubic-bezier(.18,.8,.22,1) !important;
}

/* Tugash paytida sahna kesilib qolmasligi uchun PNG o'z konteyneridan
   chiqib ketgan qismini ko'rsatmaydi; markaziy arena esa joyida qoladi. */
#pageOyin2.arqon-active .arqon-center-line{
  z-index:8 !important;
  pointer-events:none !important;
}