/* 1. fadeIn (الظهور التدريجي) */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .fade-in {
      animation: fadeIn 0.4s ease-in-out;
    }

    /* 2. slideUp (الدخول من الأسفل إلى الأعلى) */
    @keyframes slideUp {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .slide-up {
      animation: slideUp 1.5s ease-out;
    }

    /* 3. bounce (الارتداد) */
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-30px); }
      60% { transform: translateY(-15px); }
    }
    .bounce {
      animation: bounce 2s infinite;
    }

    /* 4. rotate (الدوران) */
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .rotate {
      animation: rotate 3s linear infinite;
    }

    /* 5. zoomIn (التكبير التدريجي) */
    @keyframes zoomIn {
      from { transform: scale(0); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .zoom-in {
      animation: zoomIn 1.5s ease-in-out;
    }

    /* 6. shake (الاهتزاز) */
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }
    .shake {
      animation: shake 1s ease-in-out;
    }

    /* 7. slideInLeft (الدخول من اليسار) */
    @keyframes slideInLeft {
      from { transform: translateX(-100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    .slide-in-left {
      animation: slideInLeft 1.5s ease-out;
    }

    /* 8. pulse (النبض) */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .pulse {
      animation: pulse 2s infinite;
    }

    /* 9. flip (القلب) */
    @keyframes flip {
      from { transform: rotateY(0deg); }
      to { transform: rotateY(360deg); }
    }
    .flip {
      animation: flip 2s linear infinite;
    }

    /* 10. swing (التذبذب) */
    @keyframes swing {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(15deg); }
      50% { transform: rotate(-15deg); }
      75% { transform: rotate(10deg); }
      100% { transform: rotate(0deg); }
    }
    .swing {
      animation: swing 2s ease-in-out infinite;
    }

	@keyframes spring {
		15% {
			transform: scale(1.2, 1.1);
		}
		40% {
			transform: scale(0.95, 0.95);
		}
		75% {
			transform: scale(1.05, 1);
		}
		100% {
			transform: scale(1, 1);
		}
	}