/* ══════════════════════════════════════════════════════════════════════════
   OpsMaster — طبقة المتعة والسلاسة (٢٨ أكتوبر ٢٠٢٦)
   ══════════════════════════════════════════════════════════════════════════

   ⚠️ تُضيف **حركةً ولا تغيّر تخطيطًا ولا ألوانًا ولا سلوكًا**. كل شيء داخل `prefers-reduced-motion: no-preference`،
   فمن أطفأ الحركة في نظامه لا يرى شيئًا يتحرّك. ولا شيء هنا يوهم بأن عنصرًا غير قابل للنقر قابلٌ له.

     ١ · دخول المحتوى: أقسام الصفحة تظهر متتابعة بدل أن تقفز دفعةً واحدة.
     ٢ · انتقال ناعم بين الصفحات (View Transitions): تبقى القائمة والترويسة ثابتتين ويتبدّل المحتوى فقط.
         (متصفّحات كروم/إيدج الحديثة فقط؛ غيرها يتجاهله فيعمل كما كان.)
     ٣ · ضغطة الأزرار تغوص قليلًا، ورسائل النجاح/الخطأ تنزلق.
     ٤ · هيكل تحميل `.ops-skel` يُستعمل عند الحاجة.
     ٥ · عدّاد المؤشّرات: في `ops-delight.js`.

   للإيقاف: احذف سطر الربط من `layouts/_head-close.blade.php` (والسكربت من `layouts/app.blade.php`).
   ══════════════════════════════════════════════════════════════════════════ */

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

  /* ── ١ · دخول المحتوى ─────────────────────────────────────────────── */
  @keyframes ops-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  main > .max-w-7xl > * { animation: ops-rise .42s cubic-bezier(.2, .7, .2, 1) backwards; }
  main > .max-w-7xl > :nth-child(2) { animation-delay: 45ms; }
  main > .max-w-7xl > :nth-child(3) { animation-delay: 90ms; }
  main > .max-w-7xl > :nth-child(4) { animation-delay: 135ms; }
  main > .max-w-7xl > :nth-child(5) { animation-delay: 180ms; }
  main > .max-w-7xl > :nth-child(6) { animation-delay: 225ms; }
  main > .max-w-7xl > :nth-child(n+7) { animation-delay: 270ms; }

  /* ── ٢ · انتقال ناعم بين الصفحات ──────────────────────────────────── */
  @view-transition { navigation: auto; }
  .ops-side { view-transition-name: ops-side; }
  .ops-topbar { view-transition-name: ops-topbar; }
  ::view-transition-old(root) { animation: 120ms ease-in both ops-vt-out; }
  ::view-transition-new(root) { animation: 200ms ease-out both ops-vt-in; }
  @keyframes ops-vt-out { to { opacity: 0; } }
  @keyframes ops-vt-in { from { opacity: 0; } }

  /* ── ٣ · ضغطة الأزرار ورسائل الحالة ──────────────────────────────── */
  main :is(button, a)[class*="rounded-lg"][class*="px-"],
  main :is(button, a).ops-btn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
  main :is(button, a)[class*="rounded-lg"][class*="px-"]:active,
  main :is(button, a).ops-btn:active { transform: scale(.97); }

  @keyframes ops-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  main [data-auto-dismiss] { animation: ops-slide-in .35s cubic-bezier(.2, .7, .2, 1) backwards; }

  /* صفّ الجدول: إضاءة خفيفة عند المرور (قراءة الصفّ لا وعدًا بالنقر) */
  main table:not([data-polish="off"]) > tbody > tr { transition: background-color .12s ease; }
  main table:not([data-polish="off"]) > tbody > tr:hover > td { background-color: color-mix(in srgb, var(--ops-surface-2, #f1f5f9) 65%, transparent); }
}

/* ── ٤ · هيكل تحميل (يعمل حتى مع تقليل الحركة، لكن بلا لمعان) ─────────── */
.ops-skel { display: block; border-radius: 8px; background: var(--ops-surface-2, #e5e7eb); min-height: 1em; }
@media (prefers-reduced-motion: no-preference) {
  .ops-skel {
    background-image: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .45) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: ops-shimmer 1.3s linear infinite;
  }
  @keyframes ops-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}

@media print {
  main > .max-w-7xl > * { animation: none !important; }
}