/* ════════════════════════════════════════════════════════════════════
   Phoenix Motion — نظام الحركة الموحد لمنصة GazaPX
   الفلسفة: LEARN · BUILD · RISE — الصعود والانبعاث، لا fade عشوائي.
   - الاتجاه الافتراضي: rise-up (من الأسفل للأعلى) + easing مخصص
   - CSS-first: transform و opacity فقط (لا reflow) — مناسب للأجهزة الضعيفة
   - يُحترم prefers-reduced-motion في كل الأنماط
   يعمل مع phoenix.js (reveal/skeleton/page-transition) — لا يكرر منطقها.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1); /* توقف ناعم بعد اندفاع — إحساس الصعود */
  --dur-rise: 700ms;
  --dur-rise-fast: 450ms;
}

/* ── دخول الصفحة: fade خفيف (opacity فقط — حتى لا يكسر العناصر الثابتة) ── */
@keyframes phx-page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: phx-page-in 0.22s ease-out; }
body.is-leaving { animation: none; opacity: 0; transition: opacity 0.15s ease; }
/* صعود خفيف لمحتوى الصفحة (main بلا عناصر ثابتة بداخله — آمن) */
@keyframes phx-main-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#main-content { animation: phx-main-rise 0.25s var(--ease-rise); }

/* ── أدوات الظهور عند التحميل (بدون JS) ── */
@keyframes phx-rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes phx-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.phx-load-rise { opacity: 0; animation: phx-rise-in var(--dur-rise) var(--ease-rise) forwards; animation-delay: var(--d, 0ms); }
.phx-load-scale { opacity: 0; animation: phx-scale-in var(--dur-rise-fast) var(--ease-rise) forwards; animation-delay: var(--d, 0ms); }

/* ── أدوات تفاعلية قابلة لإعادة الاستخدام ── */
.phoenix-hover-lift { transition: transform 0.25s var(--ease-rise), box-shadow 0.25s var(--ease-rise); will-change: transform; }
.phoenix-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.phoenix-hover-lift:active { transform: scale(0.98); }

/* ── الأزرار الأساسية: شعلة تنزلق + رفع + انضغاط ملموس ── */
.btn-cta {
  background-image: linear-gradient(120deg, rgb(var(--phoenix-flame-500)) 0%, rgb(var(--phoenix-flame-700)) 45%, rgb(var(--phoenix-flame-500)) 90%);
  background-size: 220% 100%;
  background-position: 0% 0;
  transition: transform var(--dur-base) var(--ease-rise), box-shadow var(--dur-base) var(--ease-rise), background-position 0.5s var(--ease-rise);
}
.btn-cta:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-cta:active { transform: scale(0.98); }

/* ── روابط ثانوية: خط متحرك من اليمين لليسار (RTL) ── */
.phx-underline { position: relative; text-decoration: none; }
.phx-underline::after {
  content: ""; position: absolute; bottom: -2px; inset-inline: 0; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.28s var(--ease-rise);
}
[dir="rtl"] .phx-underline::after { transform-origin: right center; }
.phx-underline:hover::after, .phx-underline:focus-visible::after { transform: scaleX(1); }

/* ── الكروت: رفع + ظل + تكبير الصورة داخل إطار محدود (200-300ms) ── */
.paper-card { transition: transform 0.25s var(--ease-rise), box-shadow 0.25s var(--ease-rise); }
.paper-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.paper-card .pc-art { overflow: hidden; }
.paper-card .pc-art img { transition: transform 0.3s var(--ease-rise); }
.paper-card:hover .pc-art img { transform: scale(1.05); }

/* ── Rise Indicator: شريط تقدم من الكحلي (ظلام) للبرتقالي (ضوء) مع امتلاء ناعم ── */
.progress-bar.rise > span {
  background: linear-gradient(90deg, rgb(var(--phoenix-blue-700)), rgb(var(--phoenix-flame-500)));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-rise);
}
[dir="rtl"] .progress-bar.rise > span { transform-origin: right center; }
.progress-bar.rise > span.is-filling { transform: scaleX(1); }

