/* ============================================================
   ANIMATIONS.CSS — Keyframes + Utility Classes
   منصة التعلم الذكية
   ============================================================ */

/* ── Keyframes ── */
@keyframes pulse      { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes popIn      { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes fadeUp     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes slideRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes spin       { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes shimmer    { 0%,100%{opacity:0} 50%{opacity:1} }
@keyframes dotPulse   { 0%,100%{transform:scale(1);opacity:.4} 50%{transform:scale(1.5);opacity:1} }
@keyframes bounce     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes shake      { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 10px var(--primary)} 50%{box-shadow:0 0 30px var(--primary)} }

/* ── Utility: Display ── */
.hidden        { display: none !important; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ── Utility: Text ── */
.text-center  { text-align: center; }
.text-muted   { color: var(--text3); }
.text-success { color: var(--green); }
.text-error   { color: var(--red); }
.text-yellow  { color: var(--yellow); }
.fw-900 { font-weight: 900; }

/* ── Utility: Spacing ── */
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }

/* ── Utility: Animation Classes ── */
.animate-float   { animation: float   4s ease-in-out infinite; }
.animate-pulse   { animation: pulse   2s infinite; }
.animate-bounce  { animation: bounce  2s infinite; }
.animate-fadeup  { animation: fadeUp  .5s ease both; }
.animate-popin   { animation: popIn   .4s cubic-bezier(.34,1.56,.64,1); }

/* ── Responsive grid ── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}