/* ============================================================================
   CONFIGURE SOURCES - ANIMATIONS & TRANSITIONS
   File 6 of 6: Keyframes, Animations, Hover Effects, and Transitions
   ============================================================================ */

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

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Content (Alternative) */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* Processing Pulse Animation */
@keyframes processingPulse {
    0%, 100% { 
        opacity: 0.6; 
    }
    50% { 
        opacity: 1; 
    }
}

/* Shimmer Animation */
@keyframes shimmer {
    0% { 
        transform: translateX(-100%); 
    }
    100% { 
        transform: translateX(100%); 
    }
}

/* File Processing Animation */
@keyframes fileProcessing {
    0%, 100% { 
        background: rgba(255, 255, 255, 0.02);
        border-color: rgba(255, 255, 255, 0.06);
    }
    50% { 
        background: rgba(67, 132, 255, 0.05);
        border-color: rgba(67, 132, 255, 0.2);
    }
}

/* ============================================= */
/* LOADING STATES                                */
/* ============================================= */

/* Loading Spinner */
.cs-loading {
    text-align: center;
    padding: 80px;
}

.cs-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}

/* Processing Spinner (Smaller) */
.processing-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #4384ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================= */
/* BUTTON TRANSITIONS                            */
/* ============================================= */

/* Primary Button Hover */
.cs-continue-btn {
    transition: all 0.3s ease;
}

.cs-continue-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(67, 132, 255, 0.3);
}

/* Smart Match Process Button */
.sm-process-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sm-process-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 132, 255, 0.35);
    background: linear-gradient(135deg, #5494ff, #8452ff);
}

/* Upload Action Buttons */
.cs-upload-action-btn {
    transition: all 0.2s ease;
}

.cs-upload-action-btn:hover {
    background: rgba(67, 132, 255, 0.1);
    border-color: rgba(67, 132, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

/* Download Audit Button */
.cs-download-audit-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-download-audit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, var(--vc-status-partial), #f59e0b);
}

/* Bulk Action Buttons */
.cs-bulk-btn {
    transition: all 0.3s ease;
}

.cs-bulk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(239, 68, 68, 0.12));
}

/* Privacy Modal Buttons */
.btn-cancel,
.btn-continue {
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: #f5f5f5;
}

.btn-continue:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

/* ============================================= */
/* CARD & SOURCE ANIMATIONS                      */
/* ============================================= */

/* Source Card Hover */
.cs-source-card {
    transition: all 0.2s ease;
}

.cs-source-card:hover {
    background: var(--vc-border-subtle);
    border-color: rgba(67, 132, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Category Card Hover */
.cs-category-card {
    transition: all 0.3s ease;
}

.cs-category-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(67, 132, 255, 0.15);
}

.cs-category-card.cs-category-active {
    transform: translateY(-2px);
}

/* Stat Card Hover */
.cs-stat-card {
    transition: all 0.3s ease;
}

.cs-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Success Section Source Item */
.cs-source-item {
    transition: all 0.2s ease;
}

.cs-source-item:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateX(4px);
}

/* Uncited Item Hover */
.cs-uncited-item {
    transition: all 0.2s ease;
}

.cs-uncited-item:hover {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
    transform: translateX(4px);
}

/* ============================================= */
/* ACTION ICON ANIMATIONS                        */
/* ============================================= */

/* Action Icon Base */
.cs-action-icon {
    transition: all 0.2s ease;
}

/* Upload Icon Hover */
.cs-icon-upload:hover {
    background: rgba(16, 185, 129, 0.25);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Skip Icon Hover */
.cs-icon-skip:hover {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Premium Icon */
.cs-icon-premium {
    transition: all 0.2s ease;
}

.cs-icon-premium:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.3));
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    transform: translateY(-2px);
}

/* Change Icon Hover */
.cs-change-icon {
    transition: all 0.2s ease;
}

.cs-change-icon:hover {
    background: rgba(67, 132, 255, 0.25);
    box-shadow: 0 4px 12px rgba(67, 132, 255, 0.4);
}

/* Undo Icon Hover */
.cs-undo-icon {
    transition: all 0.2s ease;
}

.cs-undo-icon:hover {
    background: rgba(239, 68, 68, 0.15);
    color: rgba(239, 68, 68, 1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ============================================= */
/* FILE & SMART MATCHING ANIMATIONS              */
/* ============================================= */

/* File Item Hover */
.sm-file-item {
    transition: all 0.2s ease;
}

.sm-file-item:hover {
    background: rgba(67, 132, 255, 0.03);
    border-color: rgba(67, 132, 255, 0.15);
    transform: translateX(4px);
}

/* File Remove Button */
.sm-file-remove {
    transition: all 0.2s ease;
}

.sm-file-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(239, 68, 68, 0.8);
    transform: scale(1.1);
}

/* Smart Match Upload Area */
.cs-smart-match-upload-area {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-smart-match-upload-area:hover,
.cs-smart-match-upload-area.dragover {
    background: radial-gradient(ellipse at center, 
        rgba(67, 132, 255, 0.06), 
        rgba(67, 132, 255, 0.01)
    );
    border-color: rgba(67, 132, 255, 0.35);
    border-style: solid;
    transform: scale(1.01);
}

/* File Processing Animation */
.sm-file-item.processing {
    animation: fileProcessing 1s ease-in-out infinite;
}

/* ============================================= */
/* TOGGLE & PANEL ANIMATIONS                     */
/* ============================================= */

/* Smart Match Toggle */
.cs-smart-match-toggle {
    transition: all 0.3s ease;
}

.cs-smart-match-toggle:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Smart Match SVG Icon */
.cs-smart-match-toggle svg {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Chevron Rotation */
.cs-chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smart Match Panel */
.cs-smart-match-panel {
    transition: all 0.3s ease;
}

/* Collapsible Content */
.cs-collapsible-content {
    overflow: hidden;
    transition: all 0.3s ease;
    /* REMOVED: animation: slideDown 0.3s ease-out; - was causing grow animation on tab switch */
}

/* Expand Icon */
.cs-expand-icon svg {
    transition: transform 0.3s ease;
}

/* View Details Link */
.cs-view-details-link {
    transition: all 0.2s ease;
}

.cs-view-details-link:not([disabled]):hover {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.cs-view-details-link .chevron-icon {
    transition: transform 0.3s ease;
}

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

/* Tab Navigation */
.cs-tab {
    transition: all 0.3s ease;
}

.cs-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

/* Tab Panel Fade In */
.cs-tab-panel {
    animation: fadeIn 0.3s ease-out;
}

/* ============================================= */
/* PROGRESS BAR ANIMATIONS                       */
/* ============================================= */

/* Progress Fill */
.cs-progress-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 20px rgba(67, 132, 255, 0.4);
}

/* Progress Fill Processing State */
.cs-progress-fill.processing {
    animation: processingPulse 1.5s ease-in-out infinite;
}

/* Progress Fill Shimmer Effect */
.cs-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.2) 50%,
        transparent
    );
    animation: shimmer 2s infinite;
}

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

