/* ===== Motion system =====
   قاعدة: كل سيكشن له نوع هوفر واحد فقط (data-hover) مطبَّق بالتساوي على عناصره،
   والأنواع تتنوع بين السيكشنات. الظهور (reveal) موحّد: صعود + تلاشي مع تأخير متدرج. */

[data-hover]>*{transition:transform .35s var(--ease),box-shadow .3s,border-color .3s,background-color .3s,opacity .8s var(--ease) var(--d,0ms)}
[data-hover]>.card:hover,[data-hover]>.stat:hover,[data-hover]>.link:hover,[data-hover]>.logo-slot:hover{will-change:transform}

/* lift: يرتفع الكارت قليلاً */
[data-hover=lift]>*:hover{transform:translateY(-6px)!important;box-shadow:var(--shadow-2);border-color:var(--green-300)}
/* glow: توهج حدود ذهبي بدون حركة */
[data-hover=glow]>*:hover{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-1)}
/* tint: تلوين الخلفية */
[data-hover=tint]>*:hover{background:var(--brand-soft);border-color:var(--green-300)}
/* pop: تكبير خفيف */
[data-hover=pop]>*:hover{transform:scale(1.035)!important;box-shadow:var(--shadow-2)}
/* tilt: ميلان بسيط */
[data-hover=tilt]>*:hover{transform:translateY(-4px) rotate(-1.4deg)!important;box-shadow:var(--shadow-2)}
/* slide: إزاحة أفقية باتجاه القراءة */
[data-hover=slide]>*:hover{transform:translateX(calc(var(--flip) * -7px))!important}
/* bar: شريط سفلي يتمدد */
[data-hover=bar]>*{position:relative;overflow:hidden}
[data-hover=bar]>*::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--accent));transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease)}
[data-hover=bar]>*:hover::after{transform:scaleX(1)}
/* lift-sm: للأرقام داخل الأقسام الداكنة */
[data-hover=lift-sm]>*:hover{transform:translateY(-4px)!important;background:rgba(255,255,255,.12)}

/* details/accordion: تلوين الحد فقط */
.acc details:hover{border-color:var(--green-300)}
.recipe summary:hover{background:var(--surface-2)}

/* الأزرار: نفس الإحساس في كل الموقع (رفعة خفيفة فقط) */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}

/* قائمة المزيد: تلوين الصف فقط */
.dd-menu a:hover{transform:none!important;background:var(--brand-soft)}
.dd-menu a:hover .ic{transform:none;background:var(--brand);color:var(--brand-ink)}

/* السوشيال: لون العلامة فقط */
.soc:hover{transform:none;box-shadow:none}
.soc.off:hover{transform:none}

/* الجدول الزمني والخطوات: بدون حركة إضافية */
.how .card:hover::before{transform:none;box-shadow:0 8px 18px -6px var(--accent)}

@media (hover:none){[data-hover]>*:hover{transform:none!important}}