/* ==============================================================================
   Warteg Online - Animation Keyframes (animation.css)
   ============================================================================== */

/* Slide-in toast notification from the right side */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide up and fade in for cards or modal panels */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

/* Rotation animation for spinner loaders */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulse animation for notifications or dynamic highlights */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(242, 107, 15, 0.4);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 10px rgba(242, 107, 15, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(242, 107, 15, 0);
    }
}

/* Shimmer reflection for skeleton load placeholders */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* CSS Classes calling keyframe definitions */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-spin {
    animation: spin 0.8s linear infinite;
}

.animate-pulse-btn {
    animation: pulse 2s infinite;
}

.shimmer-placeholder {
    background: linear-gradient(90deg, var(--bg-base) 25%, var(--border-color) 50%, var(--bg-base) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}