/* ============================================================
   Animations CSS — Keyframes v2
   نور Islamic App
   ============================================================ */

@keyframes splashEntry {
  from { opacity:0; transform:scale(0.82) translateY(18px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}
@keyframes loadProgress {
  0%  { width:0%;  } 25% { width:28%; }
  55% { width:62%; } 85% { width:88%; }
  100%{ width:100%;}
}
@keyframes fadeIn    { from{opacity:0;}   to{opacity:1;} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInScale{ from{opacity:0;transform:scale(0.94);} to{opacity:1;transform:scale(1);} }
@keyframes bounceIn  { 0%{opacity:0;transform:scale(0.55);}60%{opacity:1;transform:scale(1.06);}80%{transform:scale(0.97);}100%{transform:scale(1);} }
@keyframes spin      { to{transform:rotate(360deg);} }
@keyframes pulse     { 0%,100%{opacity:1;}50%{opacity:0.38;} }
@keyframes shimmer   { 0%{background-position:-200% 0;}100%{background-position:200% 0;} }
@keyframes float     { 0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);} }
@keyframes ripple    { 0%{transform:scale(0);opacity:0.45;}100%{transform:scale(4);opacity:0;} }
@keyframes toastIn   { from{opacity:0;transform:translateY(-14px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes toastOut  { from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-10px);} }
@keyframes counterPop{ 0%{transform:scale(1);}30%{transform:scale(1.28);}65%{transform:scale(0.96);}100%{transform:scale(1);} }

/* ── Animation Classes ─────────────────────────────────── */
.animate-in       { animation: fadeInUp  0.40s var(--ease-out, cubic-bezier(0,0,0.2,1)) both; }
.animate-in-scale { animation: fadeInScale 0.38s var(--ease-out) both; }
.animate-bounce   { animation: bounceIn  0.48s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-float    { animation: float 3.5s ease-in-out infinite; }
.animate-spin     { animation: spin 0.75s linear infinite; }
.animate-pulse    { animation: pulse 1.5s ease infinite; }

/* Stagger delays */
.delay-1{animation-delay:40ms;}  .delay-2{animation-delay:80ms;}
.delay-3{animation-delay:120ms;} .delay-4{animation-delay:160ms;}
.delay-5{animation-delay:200ms;} .delay-6{animation-delay:240ms;}
.delay-7{animation-delay:280ms;} .delay-8{animation-delay:320ms;}

/* Stagger children */
.stagger-children > *:nth-child(1){animation-delay:0ms;  animation:fadeInUp 0.38s var(--ease-out) both;}
.stagger-children > *:nth-child(2){animation-delay:55ms; animation:fadeInUp 0.38s var(--ease-out) both;}
.stagger-children > *:nth-child(3){animation-delay:110ms;animation:fadeInUp 0.38s var(--ease-out) both;}
.stagger-children > *:nth-child(4){animation-delay:165ms;animation:fadeInUp 0.38s var(--ease-out) both;}
.stagger-children > *:nth-child(5){animation-delay:220ms;animation:fadeInUp 0.38s var(--ease-out) both;}
.stagger-children > *:nth-child(6){animation-delay:275ms;animation:fadeInUp 0.38s var(--ease-out) both;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}