/* =========================================================
   ALPHA — طبقة الحركات v3 (خفيفة)
   بلا غلاف حول البطاقات · بلا كانفس · بلا حبيبات · بلا توهج
   لا تلمس product::after ولا btn-gold::after ولا المتغيّرات المحجوزة
   ========================================================= */
:root{
  --ml-gold:#d9b26a;
  --ml-ease:cubic-bezier(.22,1,.36,1);
  --ml-spring:cubic-bezier(.34,1.56,.64,1);
}

/* 1. شريط تقدّم القراءة */
.ml-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9990;pointer-events:none}
.ml-progress>i{display:block;height:100%;width:100%;transform:scaleX(0);
  transform-origin:left center;will-change:transform;
  background:linear-gradient(90deg,#8e6d33,#d9b26a 45%,#f4dfae 60%,#d9b26a)}

/* 2. الظهور بالتمرير */
.ml-rise{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ml-ease),transform .7s var(--ml-ease)}
.ml-rise.ml-in{opacity:1;transform:none}
.ml-seq>*{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ml-ease),transform .6s var(--ml-ease);
  transition-delay:calc(var(--ml-i,0) * 55ms)}
.ml-seq.ml-in>*{opacity:1;transform:none}

/* 3. لمعان داخل البطاقة — بلا حدود وبلا غلاف */
.ml-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;z-index:1;transition:opacity .4s var(--ml-ease);
  background:radial-gradient(320px circle at var(--ml-mx,50%) var(--ml-my,50%),
    rgba(217,178,106,.13),transparent 62%)}
.product:hover .ml-sheen{opacity:1}

/* 4. أزرار مغناطيسية */
.ml-mag{transition:transform .4s var(--ml-spring)}
.ml-mag.ml-pull{transition:transform .1s linear}

/* 5. زر لأعلى */
.ml-top{position:fixed;bottom:22px;inset-inline-end:22px;z-index:880;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(217,178,106,.14);border:1px solid rgba(217,178,106,.4);
  color:var(--ml-gold);cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(12px);
  transition:opacity .35s var(--ml-ease),transform .35s var(--ml-spring),visibility .35s,
             background .25s,color .25s}
.ml-top.ml-on{opacity:1;visibility:visible;transform:none}
.ml-top:hover{background:var(--ml-gold);color:#0b0b0f}

/* 6. نبض الشارة */
.ml-pop{animation:ml-pop .4s var(--ml-spring)}
@keyframes ml-pop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}

/* 7. تسطير الروابط */
.ml-ul{position:relative}
.ml-ul::before{content:"";position:absolute;inset-inline-start:0;bottom:-3px;height:1px;width:0;
  background:var(--ml-gold);transition:width .35s var(--ml-ease)}
.ml-ul:hover::before{width:100%}

/* 8. تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .ml-rise,.ml-seq>*{opacity:1!important;transform:none!important;transition:none!important}
  .ml-pop{animation:none!important}
}