/* ═══════════════════════════════════════════════
   Jrss — الحركة
   مبنية على تحليل 126 شاشة فريدة من مقاطع المرجع.

   الاكتشاف الأهم: الانتقال بين الشاشات **انزلاق أفقي**
   (الشاشة الحالية تخرج والجديدة تدخل من الجانب)،
   وليس تلاشياً رأسياً. في RTL يُعكس الاتجاه.
   ═══════════════════════════════════════════════ */

/* ── الانتقال الأفقي: تقدّم ورجوع ── */

.view.active { animation: pushIn 380ms var(--ease); }
.view.active.back { animation: popIn 340ms var(--ease); }

/* RTL: الجديد يدخل من اليسار */
@keyframes pushIn {
  from { opacity: .4; transform: translateX(-14%); }
  to   { opacity: 1;  transform: translateX(0); }
}
@keyframes popIn {
  from { opacity: .4; transform: translateX(14%); }
  to   { opacity: 1;  transform: translateX(0); }
}
[dir="ltr"] .view.active { animation-name: pushInLtr; }
[dir="ltr"] .view.active.back { animation-name: popInLtr; }
@keyframes pushInLtr {
  from { opacity: .4; transform: translateX(14%); }
  to   { opacity: 1;  transform: translateX(0); }
}
@keyframes popInLtr {
  from { opacity: .4; transform: translateX(-14%); }
  to   { opacity: 1;  transform: translateX(0); }
}

/* تبديل التبويبات السفلية: تلاشٍ صاعد خفيف — ليس دفعاً جانبياً */
.view.active.tabswitch { animation: tabFade 300ms var(--ease); }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* العناصر تدخل متتابعة — عند تبديل التبويبات فقط.
   ⚠️ ممنوع تحريك الأبناء والأب في نفس الوقت.
      انتقال الشاشة (pushIn/popIn) يحرّك الأب، فلو تحرّك الأبناء
      معه تتكوّن طبقات GPU متداخلة داخل عنصر له ancestor فيه
      backdrop-filter. نتيجتها مستطيلات شبحية تبقى على الشاشة
      بعد انتهاء الحركة — «الطبقة» التي تظهر بعد الرجوع.
      لذلك: الأب يتحرك في التنقّل، والأبناء في تبديل التبويب فقط. */
.view.active.tabswitch > * { animation: itemIn 380ms var(--ease) both; }
.view.active.tabswitch > *:nth-child(1) { animation-delay: 20ms; }
.view.active.tabswitch > *:nth-child(2) { animation-delay: 60ms; }
.view.active.tabswitch > *:nth-child(3) { animation-delay: 100ms; }
.view.active.tabswitch > *:nth-child(4) { animation-delay: 140ms; }
.view.active.tabswitch > *:nth-child(5) { animation-delay: 180ms; }
.view.active.tabswitch > *:nth-child(6) { animation-delay: 220ms; }
.view.active.tabswitch > *:nth-child(7) { animation-delay: 260ms; }
@keyframes itemIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── الكشف بالتمرير ── */
.reveal {
  opacity: 0; transform: translateY(24px) scale(.988);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  will-change: opacity, transform;
}
.reveal.seen { opacity: 1; transform: translateY(0) scale(1); }

/* ── ردّ فعل اللمس ── */
.card, .hero, .orb, .row, .grow, .chip, .tab, .btn, .mini,
.icon-btn, .qbtn, .seg-btn, .back {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.card:active   { transform: scale(.972); }
.hero:active   { transform: scale(.978); }
.grow:active   { transform: scale(.99); }
.orb:active    { transform: scale(.9); }
.chip:active   { transform: scale(.92); }
.btn:active    { transform: scale(.96); }
.mini:active   { transform: scale(.94); }
.seg-btn:active{ transform: scale(.95); }

.tab:active .ic { animation: springTap 340ms var(--ease); }
@keyframes springTap {
  0%   { transform: scale(1); }
  35%  { transform: scale(.8); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.tab.on .ic { animation: iconLift 340ms var(--ease); }
@keyframes iconLift {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-3px) scale(1.14); }
  100% { transform: translateY(0) scale(1.06); }
}

/* ── الورقة السفلية ── */
/* من المرجع: تنزلق من الأسفل بمنحنى نابض، والخلفية تعتم وتتضبّب معها.
   الخروج أسرع من الدخول (~65%) عشان الإغلاق يحس فورياً. */
.sheet-body {
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(.4, 0, 1, 1);
}
.sheet.on .sheet-body {
  transform: translateY(0);
  transition: transform 440ms cubic-bezier(.22, 1.12, .36, 1);
}
.sheet-bg { opacity: 0; transition: opacity 220ms var(--ease); }
.sheet.on .sheet-bg { opacity: 1; transition: opacity 320ms var(--ease); }

/* محتوى الورقة يدخل متتابعاً بعد ما تستقر */
.sheet.on .sheet-body > * { animation: sheetItem 420ms var(--ease) backwards; }
.sheet.on .sheet-body > *:nth-child(2) { animation-delay: 90ms; }
.sheet.on .sheet-body > *:nth-child(3) { animation-delay: 140ms; }
.sheet.on .sheet-body > *:nth-child(4) { animation-delay: 190ms; }
.sheet.on .sheet-body > *:nth-child(5) { animation-delay: 240ms; }
@keyframes sheetItem {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ضغط الخيار — غمرة لونية تنتشر من مكان اللمس مثل المرجع */
.opt { position: relative; overflow: hidden; }
.opt::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--brand-a24), transparent 60%);
  opacity: 0; transform: scale(.5);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
  pointer-events: none;
}
.opt:active::after { opacity: 1; transform: scale(1.5); }

/* صف الإعدادات كذلك */
.grow { position: relative; overflow: hidden; }
.grow::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.07), transparent 62%);
  opacity: 0; transform: scale(.5);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
  pointer-events: none;
}
.grow:active::after { opacity: 1; transform: scale(1.5); }

/* ── الأرقام تتحدّث ── */
.flash { animation: flash 620ms var(--ease); }
@keyframes flash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

/* ── الرسالة العائمة ── */
.toast.on { animation: toastIn 380ms var(--ease); }
@keyframes toastIn {
  0%   { opacity: 0; transform: translateY(20px) scale(.94); }
  60%  { transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── موجة الزر ── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.26), transparent 62%);
  opacity: 0; transform: scale(.4);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.btn:active::after { opacity: 1; transform: scale(1.6); }

/* ── تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
  .view.active, .view.active > *, .reveal, .toast.on,
  .tab:active .ic, .tab.on .ic, .sheet-body, .sheet-bg, .tab-blob,
  .sheet.on .sheet-body > * {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .sheet-body { transform: translateY(0); }
  .sheet-bg { opacity: 1; }
}


/* ── تنظيف الطبقات بعد الحركة ──
   عنصر بقي في طبقة GPU مستقلة بعد انتهاء حركته قد لا يُعاد رسمه،
   فيظهر أثر بصري. نلغي الحركة فقط على الشاشة المستقرة.
   ⚠️ ما نفرض opacity ولا transform هنا: .reveal يملكهما لكشف
      التمرير، وفرضهما يبطّل الكشف كله. */
.view.active:not(.tabswitch) > * { animation: none; }