@keyframes slidein {
    from {
      translate: 0 60px;
      scale: 100% 1;
    }

    to {
      translate: 0 0;
      scale: 100% 1;
    }
  }

  .swinging-img {
    animation: swing 3s infinite; /* Swing effect */
}

@keyframes swing {
    0% {
        transform: rotate(0deg); /* Start */
    }
    25% {
        transform: rotate(10deg); /* Swing to the right */
    }
    50% {
        transform: rotate(0deg); /* Back to center */
    }
    75% {
        transform: rotate(-10deg); /* Swing to the left */
    }
    100% {
        transform: rotate(0deg); /* Back to center */
    }
}
.zoom-in {
    animation: zoomIn 0.5s ease-in-out infinite alternate;
}

@keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

.shake {
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
    0% { transform: translate(0); }
    25% { transform: translate(-5px); }
    50% { transform: translate(5px); }
    75% { transform: translate(-5px); }
    100% { transform: translate(0); }
}

.fade-in {
    animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.slide-in {
    animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%); /* أو translateY(100%) */
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rotate {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.grayscale {
    border-radius: 20px;
    filter: grayscale(100%); /* جعل الصورة باللون الرمادي */
}

.drawing {
    border-radius: 20px;
    animation: draw 5s linear infinite; /* يدور الأنيميشن كل 20 ثانية */
    clip-path: inset(100% 0 0 0); /* إخفاء الصورة بالكامل في البداية */
}

@keyframes draw {
    0% {
        clip-path: inset(100% 0 0 0); /* إخفاء الصورة بالكامل */
    }
    100% {
        clip-path: inset(0 0 0 0); /* عرض الصورة بالكامل */
        filter: grayscale(0%); /* العودة للألوان الأصلية */
    }
}

.move-up-down {
    animation: move 5s linear infinite;
}

@keyframes move {
    0% {
        transform: translateY(0); /* موضع البداية */
    }
    50% {
        transform: translateY(-15px); /* ارتفاع بسيط */
    }
    100% {
        transform: translateY(0); /* العودة لموضع البداية */
    }
}