/* Privacy Modal Overlay Fade In */
.privacy-upload-modal-overlay {
    animation: fadeIn 0.3s ease;
}

/* Privacy Modal Content Slide Up */
.privacy-upload-modal-content {
    animation: slideUp 0.3s ease;
}

/* Audit Modal Fade In */
.cs-audit-modal {
    animation: fadeIn 0.2s ease;
}

/* Audit Modal Content Slide Up */
.cs-audit-modal-content {
    animation: slideUp 0.3s ease;
}

/* Format Card Hover */
.cs-format-card {
    transition: all 0.2s ease;
}

.cs-format-card:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    transform: translateX(4px);
}

.cs-format-arrow {
    transition: all 0.2s ease;
}

.cs-format-card:hover .cs-format-arrow {
    color: var(--vc-status-partial);
    transform: translateX(4px);
}

/* ============================================= */
/* LINK & TEXT TRANSITIONS                       */
/* ============================================= */

/* Source Link Hover */
.cs-source-link {
    transition: all 0.2s ease;
}

.cs-source-link:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* Source URL Hover */
.cs-source-url {
    transition: all 0.2s ease;
}

.cs-source-url:hover {
    color: var(--vc-status-supported);
    text-decoration: underline;
}

/* Uncited Link Hover */
.cs-uncited-link {
    transition: all 0.2s ease;
}

.cs-uncited-link:hover {
    color: var(--vc-status-partial);
    text-decoration: underline;
}

/* ============================================= */
/* INPUT TRANSITIONS                             */
/* ============================================= */

/* Reference Input */
.cs-reference-input,
.cs-success-reference-input {
    transition: all 0.2s ease;
}

.cs-reference-input:hover,
.cs-reference-input:focus,
.cs-success-reference-input:hover,
.cs-success-reference-input:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.cs-success-reference-input:hover,
.cs-success-reference-input:focus {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* ============================================= */
/* SECTION HEADER ANIMATIONS                     */
/* ============================================= */

/* Section */
.cs-section {
    animation: fadeIn 0.3s ease-out;
}

/* Clickable Section Header */
.cs-clickable {
    transition: all 0.3s ease;
}

.cs-clickable:hover {
    opacity: 0.9;
}

/* ============================================= */
/* PROCESSING CARD STATE                         */
/* ============================================= */

/* Processing Card Border Pulse */
.cs-processing-card {
    border-color: rgba(245, 158, 11, 0.3) !important;
    background: rgba(245, 158, 11, 0.03) !important;
}

/* ============================================= */
/* BADGE & STATUS ANIMATIONS                     */
/* ============================================= */

/* Status Badge Subtle Pulse (Optional) */
.cs-status-badge {
    transition: all 0.2s ease;
}

/* Ready Badge */
.cs-ready-badge {
    animation: fadeIn 0.3s ease;
}

/* ============================================= */
/* CUSTOM EASING FUNCTIONS                       */
/* ============================================= */

/*
  Available cubic-bezier functions used throughout:
  - cubic-bezier(0.4, 0, 0.2, 1) - Smooth acceleration/deceleration
  - ease - Default easing
  - ease-out - Fast start, slow end
  - ease-in-out - Smooth both ends
*/

/* ============================================= */
/* PERFORMANCE OPTIMIZATIONS                     */
/* ============================================= */

/* Use hardware acceleration for transforms */
.cs-source-card,
.cs-category-card,
.sm-file-item,
.cs-action-icon,
.cs-progress-fill {
    will-change: transform;
}

/* Remove will-change on hover end */
.cs-source-card:not(:hover),
.cs-category-card:not(:hover),
.sm-file-item:not(:hover) {
    will-change: auto;
}

/* ============================================= */
/* DISABLE GROW/SCALE ANIMATIONS ON CONTENT     */
/* ============================================= */

/* Disable all scale/grow animations on category content and cards */
.cs-category-content,
.cs-category-content > *,
.cs-source-card,
.cs-pdf-card,
.cs-ready-card,
.cs-html-card,
.cs-dead-card,
.links-section,
.links-list {
    animation: none !important;
}

/* Keep hover transforms working but disable initial scale */
.cs-category-content .cs-source-card,
.cs-category-content .cs-pdf-card {
    transform: none;
}

/* Allow hover effects to still work */
.cs-source-card:hover,
.cs-pdf-card:hover {
    transform: translateY(-1px);
}