/* ============================================================
   Kirame — Motion CSS (Motion.dev uslubidagi yordamchilar)
   data-motion atributlari uchun boshlang'ich holat + CSS animatsiyalar.
   ============================================================ */

/* JS o'chsa (no-js) hech narsa yashirin qolmaydi */
html.no-motion [data-motion] { opacity: 1 !important; transform: none !important; }

/* Reduce-motion: barcha data-motion elementlar ko'rinadigan holatda */
@media (prefers-reduced-motion: reduce) {
  [data-motion] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* Yumshoq hover uchun universal (hover zoom JS bilan ham mos) */
[data-motion-hover] { will-change: transform; }

/* Kichik CSS animatsiyalar (JS'siz ishlaydigan joylar uchun) */
@keyframes ar-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes ar-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes ar-shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ar-anim-float { animation: ar-float 5s ease-in-out infinite; }
.ar-anim-pulse { animation: ar-pulse 2.4s ease-in-out infinite; }

/* Skeleton shimmer (yuklanayotgan kartalar uchun) */
.ar-shimmer {
  background: linear-gradient(90deg, #F7F7F7 25%, #EFEFEF 50%, #F7F7F7 75%);
  background-size: 200% 100%;
  animation: ar-shine 1.4s linear infinite;
}

/* Scroll progress bar (landing tepasida) */
#arScrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #111111;
  z-index: 99999;
  transition: width 0.08s linear;
}