/* ══════════════════════════════════════════════════════════════════════════
   OpsMaster — حركة الأيقونات (٢٧ أكتوبر ٢٠٢٦)
   ══════════════════════════════════════════════════════════════════════════

   كل أيقونة (`<x-icon>` ⇒ `svg.ops-ico[data-ico=…]`) تتحرّك بما يدلّ على معناها عند المرور أو اللمس أو التركيز
   على العنصر الحاضن لها (رابط/زر/عنوان قسم/بطاقة): الجرس يرنّ، الإعدادات تدور، الكاميرا ترمش، المخطط يرتفع،
   الدرع ينبض، الباب يتأرجح... وما لا اسم له يقفز قفزة خفيفة.

   ⚠️ للأيقونات التي تعلم بالحالة (تنبيه عاجل) حركةٌ هادئة دائمة، وللأيقونات في رقاقات المؤشّرات حركة دخول مرّة واحدة.
   ⚠️ كلّ شيء داخل `prefers-reduced-motion: no-preference`: من أطفأ الحركة في نظامه لا يرى شيئًا يتحرّك.
   ⚠️ للإيقاف الكلّي: احذف سطر الربط من `layouts/_head-close.blade.php`.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  svg.ops-ico { transform-box: fill-box; transform-origin: 50% 50%; }

  /* العناصر الحاضنة التي يتفاعل مدخلها مع الأيقونة */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    svg.ops-ico { animation: ico-bounce .6s cubic-bezier(.3, .7, .4, 1) 1; }

  /* ── رنين: الاتصال والتنبيه والإعلان ───────────────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="bell"], svg[data-ico="phone"], svg[data-ico="phone-in"], svg[data-ico="phone-out"],
        svg[data-ico="phone-missed"], svg[data-ico="headset"], svg[data-ico="megaphone"], svg[data-ico="whatsapp"], svg[data-ico="mail"]) {
    animation: ico-ring .7s ease-in-out 1; transform-origin: 50% 12%;
  }
  /* ── دوران: الإعداد والتحديث والعالم والزمن ───────────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="settings"], svg[data-ico="refresh"], svg[data-ico="globe"], svg[data-ico="radar"],
        svg[data-ico="clock"], svg[data-ico="audit"], svg[data-ico="operations"], svg[data-ico="plus"]) {
    animation: ico-spin .7s cubic-bezier(.5, 0, .2, 1) 1;
  }
  /* ── نبض: الحماية والهوية والذكاء ───────────────────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="shield"], svg[data-ico="fingerprint"], svg[data-ico="target"], svg[data-ico="bolt"],
        svg[data-ico="sparkles"], svg[data-ico="lightbulb"], svg[data-ico="brain"], svg[data-ico="user-check"],
        svg[data-ico="power"], svg[data-ico="check-circle"]) {
    animation: ico-pulse .65s ease-in-out 1;
  }
  /* ── رمش: الرؤية والتصوير والعرض ───────────────────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="eye"], svg[data-ico="camera"], svg[data-ico="monitor"], svg[data-ico="image"]) {
    animation: ico-blink .6s ease-in-out 1;
  }
  /* ── ارتفاع: الأرقام والتقارير والمباني والمخزون ──────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="chart"], svg[data-ico="reports"], svg[data-ico="trending-up"], svg[data-ico="building"],
        svg[data-ico="assets"], svg[data-ico="database"], svg[data-ico="dashboard"], svg[data-ico="upload"]) {
    animation: ico-rise .6s cubic-bezier(.3, 1.4, .5, 1) 1; transform-origin: 50% 100%;
  }
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="trending-down"], svg[data-ico="download"]) {
    animation: ico-fall .6s cubic-bezier(.3, 1.4, .5, 1) 1;
  }
  /* ── اهتزاز: التحذير والجوائز والأدوات والحاسبة ───────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="alert"], svg[data-ico="trophy"], svg[data-ico="calculator"], svg[data-ico="technicians"],
        svg[data-ico="trash"], svg[data-ico="edit"], svg[data-ico="filter"], svg[data-ico="tickets"], svg[data-ico="search"]) {
    animation: ico-wiggle .6s ease-in-out 1;
  }
  /* ── تأرجح: الأبواب والمركبات والأعلام والروابط ───────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="door"], svg[data-ico="flag"], svg[data-ico="link"], svg[data-ico="link-off"]) {
    animation: ico-sway .75s ease-in-out 1; transform-origin: 20% 80%;
  }
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    svg[data-ico="vehicles"] { animation: ico-drive .7s ease-in-out 1; }
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="login"], svg[data-ico="logout"]) { animation: ico-drive .6s ease-in-out 1; }
  /* ── قلب: العملات والنِّسب ─────────────────────────────────────── */
  :is(a, button, summary, label, .group, .dx-kpi, .dx-alert, .dx-row, [data-ico-host]):is(:hover, :focus-visible, :active)
    :is(svg[data-ico="coins"], svg[data-ico="percent"]) { animation: ico-flip .75s ease-in-out 1; }

  /* ── حركة دخول مرّة واحدة لأيقونات الرقاقات (مؤشّرات وترويسات) ───────── */
  :is(.dx-chip, .dx-kpi__top, .dx-alert__ico) > svg.ops-ico,
  .ops-cardhead > span > svg.ops-ico { animation: ico-pop .55s cubic-bezier(.2, .9, .3, 1.4) both; }

  /* ── أيقونة التنبيه العاجل: نبضٌ هادئ دائم ──────────────────────── */
  .dx-alert--danger .dx-alert__ico > svg.ops-ico { animation: ico-pulse 1.8s ease-in-out infinite; }

  /* ── الرقاقة الحاضنة ترتفع قليلًا عند المرور ──────────────────────── */
  .dx-chip, .dx-alert__ico { transition: transform .18s ease; }
  :is(.dx-kpi, .dx-alert, .dx-row, .group):hover :is(.dx-chip, .dx-alert__ico) { transform: translateY(-2px) scale(1.06); }

  @keyframes ico-bounce { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) scale(1.14); } 65% { transform: translateY(0) scale(.96); } }
  @keyframes ico-ring   { 0%, 100% { transform: none; } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-9deg); } 75% { transform: rotate(5deg); } }
  @keyframes ico-spin   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  @keyframes ico-pulse  { 0%, 100% { transform: scale(1); filter: none; } 40% { transform: scale(1.22); filter: drop-shadow(0 0 3px currentColor); } 70% { transform: scale(.96); } }
  @keyframes ico-blink  { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(.1); } }
  @keyframes ico-rise   { 0% { transform: scaleY(.5); } 60% { transform: scaleY(1.15); } 100% { transform: scaleY(1); } }
  @keyframes ico-fall   { 0% { transform: translateY(-4px); } 60% { transform: translateY(2px); } 100% { transform: none; } }
  @keyframes ico-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-14deg) scale(1.06); } 50% { transform: rotate(12deg) scale(1.1); } 80% { transform: rotate(-6deg); } }
  @keyframes ico-sway   { 0%, 100% { transform: none; } 35% { transform: rotate(-16deg); } 70% { transform: rotate(9deg); } }
  @keyframes ico-drive  { 0% { transform: none; } 35% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { transform: none; } }
  @keyframes ico-flip   { from { transform: perspective(60px) rotateY(0); } to { transform: perspective(60px) rotateY(360deg); } }
  @keyframes ico-pop    { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

  /* الاتجاه من اليمين: الحركات الأفقية تنعكس في RTL */
  [dir="rtl"] :is(svg[data-ico="vehicles"], svg[data-ico="login"], svg[data-ico="logout"]) { animation-direction: normal; }
}