/* ═══════════════════════════════════════════════════════════════════════════
   XFS Manager — Animations (anime.js orchestrated + CSS)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Page transitions ─── */
.view-enter {
    animation: viewFadeIn 0.35s ease-out both;
}

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

/* ─── File card stagger entrance ─── */
.file-card-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

/* ─── Stat card pulse ─── */
@keyframes statPulse {
    0% { box-shadow: 0 0 0 0 var(--accent-primary-muted); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.stat-card.pulse {
    animation: statPulse 1.5s ease-out;
}

/* ─── Sidebar item hover shine ─── */
.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-primary);
    transform: scaleY(0);
    transition: transform var(--transition-fast);
}
.nav-item {
    position: relative;
}
.nav-item.active::before {
    transform: scaleY(1);
}

/* ─── Toast slide in ─── */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100px) scale(0.9);
    }
}
.toast-enter { animation: toastSlideIn 0.4s ease-out both; }
.toast-exit  { animation: toastSlideOut 0.3s ease-in both; }

/* ─── Modal animations ─── */
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalCardIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.modal-overlay:not(.hidden) {
    animation: modalOverlayIn 0.2s ease-out;
}
.modal-overlay:not(.hidden) .modal {
    animation: modalCardIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── Sync button spinner ─── */
.spinning i {
    animation: spin 1s linear infinite;
}

/* ─── Skeleton loading ─── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-hover) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
}
.skeleton-row {
    height: 44px;
    margin-bottom: var(--sp-2);
}

/* ─── Login particle animation helpers ─── */
.particle {
    position: absolute;
    background: var(--accent-primary);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

/* ─── Hover glow effect on cards ─── */
.file-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(99, 102, 241, 0.08),
        transparent 40%
    );
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}
.file-card:hover::after {
    opacity: 1;
}

/* ─── Breadcrumb transition ─── */
.crumb {
    animation: crumbFadeIn 0.2s ease-out both;
}
@keyframes crumbFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ─── Selection bar slide up ─── */
@keyframes selBarIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.selection-bar:not(.hidden) {
    animation: selBarIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Ripple effect ─── */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    animation: rippleExpand 0.6s ease-out forwards;
}
@keyframes rippleExpand {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ─── Glowing border for active downloads ─── */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.2); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); }
}
.dl-item.active-glow {
    animation: glowPulse 2s ease-in-out infinite;
}