/* ── Skeleton: نبضة بألوان النظام (لا رمادي فج) + حجز أبعاد لمنع CLS ── */
.phx-skeleton { border-radius: 0.9rem; border: 1px solid rgb(var(--border-soft)); background: rgb(var(--bg-surface)); padding: 1rem; }
.phx-skeleton .sk {
  border-radius: 0.5rem; min-height: 0.9rem;
  background: linear-gradient(90deg, rgb(var(--border-soft)) 25%, rgb(var(--bg-page)) 50%, rgb(var(--border-soft)) 75%);
  background-size: 200% 100%;
  animation: phx-shimmer 1.4s var(--ease-rise) infinite;
}
.phx-skeleton .sk + .sk { margin-top: 0.6rem; }
@keyframes phx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* حجز أبعاد الوسائط لمنع Layout Shift */
.phx-media-16x9 { aspect-ratio: 16 / 9; }
.phx-media-4x3 { aspect-ratio: 4 / 3; }

/* ── تعطيل شامل لمن يفضّل تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
  body, #main-content { animation: none; }
  body.is-leaving { transition: none; }
  .phx-load-rise, .phx-load-scale { opacity: 1; animation: none; }
  .btn-cta, .phoenix-hover-lift, .paper-card, .paper-card .pc-art img,
  .phx-underline::after, .progress-bar.rise > span {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .progress-bar.rise > span { transform: none; }
  .phx-skeleton .sk { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ملحق 1: هوفر موسّع — تكبير خفيف للأزرار والكروت والأيقونات
   ════════════════════════════════════════════════════════════════════ */

/* أداة تكبير عامة */
.phoenix-hover-scale { transition: transform 0.22s var(--ease-rise); }
.phoenix-hover-scale:hover { transform: scale(1.04); }
.phoenix-hover-scale:active { transform: scale(0.97); }

/* أزرار v2 (اللاندنق): رفع + تكبير خفيف + انضغاط */
.v2-btn-p, .v2-btn-gd, .v2-btnm { transition: transform 0.2s var(--ease-rise), box-shadow 0.2s var(--ease-rise), background-color 0.18s ease, border-color 0.18s ease; }
.v2-btn-p:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 30px -10px rgba(240, 102, 26, 0.85); }
.v2-btn-p:active, .v2-btnm:active { transform: scale(0.97); }
.v2-btn-gd:hover { transform: translateY(-2px) scale(1.02); border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.6); }

/* أزرار المنظومة القديمة: رفع موحد + انضغاط */
.btn-navy, .btn-accent, .chip-btn { transition: transform 0.2s var(--ease-rise), box-shadow 0.2s var(--ease-rise), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.btn-navy:hover, .btn-accent:hover { transform: translateY(-2px) scale(1.02); }
.btn-navy:active, .btn-accent:active, .chip-btn:active { transform: scale(0.97); }
.chip-btn:hover { transform: translateY(-1px); }

/* أزرار الأيقونات: تكبير + توهج */
.icon-btn { transition: transform 0.2s var(--ease-rise), border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; }
.icon-btn:hover { transform: scale(1.08); }
.icon-btn:active { transform: scale(0.94); }

/* روابط النافبار والقوائم: انزلاق خفيف */
.v2-navlink, .dash-nav a, .portal-bottomnav a { transition: transform 0.18s var(--ease-rise), color 0.18s ease, background-color 0.18s ease; }
.dash-nav a:hover, .portal-bottomnav a:hover { transform: translateX(-2px); }
[dir="ltr"] .dash-nav a:hover, [dir="ltr"] .portal-bottomnav a:hover { transform: translateX(2px); }

/* بطاقات v2: رفع + حد متوهج */
a.v2-card, .v2-cardm { transition: transform 0.25s var(--ease-rise), box-shadow 0.25s var(--ease-rise), border-color 0.25s var(--ease-rise); }
a.v2-card:hover { transform: translateY(-4px) scale(1.01); }

/* صور الكورسات: تكبير داخل إطار محدود */
.course-card .course-image, .pc-art img { transition: transform 0.3s var(--ease-rise); }
.course-card { transition: transform 0.25s var(--ease-rise), box-shadow 0.25s var(--ease-rise); }

/* ════════════════════════════════════════════════════════════════════
   ملحق 2: فصل الأخطاء عن الأحداث — رسائل مميزة بصرياً
   - خطأ: أحمر + اهتزاز دخول + أيقونة ✕
   - نجاح: أخضر + انزلاق + ✓  |  تنبيه: كهرماني  |  معلومة: كحلي
   ════════════════════════════════════════════════════════════════════ */
@keyframes phx-msg-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes phx-msg-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(5px); } 40% { transform: translateX(-5px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-3px); } }
.phx-msg-error { animation: phx-msg-in 0.3s var(--ease-rise), phx-msg-shake 0.4s ease 0.1s; }
 .phx-msg {
   display: flex; align-items: flex-start; gap: 0.6rem;
   border-radius: 0.9rem; border: 1px solid; padding: 0.8rem 1rem;
   font-size: 0.88rem; font-weight: 700; line-height: 1.7;
   animation: phx-msg-in 0.3s var(--ease-rise);
 }
 /* hidden يجب أن يغلب display:flex (motion.css يُحمَّل بعد phoenix.css حيث .hidden) */
 .phx-msg.hidden { display: none; }
