/**
 * Animations and Transitions
 * Smooth UI animations and transitions
 */

/* Smooth transitions for common interactions */
* {
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                opacity var(--transition-fast),
                transform var(--transition-fast);
}

/* File row hover animation */
.file-row {
    transition: background-color var(--transition-fast),
                transform var(--transition-fast);
}

.file-row:hover {
    transform: translateX(2px);
}

/* File grid item hover animation */
.file-grid-item {
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.file-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Button press animation */
.btn:active {
    transform: scale(0.95);
}

/* Sidebar item hover */
.sidebar-item {
    transition: background-color var(--transition-fast),
                padding-left var(--transition-fast);
}

.sidebar-item:hover {
    padding-left: calc(var(--spacing-md) + 4px);
}

/* Context menu animation */
.context-menu {
    animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Loading spinner animation */
.loading-spinner {
    animation: spin 1s linear infinite;
}

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

/* Fade in animation for content */
.content-area {
    animation: fadeIn 0.3s ease-in;
}

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

/* Slide in animation for sidebar */
.sidebar {
    transition: transform var(--transition-normal);
}

.sidebar.open {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Upload progress animation */
.upload-progress-fill {
    transition: width 0.3s ease;
}

/* File upload animation */
.file-grid-item,
.file-row {
    animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success/Error message animation */
.error-message,
.success-message {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}