/**
 * animations.css — حركات وتأثيرات بصرية
 */

/* Keyframes */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Scroll reveal */
.animate-in { opacity: 0; transform: translateY(30px); transition: all .6s cubic-bezier(.22,1,.36,1); }
.animate-in.visible { opacity: 1; transform: translateY(0); }

/* Hero animations */
.hero h2 { animation: fadeInUp .8s ease-out; }
.hero p { animation: fadeInUp .8s ease-out .15s both; }
.hero-meta { animation: fadeInUp .8s ease-out .3s both; }

/* Page transition */
#page-content.page-loading { opacity: 0; transform: translateY(10px); }
#page-content { transition: opacity .3s ease, transform .3s ease; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, transparent 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* AJAX page loading bar */
@keyframes pageLoadBar { from { width: 0; } to { width: 70%; } }
#page-content.page-loading::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  height: 3px;
  background: var(--accent, #1A5C32);
  animation: pageLoadBar .8s ease-out forwards;
  z-index: 9999;
}