/* =============================================================
   ANIMATIONS.CSS — Keyframes & Transition Utility Classes
   Al Buraimi Ministry eServices Web Portal
   ============================================================= */

/* ─── Page Load Fade ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Fade Up ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Fade Down ─── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Slide In from Right ─── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Slide In from Left ─── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Spin (loading) ─── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Shimmer (skeleton loading) ─── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─── Scale In ─── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Bounce (scroll indicator) ─── */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(8px); opacity: 0.5; }
}

/* ─── Hero Background Mesh ─── */
@keyframes meshShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ─── Pulse Glow ─── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,189,154,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(46,189,154,0); }
}

/* ─── Float ─── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ─────────────────────────────────────────
   Utility Animation Classes
   ───────────────────────────────────────── */

.animate-fadeIn   { animation: fadeIn  0.4s ease both; }
.animate-fadeUp   { animation: fadeUp  0.6s ease both; }
.animate-fadeDown { animation: fadeDown 0.6s ease both; }
.animate-scaleIn  { animation: scaleIn 0.5s ease both; }
.animate-float    { animation: float 3s ease-in-out infinite; }
.animate-pulse    { animation: pulseGlow 2s ease infinite; }

/* ─── Delay utilities ─── */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ─── Transition utilities ─── */
.transition-all  { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* ─── Hover lift ─── */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* ─── Page transition ─── */
main {
  animation: fadeIn 0.4s ease;
}

/* ─── Loading Spinner ─── */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(16,28,78,0.12);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

.spinner--sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner--white {
  border-color: rgba(255,255,255,0.3);
  border-top-color: white;
}

/* ─── RTL arrow flip ─── */
[dir="rtl"] .icon-arrow,
[dir="rtl"] .arrow-icon {
  transform: scaleX(-1);
}