/* ============================================
   ANIMATIONS
   ============================================ */

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

/* Pulse Animation */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107, 207, 127, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(107, 207, 127, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107, 207, 127, 0); }
}

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

/* Modal Slide In */
@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

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

/* Skeleton Loading Animation */
@keyframes skeleton-loading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.15) 40px,
        rgba(255, 255, 255, 0.05) 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-gold);
    animation: spin 0.8s linear infinite;
}

/* Smooth Transitions */
.smooth-transition {
    transition: all 0.3s ease;
}