#sidebar {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: left center;
    will-change: width, transform;
}

#sidebar.sidebar-expanding {
    animation: sidebarExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#sidebar.sidebar-collapsing {
    animation: sidebarCollapse 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes sidebarExpand {
    0% {
        width: 4rem; /* w-16 */
        transform: scale(0.98);
    }
    50% {
        transform: scale(1.01);
    }
    100% {
        width: 20rem; /* w-80 */
        transform: scale(1);
    }
}

@keyframes sidebarCollapse {
    0% {
        width: 20rem; /* w-80 */
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        width: 4rem; /* w-16 */
        transform: scale(1);
    }
}

.sidebar-content-fade-out {
    animation: fadeOutSlideLeft 0.2s ease-out forwards;
}

.sidebar-content-fade-in {
    animation: fadeInSlideRight 0.3s ease-out 0.2s forwards;
    opacity: 0;
}

@keyframes fadeOutSlideLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

@keyframes fadeInSlideRight {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-toggle-icon {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-toggle-icon.rotating {
    animation: iconRotate 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes iconRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

#main-content {
    transition: margin-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /*will-change: margin-left, transform;*/
}

@media (max-width: 1023px) {
    .sidebar {
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    .sidebar.mobile-opening {
        animation: mobileSlideIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .sidebar.mobile-closing {
        animation: mobileSlideOut 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    @keyframes mobileSlideIn {
        0% {
            transform: translateX(-100%);
            opacity: 0.8;
        }
        50% {
            transform: translateX(-10%);
            opacity: 0.9;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes mobileSlideOut {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        50% {
            transform: translateX(-10%);
            opacity: 0.9;
        }
        100% {
            transform: translateX(-100%);
            opacity: 0.8;
        }
    }

    .sidebar .sidebar-content {
        transition: opacity 0.2s ease-in-out 0.1s;
    }

    .sidebar.mobile-opening .sidebar-content {
        animation: fadeInUp 0.4s ease-out 0.1s both;
    }

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

@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        width: 280px !important;
    }

    .sidebar.w-80 {
        width: 280px !important;
    }

    .sidebar.sidebar-expanding,
    .sidebar.sidebar-collapsing {
        transition-duration: 0.4s;
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: 100vw !important;
        max-width: 320px;
    }

    .sidebar.mobile-opening,
    .sidebar.mobile-closing {
        animation-duration: 0.3s;
    }

    .sidebar-content-fade-in,
    .sidebar-content-fade-out {
        animation-duration: 0.15s;
    }
}

#sidebar-overlay {
    transition: opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;
}

#sidebar-overlay.overlay-fade-in {
    animation: overlayFadeIn 0.3s ease-out forwards;
}

#sidebar-overlay.overlay-fade-out {
    animation: overlayFadeOut 0.3s ease-out forwards;
}

@keyframes overlayFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes overlayFadeOut {
    0% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

#mobile-sidebar-toggle {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#mobile-sidebar-toggle:hover {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#mobile-sidebar-toggle.button-pulse {
    animation: buttonPulse 0.6s ease-out;
}

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}

.nav-item {
    transition: all 0.2s ease-out;
}

.nav-items-stagger .nav-item {
    opacity: 0;
    transform: translateX(-20px);
}

.nav-items-stagger .nav-item:nth-child(1) { animation: navItemSlideIn 0.3s ease-out 0.1s forwards; }
.nav-items-stagger .nav-item:nth-child(2) { animation: navItemSlideIn 0.3s ease-out 0.15s forwards; }
.nav-items-stagger .nav-item:nth-child(3) { animation: navItemSlideIn 0.3s ease-out 0.2s forwards; }
.nav-items-stagger .nav-item:nth-child(4) { animation: navItemSlideIn 0.3s ease-out 0.25s forwards; }

@keyframes navItemSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

#export-progress-section {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#export-progress-section.progress-slide-in {
    animation: progressSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#export-progress-section.progress-slide-out {
    animation: progressSlideOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes progressSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
}

@keyframes progressSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar,
    #main-content,
    .sidebar-toggle-icon,
    .nav-item,
    #export-progress-section,
    #sidebar-overlay,
    #mobile-sidebar-toggle {
        animation: none !important;
        transition: none !important;
    }
}