/* ========================================
   File Center — Page Styles
   ======================================== */

/* Hero: folder grid animation */
.fc-hero-anim {
    padding: 20px 24px; width: 100%; max-width: 420px;
}

.fc-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.7rem; color: #94a3b8;
    margin-bottom: 16px; font-weight: 600;
}

.fc-breadcrumb i { font-size: 0.5rem; }
.fc-bc-active { color: #06b6d4; }

.fc-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fc-item {
    background: #fff; border-radius: 10px;
    padding: 16px 12px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.fc-item i { font-size: 1.4rem; }
.fc-folder i { color: #f59e0b; }
.fc-file i { color: #ef4444; }
.fc-item:nth-child(4) i { color: #639BF1; }
.fc-item span { font-size: 0.65rem; font-weight: 600; color: #475569; }

.fc-file-drop { animation: fcDrop 2s 0.8s ease both infinite; }

@keyframes fcDrop {
    0% { opacity: 0; transform: translateY(-16px); }
    20% { opacity: 1; transform: translateY(0); }
    80%, 100% { opacity: 1; transform: translateY(0); }
}

/* ========================================
   Navigation Animation
   ======================================== */
.fc-nav-anim {
    padding: 20px; width: 100%; max-width: 320px;
}

.fc-na-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.68rem; color: #94a3b8; font-weight: 600;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.fc-na-breadcrumb i { font-size: 0.45rem; }
.fc-na-bc-item { transition: color 0.3s ease; }
.fc-na-bc-active { color: #06b6d4; }

.fc-na-list {
    display: flex; flex-direction: column; gap: 6px;
}

.fc-na-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: #fff;
    border-radius: 8px; border: 1px solid #f1f5f9;
    font-size: 0.72rem; font-weight: 600; color: #475569;
    opacity: 0;
    transition: all 0.3s ease;
}

.fc-na-row:nth-child(1) { animation: fcRowSlide 0.4s 0.2s ease both; }
.fc-na-row:nth-child(2) { animation: fcRowSlide 0.4s 0.4s ease both; }
.fc-na-row:nth-child(3) { animation: fcRowSlide 0.4s 0.6s ease both; }

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

.fc-na-folder:hover {
    background: rgba(245,158,11,0.05);
    border-color: rgba(245,158,11,0.2);
    cursor: pointer;
}

/* ========================================
   Share Animation
   ======================================== */
.fc-share-anim {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; padding: 20px; width: 100%; flex-wrap: wrap;
}

.fc-sa-file {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px; background: #fff; border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.fc-sa-file span { font-size: 0.65rem; font-weight: 600; color: #64748b; }

.fc-sa-arrow {
    font-size: 1.2rem; color: #06b6d4;
    animation: fcSharePulse 2s ease-in-out infinite;
}

@keyframes fcSharePulse {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(4px); }
}

.fc-sa-link {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px; background: #fff; border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    border-left: 3px solid #06b6d4;
    animation: fcLinkAppear 1.5s 0.5s ease both;
}

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

.fc-sa-url {
    font-size: 0.68rem; font-weight: 600; color: #06b6d4;
    display: flex; align-items: center; gap: 6px;
}

.fc-sa-expiry {
    font-size: 0.6rem; color: #94a3b8;
    display: flex; align-items: center; gap: 4px;
}

/* ========================================
   Responsive
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .fc-file-drop, .fc-na-row, .fc-sa-arrow, .fc-sa-link {
        animation: none !important; opacity: 1; transform: none;
    }
}