/* =========================================================
   BROWSER
   ========================================================= */


/* =========================================================
   BREADCRUMB
   ========================================================= */

/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {
    display: flex;

    align-items: center;

    gap: 4px;

    min-width: 0;

    margin-bottom: 20px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.4;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none;

    white-space: nowrap;

    animation:
        breadcrumb-enter .28s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.breadcrumb::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   BREADCRUMB ITEM
   ========================================================= */

.breadcrumb-item {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 30px;

    max-width: 420px;

    margin: 0;

    padding: 5px 9px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    background:
        transparent;

    color:
        var(--text-muted);

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    cursor:
        pointer;

    box-shadow:
        none;

    transform:
        none;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


/* =========================================================
   CLICKABLE BREADCRUMB
   ========================================================= */

.breadcrumb-item:not(:disabled):hover {
    color:
        var(--text);

    background:
        rgba(139,156,255,.075);

    border-color:
        rgba(139,156,255,.14);

    box-shadow:
        0 4px 14px rgba(0,0,0,.12);

    transform:
        none;
}


/* =========================================================
   ACTIVE / CURRENT LOCATION
   ========================================================= */

.breadcrumb-item.active {
    color:
        var(--text);

    background:
        rgba(255,255,255,.045);

    border-color:
        rgba(255,255,255,.075);

    cursor:
        default;

    font-weight:
        600;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* =========================================================
   HOME
   ========================================================= */

.breadcrumb-home {
    color:
        var(--text-soft);
}

.breadcrumb-home:not(:disabled):hover {
    color:
        #ffffff;

    background:
        rgba(139,156,255,.10);

    border-color:
        rgba(139,156,255,.18);
}

.breadcrumb-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 15px;

    height: 15px;

    color:
        var(--accent);

    font-size:
        15px;

    line-height:
        1;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.breadcrumb-separator {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        14px;

    color:
        rgba(255,255,255,.20);

    font-size:
        16px;

    font-weight:
        400;

    user-select:
        none;
}


/* =========================================================
   BREADCRUMB ANIMATION
   ========================================================= */

@keyframes breadcrumb-enter {

    from {
        opacity:
            0;

        transform:
            translateY(-3px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.back {
    margin-bottom:
        18px;
}


/* =========================================================
   COUNT
   ========================================================= */

#count {
    margin-bottom:
        16px;

    color:
        var(--text-muted);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        .01em;

    transition:
        opacity .25s ease;
}


/* =========================================================
   GRID
   ========================================================= */

.grid {
    display:
        grid;

    grid-template-columns:
        repeat(auto-fill, minmax(320px, 1fr));

    gap:
        15px;
}


/* =========================================================
   CARD
   ========================================================= */

.item {
    position:
        relative;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        19px;

    /*
     * Cards are deliberately lighter and slightly cooler
     * than the page background.
     *
     * This creates the second visual layer of the UI.
     */

    background:
        linear-gradient(
            145deg,
            rgba(30, 35, 47, .92),
            rgba(20, 24, 32, .92)
        );

    border:
        1px solid
        rgba(151, 163, 190, .12);

    border-radius:
        var(--radius-md);

    box-shadow:
        0 5px 20px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);

    overflow:
        hidden;

    transform:
        translateZ(0);

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;

    animation:
        card-enter .42s cubic-bezier(.2,.8,.2,1) both;
}


/* =========================================================
   CARD TOP LIGHT
   ========================================================= */

.item::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(139,156,255,.14),
            transparent 46%
        );

    transition:
        opacity .3s ease;
}


/* =========================================================
   CARD EDGE
   ========================================================= */

.item::after {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        18px;

    right:
        18px;

    height:
        1px;

    pointer-events:
        none;

    opacity:
        .45;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.item:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(139,156,255,.24);

    background:
        linear-gradient(
            145deg,
            rgba(35, 41, 56, .98),
            rgba(23, 28, 38, .98)
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 0 0 1px rgba(139,156,255,.035),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.item:hover::before {
    opacity:
        1;
}

.item:active {
    transform:
        translateY(-1px)
        scale(.995);

    transition-duration:
        .08s;
}


/* =========================================================
   CARD STAGGER
   ========================================================= */

.item:nth-child(1)  { animation-delay: .02s; }
.item:nth-child(2)  { animation-delay: .04s; }
.item:nth-child(3)  { animation-delay: .06s; }
.item:nth-child(4)  { animation-delay: .08s; }
.item:nth-child(5)  { animation-delay: .10s; }
.item:nth-child(6)  { animation-delay: .12s; }
.item:nth-child(7)  { animation-delay: .14s; }
.item:nth-child(8)  { animation-delay: .16s; }
.item:nth-child(9)  { animation-delay: .18s; }
.item:nth-child(10) { animation-delay: .20s; }
.item:nth-child(11) { animation-delay: .22s; }
.item:nth-child(12) { animation-delay: .24s; }


/* =========================================================
   FOLDER
   ========================================================= */

.folder {
    cursor:
        pointer;
}


/* =========================================================
   FOLDER ICON
   ========================================================= */

.folder-icon {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    margin-bottom:
        14px;

    border-radius:
        12px;

    /*
     * Warm secondary color.
     * Deliberately different from the blue primary accent.
     */

    background:
        linear-gradient(
            145deg,
            rgba(244,184,96,.13),
            rgba(244,184,96,.045)
        );

    border:
        1px solid
        rgba(244,184,96,.16);

    font-size:
        25px;

    filter:
        drop-shadow(
            0 5px 12px rgba(0,0,0,.25)
        );

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        filter .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.folder:hover .folder-icon {
    transform:
        translateY(-2px)
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            rgba(244,184,96,.20),
            rgba(244,184,96,.075)
        );

    border-color:
        rgba(244,184,96,.28);

    filter:
        drop-shadow(
            0 8px 17px rgba(0,0,0,.35)
        );
}


/* =========================================================
   VIDEO ICON
   ========================================================= */

.video-icon {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    margin-bottom:
        13px;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(139,156,255,.13),
            rgba(139,156,255,.045)
        );

    border:
        1px solid
        rgba(139,156,255,.16);

    font-size:
        23px;

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        filter .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.item:not(.folder):hover .video-icon {
    transform:
        translateY(-2px)
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            rgba(139,156,255,.21),
            rgba(139,156,255,.075)
        );

    border-color:
        rgba(139,156,255,.30);

    filter:
        drop-shadow(
            0 6px 14px rgba(100,115,220,.20)
        );
}


/* =========================================================
   FILE NAME
   ========================================================= */

.name {
    position:
        relative;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.45;

    word-break:
        break-word;

    overflow-wrap:
        anywhere;

    letter-spacing:
        -.01em;
}


/* =========================================================
   FILE META
   ========================================================= */

.meta {
    position:
        relative;

    margin-top:
        7px;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.4;

    transition:
        color .2s ease;
}

.item:hover .meta {
    color:
        #8d95a5;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.actions {
    position:
        relative;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        auto;

    padding-top:
        15px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty {
    grid-column:
        1 / -1;

    padding:
        60px 20px;

    color:
        var(--text-muted);

    text-align:
        center;

    font-size:
        14px;

    animation:
        empty-enter .35s ease both;
}


/* =========================================================
   NAVIGATION TRANSITION
   ========================================================= */

#browser {
    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .16s ease,
        transform .16s cubic-bezier(.2,.8,.2,1);
}

#browser.page-exit {
    opacity:
        0;

    transform:
        translateY(5px);
}

#browser.page-enter {
    opacity:
        0;

    transform:
        translateY(-5px);
}


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

@keyframes card-enter {

    from {
        opacity:
            0;

        transform:
            translateY(10px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}

@keyframes empty-enter {

    from {
        opacity:
            0;

        transform:
            translateY(5px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}