/* ===================================================
   بوابة النشر الذكي — ملف الحركات والتأثيرات
   Animations & Micro-interactions
   =================================================== */

/* ========================
   1. Keyframes الأساسية
   ======================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.12); opacity: 0.8; }
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(201, 168, 76, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px currentColor; }
  50%       { box-shadow: 0 0 45px currentColor, 0 0 80px currentColor; }
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.95); }
}

@keyframes bounceIn {
  0%   { transform: scale(0.4); opacity: 0; }
  55%  { transform: scale(1.08); opacity: 1; }
  75%  { transform: scale(0.94); }
  90%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes expandW {
  from { width: 0; }
  to   { width: var(--to, 100%); }
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to   { opacity: 1; max-height: 800px; transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes borderPulse {
  0%, 100% { border-color: rgba(201,168,76,0.3); }
  50%       { border-color: rgba(201,168,76,0.8); }
}

/* ضوء المرور — نبض */
@keyframes lightPulseGreen {
  0%   { box-shadow: 0 0 28px #22c55e, 0 0 55px rgba(34,197,94,0.55); }
  50%  { box-shadow: 0 0 45px #22c55e, 0 0 90px rgba(34,197,94,0.8); }
  100% { box-shadow: 0 0 28px #22c55e, 0 0 55px rgba(34,197,94,0.55); }
}
@keyframes lightPulseRed {
  0%   { box-shadow: 0 0 28px #ef4444, 0 0 55px rgba(239,68,68,0.55); }
  50%  { box-shadow: 0 0 45px #ef4444, 0 0 90px rgba(239,68,68,0.8); }
  100% { box-shadow: 0 0 28px #ef4444, 0 0 55px rgba(239,68,68,0.55); }
}
@keyframes lightPulseYellow {
  0%   { box-shadow: 0 0 28px #f59e0b, 0 0 55px rgba(245,158,11,0.55); }
  50%  { box-shadow: 0 0 45px #f59e0b, 0 0 90px rgba(245,158,11,0.8); }
  100% { box-shadow: 0 0 28px #f59e0b, 0 0 55px rgba(245,158,11,0.55); }
}

/* ========================
   2. كلاسات الحركة
   ======================== */
.animate-fade-in       { animation: fadeIn 0.45s ease both; }
.animate-fade-in-up    { animation: fadeInUp 0.5s ease both; }
.animate-fade-in-down  { animation: fadeInDown 0.45s ease both; }
.animate-fade-in-right { animation: fadeInRight 0.5s ease both; }
.animate-scale-in      { animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-bounce-in     { animation: bounceIn 0.6s cubic-bezier(0.215,0.61,0.355,1) both; }
.animate-float         { animation: float 3.5s ease-in-out infinite; }

/* التأخير التدريجي للقوائم */
.stagger > *:nth-child(1)  { animation-delay: 0.04s; }
.stagger > *:nth-child(2)  { animation-delay: 0.08s; }
.stagger > *:nth-child(3)  { animation-delay: 0.12s; }
.stagger > *:nth-child(4)  { animation-delay: 0.16s; }
.stagger > *:nth-child(5)  { animation-delay: 0.20s; }
.stagger > *:nth-child(6)  { animation-delay: 0.24s; }
.stagger > *:nth-child(7)  { animation-delay: 0.28s; }
.stagger > *:nth-child(8)  { animation-delay: 0.32s; }

/* ========================
   3. تطبيق التأثيرات
   ======================== */

/* إشارات المرور — النبض عند التفعيل */
.traffic-light.status-safe    .bulb-green  { animation: lightPulseGreen  2.2s ease infinite; }
.traffic-light.status-warning .bulb-yellow { animation: lightPulseYellow 2s ease infinite; }
.traffic-light.status-danger  .bulb-red    { animation: lightPulseRed    1.6s ease infinite; }

/* حركة ظهور الصفحات */
.page-section.active { animation: fadeIn 0.4s ease; }

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, #e8edf5 25%, #d8dfee 50%, #e8edf5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 6px;
  color: transparent !important;
}

/* شريط التحميل المتحرك */
.score-bar-fill { animation: expandW 1.1s cubic-bezier(0.4,0,0.2,1) both; }

/* تأثير التحوم على البطاقات */
.hover-lift {
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 280ms cubic-bezier(0.4,0,0.2,1);
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(26,46,90,0.18);
}

/* تأثير حدود البانر الأمان */
.security-banner:hover {
  animation: borderPulse 2s ease infinite;
}

/* حركة الـ navbar عند التمرير */
.navbar { transition: background 300ms ease, box-shadow 300ms ease; }

/* نبض زر الرئيسي */
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0);
  transition: background 200ms ease;
}
.btn-primary:hover::after { background: rgba(255,255,255,0.1); }
.btn-primary:active::after { background: rgba(255,255,255,0.2); }

/* دوران زر التحميل */
.btn.loading .btn-icon { animation: spin 0.8s linear infinite; }

/* حركة الأكورديون (تعليقات المحكمين) */
.comment-body.open { animation: slideDown 0.3s ease both; }

/* ========================
   4. تأثيرات خاصة
   ======================== */

/* وميض اقتراحي للملف */
@keyframes uploadPulse {
  0%, 100% { border-color: rgba(26,46,90,0.25); }
  50%       { border-color: var(--accent); box-shadow: 0 0 20px rgba(201,168,76,0.2); }
}
.upload-area:not(:hover):not(.dragover) {
  animation: uploadPulse 3s ease infinite;
}

/* حركة ظهور بطاقات المجلات */
.journal-card {
  animation: fadeInUp 0.45s ease both;
}

/* تأثير الضغط على الأزرار */
.btn:active:not(:disabled) { transform: scale(0.97) !important; }

/* ========================
   5. تقليل الحركة
   ======================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-float { animation: none; }
}

/* ========================
   6. الشعار الساطع (Star Logo)
   ======================== */
.hero-star-logo-container {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 4s ease-in-out infinite;
  z-index: 10;
  margin-bottom: 20px;
}

.hero-main-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 50%;
  background: white;
  padding: 15px;
  position: relative;
  z-index: 5;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(201, 168, 76, 0.6);
  animation: starPulse 2s infinite alternate;
  border: 5px solid var(--accent);
}

.glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.8) 0%, rgba(201,168,76,0) 70%);
  opacity: 0;
  z-index: 1;
  animation: ringExpand 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.glow-ring.delay-1 { animation-delay: 1s; }
.glow-ring.delay-2 { animation-delay: 2s; }

@keyframes starPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(201, 168, 76, 0.4);
    filter: brightness(1) drop-shadow(0 0 10px var(--accent-light));
  }
  100% {
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(255, 255, 255, 1), 0 0 80px rgba(201, 168, 76, 0.9), 0 0 120px rgba(255, 255, 255, 0.5);
    filter: brightness(1.2) drop-shadow(0 0 25px #fff);
  }
}

@keyframes ringExpand {
  0% {
    width: 180px;
    height: 180px;
    opacity: 0.8;
  }
  100% {
    width: 450px;
    height: 450px;
    opacity: 0;
  }
}

/* ========================
   7. زر الانتقال للوحدة التالية
   ======================== */

@keyframes nextBtnShimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nextBtnFloat {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 30px rgba(201,168,76,0.4); }
  50% { transform: translateY(-5px) scale(1.02); box-shadow: 0 18px 40px rgba(201,168,76,0.6); }
}

.next-step-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #f0c040 50%, var(--accent) 100%) !important;
  background-size: 200% auto !important;
  border: none !important;
  color: #0d1b2a !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  padding: 18px 45px !important;
  border-radius: 50px !important;
  animation: nextBtnFloat 2.5s ease-in-out infinite !important;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 30px rgba(201,168,76,0.4) !important;
}

.next-step-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

.next-step-btn:hover::before {
  left: 100%;
}

.next-step-btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 20px 50px rgba(201,168,76,0.65) !important;
  animation: none !important;
}

.next-step-btn .btn-icon {
  font-size: 1.3rem;
  display: inline-block;
  animation: none !important;
  margin-right: 5px;
}

/* حاوية زر التالي */
.text-center.mt-5.mb-3 {
  padding: 20px 0 5px;
}