/* Menuja me ekran te plote: sfondi zbret si perde, lidhjet ngrihen nje nga nje.
   Hapet/mbyllet nga js/header-sticky.js me klasen html.stema-menu-open. */

:root {
    --menu-ease: cubic-bezier(.77, 0, .18, 1);
    --menu-open-time: .8s;
    --menu-close-time: .6s;
}

/* Paneli eshte gjithmone ne DOM; e fshehim me clip-path ne vend te display:none. */
#menu-panel,
#menu-panel.menu--boxed {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #171717 !important;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transition:
        clip-path var(--menu-close-time) var(--menu-ease) .25s,
        -webkit-clip-path var(--menu-close-time) var(--menu-ease) .25s,
        visibility 0s linear calc(var(--menu-close-time) + .25s);
}

html.stema-menu-open #menu-panel {
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    transition:
        clip-path var(--menu-open-time) var(--menu-ease),
        -webkit-clip-path var(--menu-open-time) var(--menu-ease),
        visibility 0s;
}

/* Lidhjet: secila ngrihet nga poshte brenda nje maske. */
#menu-panel nav ul.links li {
    overflow: hidden;
    padding: .06em 0;
}

#menu-panel nav ul.links li a {
    display: inline-block;
    transform: translateY(115%);
    transition:
        transform .45s var(--menu-ease),
        font-size .3s,
        color .3s;
}

html.stema-menu-open #menu-panel nav ul.links li a {
    transform: translateY(0);
    transition:
        transform .9s cubic-bezier(.16, 1, .3, 1),
        font-size .3s,
        color .3s;
}

html.stema-menu-open #menu-panel nav ul.links li:nth-child(1) a { transition-delay: .35s, 0s, 0s; }
html.stema-menu-open #menu-panel nav ul.links li:nth-child(2) a { transition-delay: .43s, 0s, 0s; }
html.stema-menu-open #menu-panel nav ul.links li:nth-child(3) a { transition-delay: .51s, 0s, 0s; }
html.stema-menu-open #menu-panel nav ul.links li:nth-child(4) a { transition-delay: .59s, 0s, 0s; }
html.stema-menu-open #menu-panel nav ul.links li:nth-child(5) a { transition-delay: .67s, 0s, 0s; }

/* Rrjetet sociale, logoja dhe X dalin pasi kane hyre lidhjet. */
#menu-panel .socialnav,
#menu-panel #nav-logo,
#menu-panel #nav-close {
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}

#menu-panel .socialnav {
    transform: translateY(20px);
}

html.stema-menu-open #menu-panel .socialnav {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease .75s, transform .6s cubic-bezier(.16, 1, .3, 1) .75s;
}

html.stema-menu-open #menu-panel #nav-logo,
html.stema-menu-open #menu-panel #nav-close {
    opacity: 1;
    transition: opacity .4s ease .3s;
}

/* X rrotullohet lehte kur kalon mausin. */
#menu-panel #nav-close:hover {
    transform: rotate(90deg);
}

/* Per perdoruesit qe kane zgjedhur me pak levizje ne sistem. */
@media (prefers-reduced-motion: reduce) {
    #menu-panel,
    html.stema-menu-open #menu-panel,
    #menu-panel nav ul.links li a,
    html.stema-menu-open #menu-panel nav ul.links li a,
    #menu-panel .socialnav,
    #menu-panel #nav-logo,
    #menu-panel #nav-close {
        transition: none !important;
        transition-delay: 0s !important;
    }
}