.phx-msg .phx-msg-icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.7; }
.phx-msg-success { border-color: rgb(var(--phoenix-success) / 0.4); background: rgb(var(--phoenix-success) / 0.1); color: rgb(var(--phoenix-success)); }
.phx-msg-error { border-color: rgb(var(--phoenix-danger) / 0.45); background: rgb(var(--phoenix-danger) / 0.09); color: rgb(var(--phoenix-danger)); }
.phx-msg-warn { border-color: rgb(var(--phoenix-warning) / 0.45); background: rgb(var(--phoenix-warning) / 0.12); color: rgb(var(--phoenix-warning)); }
.phx-msg-info { border-color: rgb(var(--phoenix-blue-500) / 0.4); background: rgb(var(--phoenix-blue-500) / 0.09); color: rgb(var(--phoenix-blue-700)); }

/* أخطاء الحقول: حد أحمر + نص خطأ */
.dash-field .field-error, .field-error {
  display: flex; align-items: center; gap: 0.35rem;
  margin-top: 0.4rem; font-size: 0.78rem; font-weight: 700; color: rgb(var(--phoenix-danger));
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: rgb(var(--phoenix-danger)) !important;
  box-shadow: 0 0 0 3px rgb(var(--phoenix-danger) / 0.15);
}

/* ── تنبيهات عائمة (phxToast): أحداث لا أخطاء نماذج ── */
#phx-toasts {
  position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); inset-inline: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none;
  padding-inline: 1rem;
}
.phx-toast {
  display: flex; align-items: center; gap: 0.55rem; max-width: min(92vw, 26rem);
  border-radius: 999px; padding: 0.65rem 1.2rem;
  font-size: 0.85rem; font-weight: 800; color: #fff;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.45);
  animation: phx-toast-in 0.32s var(--ease-rise);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
@keyframes phx-toast-in { from { opacity: 0; transform: translateY(14px) scale(0.95); } to { opacity: 1; transform: none; } }
.phx-toast.is-out { opacity: 0; transform: translateY(8px) scale(0.96); }
.phx-toast-success { background: rgb(var(--phoenix-success)); }
.phx-toast-error { background: rgb(var(--phoenix-danger)); }
.phx-toast-warn { background: rgb(var(--phoenix-warning)); color: #3a2a00; }
.phx-toast-info { background: rgb(var(--phoenix-blue-700)); }

/* ════════════════════════════════════════════════════════════════════
   ملحق 3: تلميحات CSS خالصة — data-phx-tip="النص" (تتكيف مع RTL)
   ════════════════════════════════════════════════════════════════════ */
[data-phx-tip] { position: relative; }
[data-phx-tip]:hover::after, [data-phx-tip]:focus-visible::after {
  content: attr(data-phx-tip); position: absolute; bottom: calc(100% + 7px); inset-inline-start: 50%;
  transform: translateX(50%); background: #1f2937; color: #fff;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  padding: 0.3rem 0.65rem; border-radius: 0.5rem; z-index: 60; pointer-events: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
  animation: phx-msg-in 0.2s var(--ease-rise);
}
[dir="ltr"] [data-phx-tip]:hover::after, [dir="ltr"] [data-phx-tip]:focus-visible::after { transform: translateX(-50%); }
[data-phx-tip]:hover::before, [data-phx-tip]:focus-visible::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); inset-inline-start: 50%;
  transform: translateX(50%); border: 4px solid transparent; border-top-color: #1f2937;
  z-index: 60; pointer-events: none;
}
[dir="ltr"] [data-phx-tip]:hover::before, [dir="ltr"] [data-phx-tip]:focus-visible::before { transform: translateX(-50%); }

/* ── تعطيل الملحقات لمن يفضّل تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
  .phoenix-hover-scale, .v2-btn-p, .v2-btn-gd, .v2-btnm, .btn-navy, .btn-accent,
  .chip-btn, .icon-btn, .v2-navlink, .dash-nav a, .portal-bottomnav a,
  a.v2-card, .course-card, .course-card .course-image, .pc-art img {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .phx-msg, .phx-toast, [data-phx-tip]:hover::after { animation: none; }
  .phx-toast { transition: none; }
}