/**
 * Shakerin Astra - Animations CSS
 */

/* ============================================
   Fade In Animation
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-in;
}

/* ============================================
   Slide Up Animation
   ============================================ */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 0.8s ease-out;
}

/* ============================================
   Slide Down Animation
   ============================================ */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-down {
    animation: slideDown 0.8s ease-out;
}

/* ============================================
   Fade In Left (RTL)
   ============================================ */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.6s ease-out;
}

/* ============================================
   Fade In Left (RTL)
   ============================================ */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

/* ============================================
   Scale Animation
   ============================================ */
@keyframes scale {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.scale {
    animation: scale 0.5s ease-out;
}

/* ============================================
   Pulse Animation
   ============================================ */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   Hover Effects
   ============================================ */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ============================================
   Loading Animation
   ============================================ */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading {
    animation: spin 1s linear infinite;
}

/* ============================================
   Shake Animation
   ============================================ */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

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