/* TRISITE CSS 4.2  */
/* (C) 2024 TRISITE */
/* Nav module       */

html.open body {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}
html.open.no-scroll body {
    overflow-y: auto;
}

.menu-trigger {
	position:fixed;
    width:100%;
    height:20px;
    background:var(--color-white);
    bottom:0;
    top:auto;
    z-index:11;
}

.menu-trigger[open]:not(.close) .main-menu li {
    animation:main-menu-view 0.6s ease-out var(--menu-li-order) 1 forwards;
}

.menu-trigger[open]:not(.close) .main-menu > figure {
    animation:main-img-view 0.8s ease-out 0.5s 1 forwards;
}

.menu-trigger[open].close .main-menu ul li {
    animation:main-menu-hide var(--transition) ease-out 0s 1 forwards;
}
.menu-trigger[open].close .main-menu ul > figure {
    animation:main-img-hide var(--transition) ease-out 0s 1 forwards;
}


.main-menu {
    position:fixed;
    overflow-x: hidden;
    overflow-y:auto;
    width:100%;
    height:calc(100dvh - 60px);
    padding:40px 0;
    left:0;
    top:0;
    z-index: 5;
}
.main-menu .main-menu-inner {
    width:calc(100% - 40px);
    max-width:300px;
    height:fit-content;
    margin:auto;
    top:50%;
    translate:0 -50%;
}

.main-menu ul {
    list-style: none;
    background:none;
    display:flex;
    flex-direction: column;
    gap:10px;
}
.main-menu ul li {
    opacity:0;
    left:100vw;
}
.main-menu ul li a {
    width:100%;
    padding:20px;
    font-size:1.4em;
    background:var(--color-white);
}
.main-menu .main ul li a {
    justify-content:flex-start;
}

@keyframes main-menu-view {
    0%{
        left:100vw;
        opacity: 0;
    }
    30%{
        left:20px;
        opacity: 1;
    }
    100%{
        left:0;
        opacity: 1;
    }
}
@keyframes main-menu-hide {
    0%{
        left:0;
        opacity: 1;
    }
    50%{
        left:20px;
        opacity: 1;
    }
    100%{
        left:100vw;
        opacity: 0;
    }
}


.menu-trigger summary {
    gap: calc(var(--trigger-size) / 12);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border:solid 4px var(--color-white);
    font-weight:bold;
    font-size:0.8em;

    width:calc(var(--trigger-size) + 40px);
    height:calc(var(--trigger-size) + 40px);
    padding: 20px;
    cursor: pointer;
    background: var(--color-trigger-bg);
    transition: var(--transition);
    box-shadow:var(--shadow);
    border-radius:50%;

    color: var(--color-trigger-fr);
    text-align: center;
    line-height: 1;

    position:absolute;
    left:calc(50% - calc((var(--trigger-size) / 2) + 20px));
    bottom:-10px;
    z-index: 30;
    display: flex;
}
.menu-trigger summary:hover {
    filter:brightness(var(--brightness));
}

.menu-trigger summary::-webkit-details-marker {
    display: none;
}
.menu-trigger summary > div {
    margin-bottom:2px;
}
.menu-trigger summary > div ,
.menu-trigger summary > span {
    flex: 1;
    width: 100%;
    max-height:80%;
    text-indent: -9000px;
}
.menu-trigger summary > ::before ,
.menu-trigger summary > ::after ,
.menu-trigger summary > div > span {
    content: '';
    left: 0;
    width: 100%;
    height: var(--trigger-bar);
    position: absolute;
    background: var(--color-trigger-fr);
    border-radius: calc(var(--radius-inner) / 2);
    transition: var(--transition);
}
.menu-trigger summary > span::before {
    top: calc(50% - (var(--trigger-bar) * 2));
}
.menu-trigger summary > span::after {
    bottom: calc(50% - (var(--trigger-bar) * 2));
}
.menu-trigger summary > div > span {
    top: calc(50% - (var(--trigger-bar) / 2));
}
.menu-trigger summary > div::before {
    top: 0;
}
.menu-trigger summary > div::after {
    bottom: 0;
}

.menu-trigger[open]:not(.close) summary ::before {
    top: 50%;
    opacity: 1;
    transform: translateY(-50%) rotate(140deg);
    background: var(--color-trigger-fr);
}
.menu-trigger[open]:not(.close) summary ::after {
    bottom: 50%;
    opacity: 1;
    transform: translateY(50%) rotate(-140deg);
    background: var(--color-trigger-fr);
}
.menu-trigger[open]:not(.close) summary > div > span {
    opacity: 0;
}


.menu-trigger + nav {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:var(--trigger-size);
    background:var(--color-dark-glass);
    z-index:10;
}
.menu-trigger + nav ul {
    margin:0 auto;
    padding:0;
    max-width:400px;
    list-style:none;
    display:flex;
    gap:10px;
    flex:1;
}
.menu-trigger + nav ul li {
    flex:1;
}
.menu-trigger + nav ul li a {
    color:var(--color-white);
    padding:10px;
    font-size:1.2em;
    display:block;
    text-align:center;
    display:flex;
    justify-content: center;
}
.menu-trigger + nav ul li:nth-of-type(2) {
    margin-right:calc((var(--trigger-size) / 2) + (var(--gap) / 2));
}
.menu-trigger + nav ul li:nth-of-type(3) {
    margin-left:calc((var(--trigger-size) / 2) + (var(--gap) / 2));
}


#nav-cover {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
    background: var(--color-dark-glass);
    backdrop-filter: blur(4px);
    will-change: opacity, backdrop-filter;
    display: none;
    z-index: 10;
}


@media ( max-width : 520px ){
    body > nav {
        padding:10px;
    }

    .main-menu .main-menu-inner {
        top:0;
        translate:0 0;
    }
}
@media ( max-width : 420px ){


}