/* ================================================
   ATK Multi-Level Navigation — Animation Only
   ================================================ */

/* Wrapper: clip overflow so off-screen panels don't bleed */
.atk-nav {
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.atk-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* All levels share the same transition */
.atk-nav__level {
    width: 100%;
    transition: transform 0.35s ease;
}

/* Main level: in view by default */
.atk-nav__level--main {
    transform: translateX(0);
}

/* Main level: slid out to the left */
.atk-nav__level--main.atk-nav--hidden-left {
    transform: translateX(-100%);
}

/* Sub panels: hidden off-screen to the right by default */
.atk-nav__level--sub {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
}

/* Sub panel: slid into view */
.atk-nav__level--sub.atk-nav--visible {
    transform: translateX(0);
}