/* ============================================
   Slide Panel JS States — Compact
   ============================================ */

body.bd-menu-open { overflow: hidden; }

/* Overlay fade */
.bd-panel-overlay.is-visible {
    animation: bdFadeIn 0.2s ease;
}

/* Stagger — menu items slide from right */
.bd-slide-panel.is-open .bd-panel-menu > li {
    animation: bdSlideItem 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(1) { animation-delay: 0.05s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(2) { animation-delay: 0.1s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(3) { animation-delay: 0.15s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(4) { animation-delay: 0.2s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(5) { animation-delay: 0.25s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(6) { animation-delay: 0.3s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(7) { animation-delay: 0.35s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(8) { animation-delay: 0.4s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(9) { animation-delay: 0.45s; }
.bd-slide-panel.is-open .bd-panel-menu > li:nth-child(10) { animation-delay: 0.5s; }

/* Sub-menu items stagger (nested) */
.bd-slide-panel.is-open .sub-menu.is-open > li {
    animation: bdSlideSub 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.bd-slide-panel.is-open .sub-menu.is-open > li:nth-child(1) { animation-delay: 0.05s; }
.bd-slide-panel.is-open .sub-menu.is-open > li:nth-child(2) { animation-delay: 0.1s; }
.bd-slide-panel.is-open .sub-menu.is-open > li:nth-child(3) { animation-delay: 0.15s; }
.bd-slide-panel.is-open .sub-menu.is-open > li:nth-child(4) { animation-delay: 0.2s; }
.bd-slide-panel.is-open .sub-menu.is-open > li:nth-child(5) { animation-delay: 0.25s; }
.bd-slide-panel.is-open .sub-menu.is-open > li:nth-child(6) { animation-delay: 0.3s; }

@keyframes bdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bdSlideItem { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bdSlideSub { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }

.bd-dark-toggle.is-dark {
    background: var(--bd-primary);
    color: var(--bd-text-on-primary);
    border-color: var(--bd-primary);
}

html { transition: background-color 0.3s ease, color 0.3s ease; }