/* ========================================
   Animations - 动画效果和过渡
   ======================================== */

/* Page Fade In */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.page-content {
    animation: fadeInUp 0.4s ease-out;
}

/* Card Hover Lift */
.card-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Button Ripple Effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
}

/* Button Click Scale */
.btn-click-scale {
    transition: transform var(--transition-fast);
}

.btn-click-scale:active {
    transform: scale(0.95);
}

/* Sidebar Slide */
.sidebar {
    transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

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

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

.spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 5px;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Progress Bar Animation */
@keyframes progressShine {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.progress-bar-animated {
    background: linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--primary-light) 50%,
        var(--primary) 100%
    );
    background-size: 200% 100%;
    animation: progressShine 2s linear infinite;
}

/* Skeleton Loading */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--border-color) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-card {
    height: 100px;
    border-radius: var(--radius-lg);
}

/* Toast Notification */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-notification {
    animation: slideInRight 0.3s ease-out;
}

.toast-notification.hiding {
    animation: slideOutRight 0.3s ease-in forwards;
}

/* Pulse Animation for indicators */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

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

.bounce {
    animation: bounce 1s ease;
}

/* Fade In Stagger Children */
.fade-in-stagger > * {
    opacity: 0;
    animation: fadeInUp 0.4s ease-out forwards;
}

.fade-in-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 0.3s; }
.fade-in-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.fade-in-stagger > *:nth-child(8) { animation-delay: 0.4s; }

/* Table Row Hover Highlight */
.table-row-highlight {
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.table-row-highlight:hover {
    background-color: var(--bg-hover);
}

/* Modal Animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content {
    animation: modalFadeIn 0.2s ease-out;
}

/* Checkbox/Radio Animation */
.form-check-input {
    transition: all var(--transition-fast);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

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

/* Chart Loading */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}