/* =========================================================
   MishiLand v13.2 — Phase 3: 3D Lite / Premium Motion
   =========================================================
   فقط دو محل: محصول اصلی Hero و کارت‌های ریل «محصولات منتخب».
   منطق چرخش با CSS Custom Properties (--ml-tilt-x/--ml-tilt-y) کنترل
   می‌شود که در assets/js/mishiland-v13-3d-lite.js تنظیم می‌شوند.
   روی موبایل (لمسی) هیچ ردیابی زنده‌ای انجام نمی‌شود — فقط یک
   انیمیشن «ورود» ملایم یک‌بار هنگام ورود به viewport.
   ========================================================= */

[data-ml-tilt-group] {
  perspective: 900px;
}

[data-ml-tilt] {
  --ml-tilt-x: 0deg;
  --ml-tilt-y: 0deg;
  --ml-tilt-scale: 1;
  transform: rotateX(var(--ml-tilt-x)) rotateY(var(--ml-tilt-y)) scale(var(--ml-tilt-scale));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* حالت فعال (هاور دسکتاپ) — انتقال سریع‌تر برای حس Responsive بودن */
[data-ml-tilt].is-tilting {
  transition: transform 0.08s linear;
}

/* انیمیشن ورود ملایم برای موبایل/همه دستگاه‌ها (بدون ردیابی لمسی) */
[data-ml-tilt].ml-tilt-in {
  animation: ml-tilt-settle 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ml-tilt-settle {
  from {
    opacity: 0;
    transform: translateY(10px) rotateX(6deg) scale(0.97);
  }
  to {
    opacity: 1;
    transform: rotateX(var(--ml-tilt-x)) rotateY(var(--ml-tilt-y)) scale(1);
  }
}

/* کارت‌های ریل منتخب: کمی سایه بیشتر برای حس عمق در حالت هاور */
#mishiland-home .ml-card--tilt {
  will-change: transform;
}
#mishiland-home .ml-card--tilt.is-tilting {
  box-shadow: 0 20px 34px rgba(20, 24, 31, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  [data-ml-tilt] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* روی لمسی (بدون hover دقیق)، افکت هاور اصلاً فعال نمی‌شود — فقط ورود ملایم */
@media (hover: none) {
  [data-ml-tilt] {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
}