/* ==========================================================
   مدارس النجوم الذهبية — animations.css
   ----------------------------------------------------------
   ملف مستقل يجمع كل حركة الموقع في مكان واحد: الدخول عند
   التمرير، اللمسة التوقيعية (نجمة اللوغو المتلألئة)، الطفو
   الهادئ للعناصر، بريق الأزرار، وتفاعل الشعار عند التحويم.
   فصلها هنا يجعل تعديل أو تعطيل أي حركة أمراً مباشراً وسريعاً،
   بينما يبقى style.css مخصصاً للبنية والألوان والمسافات.

   ملاحظة: كل الحركات هنا محكومة بقاعدة إيقاف الحركة العامة
   الموجودة في style.css عند تفعيل prefers-reduced-motion.
   ========================================================== */

/* ---------- 1) Entrance keyframes (page-load & scroll-hint) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wheel {
  0%, 100% { transform: translateY(0);  opacity: 1; }
  60%      { transform: translateY(12px); opacity: 0; }
}

/* ---------- 2) اللمسة التوقيعية: نجمة متلألئة تعكس نجمة اللوغو ---------- */
@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.7)  rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(18deg); }
}

.brand-mark,
.footer-mark {
  position: relative;
}
.brand-mark::after,
.footer-mark::after {
  content: "";
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  width: 9px;
  height: 9px;
  background: var(--grad-gold);
  clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%);
  animation: twinkle 2.6s ease-in-out infinite;
  pointer-events: none;
}

.hero-badge,
.eyebrow.light {
  position: relative;
}
.hero-badge::before,
.eyebrow.light::before {
  content: "";
  position: absolute;
  top: -6px;
  inset-inline-start: -2px;
  width: 8px;
  height: 8px;
  background: var(--grad-gold);
  clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%);
  animation: twinkle 3.1s .4s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- 3) طفو هادئ للعناصر التوضيحية ---------- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.about-badge { animation: float-soft 5s ease-in-out infinite; }

.stat-icon { animation: float-soft 4.4s ease-in-out infinite; }
.stat-card:nth-child(2) .stat-icon { animation-delay: .3s; }
.stat-card:nth-child(3) .stat-icon { animation-delay: .6s; }
.stat-card:nth-child(4) .stat-icon { animation-delay: .9s; }

/* ---------- 4) تفاعل الشعار عند التحويم ---------- */
.brand-logo,
.footer-logo {
  transition: height .35s var(--ease), transform .5s var(--ease), filter .4s var(--ease);
  filter: drop-shadow(0 3px 8px rgba(10,58,150, .22));
}
.brand:hover .brand-logo {
  transform: rotate(-6deg) scale(1.08);
}

/* ---------- 5) بريق ذهبي يعبر الأزرار الرئيسية عند التحويم ---------- */
.btn-gold,
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-gold::before,
.btn-primary::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start .7s var(--ease);
  pointer-events: none;
}
.btn-gold:hover::before,
.btn-primary:hover::before {
  inset-inline-start: 120%;
}

/* ---------- 6) انزلاق هادئ للتدرج الذهبي في عنوان الهيرو ---------- */
@keyframes gradient-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero-title .gold {
  background-size: 220% auto;
  animation: gradient-drift 6s ease-in-out infinite;
}

/* ==========================================================
   7) إضافات النجوم الذهبية: شريط التقدّم،
      نجوم الهيرو العائمة، ورفع البطاقات عند التحويم
   ========================================================== */

/* شريط تقدّم القراءة أعلى الصفحة */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 200;
  background: var(--grad-gold);
  transform-origin: right center;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}


/* نجوم ذهبية صغيرة تطفو في خلفية الهيرو */
.sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.sparkle {
  position: absolute;
  width: var(--s, 12px);
  height: var(--s, 12px);
  left: var(--x);
  top: var(--y);
  background: var(--grad-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: .0;
  animation: sparkle-float var(--t, 7s) var(--dl, 0s) ease-in-out infinite;
}
@keyframes sparkle-float {
  0%, 100% { opacity: 0;   transform: translateY(14px) scale(.6) rotate(0deg); }
  50%      { opacity: .85; transform: translateY(-22px) scale(1) rotate(25deg); }
}

/* رفع هادئ للبطاقات عند التحويم */
.feature-card, .stage-card, .news-card, .stat-card {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .8s var(--ease);
}
.feature-card:hover, .stage-card:hover, .news-card:hover, .stat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.feature-card:hover .feature-icon { transform: rotate(-8deg) scale(1.08); }
.feature-icon { transition: transform .4s var(--ease); }

/* خط ذهبي ينمو أسفل عناوين الأقسام عند ظهورها */
.section-head .section-title { position: relative; padding-bottom: 14px; }
.section-head .section-title::after {
  content: "";
  position: absolute;
  inset-inline: 50%;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-gold);
  transition: inset-inline .8s .2s var(--ease);
}
.section-head.visible .section-title::after { inset-inline: calc(50% - 32px); }

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; }
}

/* شعار المدرسة كعلامة مائية هادئة في خلفية الهيرو (بدون أي صور أشخاص) */
.hero::after {
  content: "";
  position: absolute;
  inset-block: 12% 12%;
  inset-inline-start: 4%;
  width: min(34vw, 460px);
  background: url("../images/logo.webp") center / contain no-repeat;
  opacity: .16;
  filter: drop-shadow(0 0 40px rgba(242, 208, 107, .45));
  animation: float-soft 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 900px) { .hero::after { opacity: .08; width: 60vw; inset-inline-start: 20%; } }