/* ============================================================
   Apple-style mobile sidebar animation — MOBILE ONLY (≤991px)
   ============================================================ */
@media screen and (max-width: 991px) {

    /* Sidebar base: off-screen left with smooth transitions */
    .senbee-wrap .senbee-sidebar {
        transform: translateX(-100%);
        left: 0 !important;               /* override the calc() negative left */
        opacity: 0;
        visibility: hidden;
        transition:
            transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
            opacity   0.38s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s linear 0.38s;    /* hide after animation */
        will-change: transform, opacity;
        z-index: 1025;                     /* below navbar fixed-top (1030) */
    }

    /* RTL support */
    [dir=rtl] .senbee-wrap .senbee-sidebar {
        transform: translateX(100%);
        left: auto !important;
        right: 0 !important;
    }

    /* Sidebar open state */
    .sidebar-open .senbee-wrap .senbee-sidebar {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition:
            transform  0.42s cubic-bezier(0.32, 0.72, 0, 1),
            opacity    0.42s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s linear 0s;       /* show immediately */
    }

    /* Backdrop overlay */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity    0.38s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s linear 0.38s;
        z-index: 1020;
        cursor: pointer;
    }

    .sidebar-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity    0.42s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s linear 0s;
    }

    /* Subtle scale on main content when sidebar is open */
    .senbee-wrap .senbee-content {
        transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .sidebar-open .senbee-wrap .senbee-content {
        transform: scale(0.97);
        transform-origin: right center;
    }

    /* Nav items stagger fade-in when sidebar opens */
    .sidebar-open .senbee-sidebar .nav-item {
        animation: sidebarItemFadeIn 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(1)  { animation-delay: 0.04s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(2)  { animation-delay: 0.07s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(3)  { animation-delay: 0.10s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(4)  { animation-delay: 0.13s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(5)  { animation-delay: 0.16s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(6)  { animation-delay: 0.19s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(7)  { animation-delay: 0.22s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(8)  { animation-delay: 0.25s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(9)  { animation-delay: 0.28s; }
    .sidebar-open .senbee-sidebar .nav-item:nth-child(10) { animation-delay: 0.31s; }

    @keyframes sidebarItemFadeIn {
        from {
            opacity: 0;
            transform: translateX(-12px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}