/* Ported from Unlimited Elements "Liquid Full Screen Menu" as used on https://ixmenu.com/glera/ (GPL). */

.mt-liquid {
    --current-calc-size-value: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

/* Hamburger button */
.mt-liquid .uc_liquid_hamburger {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mt-menu-text, #fff);
    font: inherit;
    cursor: pointer;
    position: relative;
    z-index: 10001;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: all .3s;
}

.mt-liquid__icon {
    display: block;
    position: relative;
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
}

.mt-liquid__icon::after {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    border: 2px solid var(--mt-accent, #c9a24b);
    animation: mtLiquidHamburgerBorder 1.2s infinite;
}

.mt-liquid .is-opened-navi .mt-liquid__icon::after {
    border: 2px solid;
}

.mt-liquid__label {
    letter-spacing: .1em;
    text-transform: uppercase;
}

[dir=rtl] .mt-liquid__label {
    letter-spacing: 0;
}

@keyframes mtLiquidHamburgerBorder {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    80% {
        transform: scale(1.6);
    }
    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

.mt-liquid .hamburger__line {
    display: block;
    width: calc(var(--current-calc-size-value) - 56.9%);
    height: 2px;
    overflow: hidden;
    position: absolute;
    z-index: 10;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}

.mt-liquid .hamburger__line-in {
    display: block;
    width: calc(var(--current-calc-size-value) + 71.45%);
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}

.mt-liquid .hamburger__line-in::before,
.mt-liquid .hamburger__line-in::after {
    width: calc(var(--current-calc-size-value) - 43.52%);
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    background: var(--mt-menu-text, #fff);
    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
    transition-property: transform;
}

.mt-liquid .hamburger__line-in::before {
    left: calc(-1 * var(--current-calc-size-value) - -10%);
}

.mt-liquid .hamburger__line-in::after {
    left: 0;
}

.mt-liquid .hamburger__line--01,
.mt-liquid .hamburger__line--02,
.mt-liquid .hamburger__line--03,
.mt-liquid .hamburger__line--cross01,
.mt-liquid .hamburger__line--cross02 {
    left: calc(var(--current-calc-size-value) - 72.3%);
}

.mt-liquid .hamburger__line--01 {
    top: calc(var(--current-calc-size-value) - 62.05%);
}

.mt-liquid .hamburger__line--02,
.mt-liquid .hamburger__line--cross01,
.mt-liquid .hamburger__line--cross02 {
    top: calc(var(--current-calc-size-value) - 52.3%);
}

.mt-liquid .hamburger__line--03 {
    top: calc(var(--current-calc-size-value) - 41.56%);
}

/* The close (X) lines only show while the menu is open. */
.mt-liquid .hamburger__line--cross01,
.mt-liquid .hamburger__line--cross02 {
    opacity: 0;
    transition-property: opacity;
}

.mt-liquid .is-opened-navi .hamburger__line--cross01,
.mt-liquid .is-opened-navi .hamburger__line--cross02 {
    opacity: 1;
    transition-delay: .25s;
}

.mt-liquid .hamburger__line--cross01 {
    transform: rotate(45deg);
}

.mt-liquid .hamburger__line--cross02 {
    transform: rotate(-45deg);
}

.mt-liquid .hamburger__line-in--cross01,
.mt-liquid .hamburger__line-in--cross02 {
    transform: translateX(-33.3%);
}

.mt-liquid .hamburger__line-in--01 { transition-delay: .2s; }
.mt-liquid .hamburger__line-in--02 { transition-delay: .25s; }
.mt-liquid .hamburger__line-in--03 { transition-delay: .3s; }
.mt-liquid .hamburger__line-in--02::before,
.mt-liquid .hamburger__line-in--02::after { transition-delay: .05s; }
.mt-liquid .hamburger__line-in--03::before,
.mt-liquid .hamburger__line-in--03::after { transition-delay: .1s; }
.mt-liquid .hamburger__line-in--cross01 { transition-delay: 0s; }
.mt-liquid .hamburger__line-in--cross02 { transition-delay: .05s; }
.mt-liquid .hamburger__line-in--cross02::before,
.mt-liquid .hamburger__line-in--cross02::after { transition-delay: .1s; }

/* Hover: lines slide out, crosses stay put */
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in::before,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in::after {
    transform: translateX(200%);
}

.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--cross01::after,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--cross02::after {
    opacity: 0;
}

.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--01::before,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--01::after,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--02::before,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--02::after,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--03::before,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--03::after {
    transition-duration: 1s;
}

.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--cross01::before,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--cross01::after,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--cross02::before,
.mt-liquid .uc_liquid_hamburger:hover .hamburger__line-in--cross02::after {
    transition-duration: 0s;
}

/* Opened state: lines out, cross in */
.mt-liquid .is-opened-navi .hamburger__line--01,
.mt-liquid .is-opened-navi .hamburger__line--02,
.mt-liquid .is-opened-navi .hamburger__line--03 {
    opacity: 0;
}

.mt-liquid .is-opened-navi .hamburger__line-in--01,
.mt-liquid .is-opened-navi .hamburger__line-in--02,
.mt-liquid .is-opened-navi .hamburger__line-in--03 {
    transform: translateX(33.3%);
}

.mt-liquid .is-opened-navi .hamburger__line-in--cross01,
.mt-liquid .is-opened-navi .hamburger__line-in--cross02 {
    transform: translateX(0);
}

.mt-liquid .is-opened-navi .hamburger__line-in--01 { transition-delay: 0s; }
.mt-liquid .is-opened-navi .hamburger__line-in--02 { transition-delay: .05s; }
.mt-liquid .is-opened-navi .hamburger__line-in--03 { transition-delay: .1s; }
.mt-liquid .is-opened-navi .hamburger__line-in--cross01 { transition-delay: .25s; }
.mt-liquid .is-opened-navi .hamburger__line-in--cross02 { transition-delay: .3s; }

.mt-liquid .is-opened-navi:hover .hamburger__line-in--cross01::before,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--cross01::after,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--cross02::before,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--cross02::after {
    transition-duration: 1s;
}

.mt-liquid .is-opened-navi:hover .hamburger__line-in--01::before,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--01::after,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--02::before,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--02::after,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--03::before,
.mt-liquid .is-opened-navi:hover .hamburger__line-in--03::after {
    transition-duration: 0s;
}

/* Liquid overlay layers */
.mt-liquid .shape-overlays {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.mt-liquid .shape-overlays.is-opened {
    pointer-events: auto;
}

.mt-liquid .shape-overlays__path:nth-of-type(1) { fill: var(--mt-accent, #c9a24b); fill-opacity: .32; }
.mt-liquid .shape-overlays__path:nth-of-type(2) { fill: var(--mt-accent, #c9a24b); fill-opacity: .5; }
.mt-liquid .shape-overlays__path:nth-of-type(3) { fill: var(--mt-accent, #c9a24b); fill-opacity: .32; }
.mt-liquid .shape-overlays__path:nth-of-type(4) { fill: var(--mt-menu-bg, #000); fill-opacity: .95; }

/* Menu */
.mt-liquid .global-menu {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    visibility: hidden;
}

.mt-liquid.uc-menu-opened .global-menu {
    z-index: 10000;
    visibility: visible;
}

.mt-liquid .global-menu-inner {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 5rem 1rem 2rem;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .3s .8s;
}

.mt-liquid.uc-menu-opened .global-menu-inner {
    opacity: 1;
}

/* margin:auto centres a short list and still lets a tall one scroll from the top */
.mt-liquid .uc_liquid_menu_wrap {
    margin: auto;
}

.mt-liquid .global-menu__wrap {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mt-liquid .menu-item {
    display: block;
    margin: .25em 0;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .1s ease-out, opacity .1s ease-out;
}

.mt-liquid .menu-item.is-opened {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform .3s ease, opacity .3s ease;
    transition-delay: 1.2s;
}

.mt-liquid .menu-item.is-opened:nth-of-type(1) { transition-delay: .75s; }
.mt-liquid .menu-item.is-opened:nth-of-type(2) { transition-delay: .8s; }
.mt-liquid .menu-item.is-opened:nth-of-type(3) { transition-delay: .85s; }
.mt-liquid .menu-item.is-opened:nth-of-type(4) { transition-delay: .9s; }
.mt-liquid .menu-item.is-opened:nth-of-type(5) { transition-delay: .95s; }
.mt-liquid .menu-item.is-opened:nth-of-type(6) { transition-delay: 1s; }
.mt-liquid .menu-item.is-opened:nth-of-type(7) { transition-delay: 1.05s; }
.mt-liquid .menu-item.is-opened:nth-of-type(8) { transition-delay: 1.1s; }
.mt-liquid .menu-item.is-opened:nth-of-type(9) { transition-delay: 1.15s; }

.mt-liquid .menu-item a {
    color: var(--mt-menu-text, #fff);
    font-size: clamp(1.75rem, 6vw, 3.5rem);
    line-height: 1.2;
    text-decoration: none;
    transition: color .2s;
}

.mt-liquid .menu-item a:hover,
.mt-liquid .menu-item a:focus-visible {
    color: var(--mt-accent, #c9a24b);
}

@media (prefers-reduced-motion: reduce) {
    .mt-liquid *,
    .mt-liquid *::before,
    .mt-liquid *::after {
        animation: none !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}