/* =====================================================================
   WHJALOUD — طبقة الحركة والتفاعلات الدقيقة
   =====================================================================
   ⚠️⚠️ **مبدأ واحد يحكم كل ما هنا: الحركة على `transform` و`opacity` فقط.**
      هاتان الخاصيتان تُنفَّذان على وحدة معالجة الرسوم بلا إعادة تخطيط ولا
      إعادة طلاء. أمّا تحريك `width` أو `height` أو `top` أو `box-shadow`
      فيُجبر المتصفح على إعادة حساب التخطيط في كل إطار — وهو سبب التقطّع
      على الأجهزة المتوسطة التي يستعملها أغلب العملاء.

   ⚠️ لا مكتبة حركة. كل ما هنا CSS خالص بلا بايت JavaScript واحد.

   ⚠️⚠️ **`prefers-reduced-motion` ليس إطفاءً للتصميم.** بعض المستخدمين
      يُصابون بدوار من الحركة. القاعدة في آخر الملف تُلغي **الإزاحة** وتُبقي
      **تغيّر الشفافية والألوان** — فتبقى الواجهة تستجيب وتبدو حيّة، بلا حركة
      تُسبّب الدوار. الإطفاء الكامل يُنتج واجهة ميتة لا واجهة مريحة.
   ===================================================================== */

/* ⚠️ المنحنيات وألوان التركيز **رموز** مُعرَّفة في `whjaloud-tokens.css`.
   تعريفها هنا كان سيُنشئ مصدرين لنفس القيمة — وهو نمط الانحراف نفسه الذي
   عالجناه في الألوان. */

/* ══════════════ دخول الأقسام ══════════════
   ⚠️ يُفعَّل بـJavaScript عبر `IntersectionObserver` (`public/js/whj-motion.js`).
      الحالة الافتراضية **ظاهرة**: لو تعطّل السكربت أو حُجب، يبقى المحتوى
      مقروءاً. الإخفاء يقع فقط بعد أن يُعلن السكربت قدرته. */
.whj-reveal-ready .whj-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--whj-ease-out), transform 520ms var(--whj-ease-out);
}

.whj-reveal-ready .whj-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* تدرّج زمني داخل الشبكة — يعطي إحساس التتابع بلا سكربت لكل عنصر. */
.whj-reveal-ready .whj-reveal[data-delay="1"] { transition-delay: 60ms; }
.whj-reveal-ready .whj-reveal[data-delay="2"] { transition-delay: 120ms; }
.whj-reveal-ready .whj-reveal[data-delay="3"] { transition-delay: 180ms; }
.whj-reveal-ready .whj-reveal[data-delay="4"] { transition-delay: 240ms; }

/* ══════════════ وهج الجمر ══════════════
   ⚠️ التوهّج طبقة زائفة بـ`opacity` لا `box-shadow` متحرّك: تحريك الظل
      يُعيد الطلاء في كل إطار، والطبقة الزائفة تُركَّب مرة وتُخفَّف. */
.whj-ember {
  position: relative;
  isolation: isolate;
}

.whj-ember::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 50% 120%,
    color-mix(in srgb, var(--whj-accent) 40%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 380ms var(--whj-ease-soft);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .whj-ember:hover::before,
  .whj-ember:focus-within::before { opacity: 1; }
}

/* ══════════════ الأزرار ══════════════ */
.whj-btn {
  transition:
    transform 160ms var(--whj-ease-spring),
    background-color 200ms var(--whj-ease-soft),
    border-color 200ms var(--whj-ease-soft),
    color 200ms var(--whj-ease-soft);
}

@media (hover: hover) {
  .whj-btn:hover { transform: translateY(-1px); }
}

/* ⚠️ الضغط يُرجع العنصر لموضعه: تغذية لمسية بصرية تؤكد أن النقرة سُجِّلت. */
.whj-btn:active { transform: translateY(0) scale(0.985); }

/* ⚠️ التركيز **لا يُحرَّك ولا يُخفَّف أبداً**: هو الطريقة الوحيدة التي يعرف
   بها مستخدم لوحة المفاتيح موضعه. إخفاؤه لأسباب جمالية عطل وصولية. */
.whj-btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--whj-focus, var(--whj-accent));
  outline-offset: 2px;
  transition: none;
}

/* ══════════════ بطاقة المنتج ══════════════ */
.whj-product {
  transition:
    transform 260ms var(--whj-ease-out),
    box-shadow 260ms var(--whj-ease-out),
    border-color 260ms var(--whj-ease-soft);
}

