/* ============================================================
   الاخماس — حزمة أنيميشن محسّنة لثيم نمو (زد)
   الصق هذا الكود كاملاً في: المظهر ← تعديل التصميم من خلال CSS
   ملاحظة: كل الحركات transform/opacity فقط = أداء سلس 60fps
   ============================================================ */

/* ---------- 1) إعدادات عامة ---------- */
:root {
  --akh-ease: cubic-bezier(0.22, 1, 0.36, 1); /* حركة ناعمة تشبه iOS */
  --akh-dur: 0.55s;
}

/* تمرير سلس للصفحة */
html { scroll-behavior: smooth; }

/* ---------- 2) ظهور العناصر عند التمرير (يعمل مع ملف JS) ---------- */
.akh-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--akh-dur) var(--akh-ease),
    transform var(--akh-dur) var(--akh-ease);
  will-change: opacity, transform;
}
.akh-reveal.akh-in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
/* تتابع بسيط بين الكروت المتجاورة */
.akh-in:nth-child(2) { transition-delay: 0.07s; }
.akh-in:nth-child(3) { transition-delay: 0.14s; }
.akh-in:nth-child(4) { transition-delay: 0.21s; }

/* ---------- 3) كروت المنتجات: رفعة ناعمة + تكبير الصورة ---------- */
.product-card,
.card-product,
[class*="product-item"],
[class*="product-card"] {
  transition:
    transform 0.35s var(--akh-ease),
    box-shadow 0.35s var(--akh-ease);
}
.product-card:hover,
.card-product:hover,
[class*="product-item"]:hover,
[class*="product-card"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(8, 80, 65, 0.12);
}

/* تكبير هادئ لصورة المنتج داخل الكرت */
.product-card img,
.card-product img,
[class*="product-item"] img,
[class*="product-card"] img {
  transition: transform 0.6s var(--akh-ease);
}
.product-card:hover img,
.card-product:hover img,
[class*="product-item"]:hover img,
[class*="product-card"]:hover img {
  transform: scale(1.05);
}

/* ---------- 4) الأزرار: ضغطة محسوسة ---------- */
button,
.btn,
[class*="btn-"],
a[class*="button"] {
  transition:
    transform 0.2s var(--akh-ease),
    opacity 0.2s var(--akh-ease);
}
button:hover, .btn:hover, [class*="btn-"]:hover, a[class*="button"]:hover {
  transform: translateY(-2px);
}
button:active, .btn:active, [class*="btn-"]:active, a[class*="button"]:active {
  transform: translateY(0) scale(0.97);
}

/* ---------- 5) روابط القائمة: خط ينزلق من اليمين (RTL) ---------- */
nav a, .navbar a, [class*="menu"] a {
  position: relative;
}
nav a::after, .navbar a::after, [class*="menu"] a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--akh-ease);
}
nav a:hover::after, .navbar a:hover::after, [class*="menu"] a:hover::after {
  transform: scaleX(1);
}

/* ---------- 6) صور البنرات: ظهور بتكبير خفيف ---------- */
.akh-reveal img.akh-hero,
[class*="banner"] img,
[class*="slider"] img {
  transition: transform 1s var(--akh-ease);
}

/* ---------- 7) احترام تقليل الحركة (مهم للأداء وذوي الحساسية) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .akh-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}