/* ============================================================
   طبقة الحياة والحركة — خفيفة وراقية
   لا تغيّر هوية التصميم، فقط تضيف حركة ناعمة
   ============================================================ */

/* احترام تفضيل تقليل الحركة لدى المستخدم */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- ظهور ناعم عند التمرير ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);
  will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: none; }
/* تدرّج توقيت العناصر المتتابعة (بطاقات الشبكة) */
[data-reveal].d1 { transition-delay: .06s; }
[data-reveal].d2 { transition-delay: .12s; }
[data-reveal].d3 { transition-delay: .18s; }
[data-reveal].d4 { transition-delay: .24s; }
[data-reveal].d5 { transition-delay: .30s; }

/* ---- الهيرو: تدرّج حي + أشكال طافية ---- */
.hero {
  background-size: 180% 180%;
  animation: heroGradient 16s ease infinite;
}
@keyframes heroGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* أشكال دائرية طافية خلف الهيرو */
.hero::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  top: -120px; left: -60px;
  filter: blur(8px);
  animation: floatY 9s ease-in-out infinite;
  z-index: 1;
}
.hero-inner, .hero-stats { position: relative; z-index: 2; }
@keyframes floatY {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(26px) scale(1.06); }
}

/* أرقام الهيرو تنبض بلطف عند الظهور */
.hero-stat b { animation: popIn .6s cubic-bezier(.34,1.56,.64,1) both; }
.hero-stat:nth-child(2) b { animation-delay:.08s; }
.hero-stat:nth-child(3) b { animation-delay:.16s; }
.hero-stat:nth-child(4) b { animation-delay:.24s; }
@keyframes popIn { from { opacity:0; transform: translateY(10px) scale(.9); } to { opacity:1; transform:none; } }

/* ---- بطاقات الدورات: هوفر أرقى ---- */
.course-card { transition: transform .35s cubic-bezier(.22,.9,.3,1), box-shadow .35s ease, border-color .35s ease; }
.course-card:hover { transform: translateY(-7px); box-shadow: 0 22px 44px -20px rgba(60,52,137,.4); }
/* حركة لطيفة على صورة/أيقونة البطاقة عند الهوفر */
.course-card .course-card-media img,
.course-card .course-card-placeholder svg { transition: transform .5s cubic-bezier(.22,.9,.3,1); }
.course-card:hover .course-card-media img { transform: scale(1.06); }
.course-card:hover .course-card-placeholder svg { transform: scale(1.12) rotate(-4deg); }
/* لمعة خفيفة تمرّ على البطاقة */
.course-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s ease;
  pointer-events: none;
}
.course-card:hover::after { transform: translateX(120%); }
html[data-theme="dark"] .course-card::after {
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
}

/* ---- الأزرار: حركة أنعم + موجة عند الضغط ---- */
.btn { transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .25s ease, background .25s ease; }
.btn-primary:hover, .btn-success:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -10px rgba(60,52,137,.55); }
.btn:active { transform: translateY(0) scale(.97); }

/* ---- روابط النافبار: خط سفلي يمتد ---- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; right: 14px; left: 14px; bottom: 5px;
  height: 2px; background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.22,.9,.3,1);
  opacity: .6;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active::after { transform: scaleX(1); }

/* ---- عناوين الأقسام: العلامة تكبر عند الظهور ---- */
.section-title-mark { transform-origin: bottom; animation: growUp .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- نبضة خفيفة على شارات "مجانية/مدفوعة" ---- */
.course-badge { animation: badgeIn .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes badgeIn { from { opacity:0; transform: scale(.6); } to { opacity:1; transform:none; } }

/* ---- الفوتر: الشارات ترتفع بلطف ---- */
.compliance-badge { transition: transform .3s ease, background .3s ease; }
.compliance-badge:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); }