/* Animations for Meme Generator */

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

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

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

/* Rotate Animation for Loading */
@keyframes rotate { 
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Pop Animation */
@keyframes pop {
    0% { transform: scale(0.8); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Gradient Animation */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Apply animations to elements */
.fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

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

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

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

.bounce {
    animation: bounce 1s ease;
}

.shake {
    animation: shake 0.5s ease;
}

.pop {
    animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Loading spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(74, 144, 226, 0.3);
    border-radius: 50%;
    border-top-color: #4a90e2;
    margin: 20px auto;
    animation: rotate 1s linear infinite;
}