@media (hover: hover) {
  .whj-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--whj-shadow-lg);
    border-color: color-mix(in srgb, var(--whj-accent) 40%, var(--whj-border));
  }
}

/* ⚠️ تكبير الصورة داخل إطار مقصوص: `transform` على الصورة وحدها،
   و`overflow:hidden` على الحاوية. لا تغيير أبعاد ⇒ لا إعادة تخطيط. */
.whj-product__img { transition: transform 620ms var(--whj-ease-out); }

@media (hover: hover) {
  .whj-product:hover .whj-product__img { transform: scale(1.05); }
}

/* ══════════════ الحقول ══════════════ */
.whj-input,
.whj-settings input,
.whj-settings select,
.whj-settings textarea {
  transition: border-color 180ms var(--whj-ease-soft), box-shadow 180ms var(--whj-ease-soft);
}

.whj-input:focus,
.whj-settings input:focus {
  border-color: var(--whj-focus, var(--whj-accent));
  box-shadow: var(--whj-glow, none);
}

/* ══════════════ الشارات والحالات ══════════════ */
.whj-badge, .status-pill { transition: background-color 200ms var(--whj-ease-soft); }

/* ══════════════ هياكل التحميل ══════════════
   ⚠️ الهيكل العظمي أفضل من دوّارة: يُظهر **شكل** المحتوى القادم فيبدو
      الانتظار أقصر، ويمنع قفزة التخطيط عند الوصول. */
.whj-skeleton {
  background: linear-gradient(90deg,
    var(--whj-surface-alt) 25%,
    color-mix(in srgb, var(--whj-surface-alt) 60%, var(--whj-surface)) 50%,
    var(--whj-surface-alt) 75%);
  background-size: 200% 100%;
  animation: whj-shimmer 1.4s linear infinite;
  border-radius: calc(var(--whj-radius) / 2);
}

@keyframes whj-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.whj-verify__spinner {
  width: 2.2rem;
  height: 2.2rem;
  margin-inline: auto;
  border-radius: 50%;
  border: 3px solid var(--whj-border);
  border-top-color: var(--whj-accent);
  animation: whj-spin 900ms linear infinite;
}

@keyframes whj-spin { to { transform: rotate(360deg); } }

/* ══════════════ التنبيهات المنبثقة ══════════════ */
.whj-toast {
  animation: whj-toast-in 320ms var(--whj-ease-out);
}

@keyframes whj-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ══════════════ النوافذ ══════════════ */
.whj-modal__panel { animation: whj-modal-in 240ms var(--whj-ease-out); }

@keyframes whj-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ══════════════ الدخان الناعم ══════════════
   ⚠️ تدرّج ساكن لا حركة مستمرة. الحركة الدائمة في الخلفية تستنزف البطارية
      وتشتّت الانتباه، ولا تُضيف شيئاً بعد الثانية الأولى. */
.whj-smoke {
  position: relative;
  overflow: hidden;
}

.whj-smoke::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 15% 0%,
      color-mix(in srgb, var(--whj-accent) 14%, transparent), transparent 58%),
    radial-gradient(70% 50% at 85% 100%,
      color-mix(in srgb, var(--whj-primary) 12%, transparent), transparent 60%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ⚠️⚠️ احترام تفضيل تقليل الحركة
   ══════════════════════════════════════════════════════════════════════
   نُلغي **الإزاحة والتكبير والدوران** — أسباب الدوار — ونُبقي تغيّر
   الشفافية واللون. النتيجة واجهة هادئة تبقى مستجيبة، لا واجهة جامدة.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .whj-reveal-ready .whj-reveal { opacity: 1 !important; transform: none !important; }
  .whj-btn:hover, .whj-btn:active,
  .whj-product:hover { transform: none !important; }
  .whj-product:hover .whj-product__img { transform: none !important; }
  .whj-toast, .whj-modal__panel { animation: none !important; }
  .whj-skeleton { animation: none !important; background: var(--whj-surface-alt) !important; }
  .whj-verify__spinner { animation-duration: 2.4s !important; }
  * { transition-duration: 120ms !important; }
}

/* ⚠️ ومستوى الحركة من الإعدادات يتقدّم كذلك — لكن **لا يتقدّم على تفضيل
   المتصفح**: القاعدة أعلاه تأتي بعده في الترتيب فتفوز. */
.whj-motion-none .whj-reveal { opacity: 1 !important; transform: none !important; }
.whj-motion-none *,
.whj-motion-none *::before,
.whj-motion-none *::after {
  animation: none !important;
  transition: none !important;
}