/*
 * Wasserverband Nord — menu motion
 * Version 1.2.5
 *
 * Dedicated animation layer. Keeps the original layout rules intact and
 * adds a calm branded off-canvas transition with reduced-motion support.
 */

:root {
    --wvn-menu-duration: 460ms;
    --wvn-menu-ease: cubic-bezier(.22, 1, .36, 1);
}

body.wvn-menu-open {
    padding-right: var(--wvn-scrollbar-compensation, 0px);
}

/* Burger -> close icon. The geometry matches the original 3-line XD symbol. */
.wvn-menu-toggle {
    position: relative;
    overflow: hidden;
}

.wvn-menu-toggle__icon {
    position: relative;
    display: block;
    width: 35px;
    height: 24px;
}

.wvn-menu-toggle__icon > span {
    position: absolute;
    left: 0;
    width: 35px;
    height: 3px;
    border-radius: 999px;
    background: var(--wvn-navy);
    transform-origin: center;
    transition:
        top 260ms var(--wvn-menu-ease),
        transform 360ms var(--wvn-menu-ease),
        opacity 180ms ease,
        width 300ms var(--wvn-menu-ease);
}

.wvn-menu-toggle__icon > span:nth-child(1) { top: 1px; }
.wvn-menu-toggle__icon > span:nth-child(2) { top: 10.5px; }
.wvn-menu-toggle__icon > span:nth-child(3) { top: 20px; }

.wvn-menu-toggle:hover .wvn-menu-toggle__icon > span:nth-child(2),
.wvn-menu-toggle:focus-visible .wvn-menu-toggle__icon > span:nth-child(2) {
    width: 26px;
}

.wvn-menu-toggle[aria-expanded="true"] .wvn-menu-toggle__icon > span:nth-child(1) {
    top: 10.5px;
    transform: rotate(45deg);
}

.wvn-menu-toggle[aria-expanded="true"] .wvn-menu-toggle__icon > span:nth-child(2) {
    width: 0;
    opacity: 0;
    transform: scaleX(0);
}

.wvn-menu-toggle[aria-expanded="true"] .wvn-menu-toggle__icon > span:nth-child(3) {
    top: 10.5px;
    transform: rotate(-45deg);
}

/* The menu remains in the DOM while closing so the reverse animation is visible. */
.wvn-menu {
    visibility: visible;
    pointer-events: none;
}

.wvn-menu.is-open {
    pointer-events: auto;
}

.wvn-menu__backdrop {
    opacity: 0;
    background: rgba(0, 29, 61, .46);
    -webkit-backdrop-filter: blur(0) saturate(.95);
    backdrop-filter: blur(0) saturate(.95);
    transition:
        opacity 360ms ease,
        -webkit-backdrop-filter var(--wvn-menu-duration) ease,
        backdrop-filter var(--wvn-menu-duration) ease;
}

.wvn-menu.is-open .wvn-menu__backdrop {
    opacity: 1;
    -webkit-backdrop-filter: blur(5px) saturate(.9);
    backdrop-filter: blur(5px) saturate(.9);
}

.wvn-menu__panel {
    overflow-x: hidden;
    background:
        linear-gradient(180deg, #fff 0%, #fff 72%, var(--wvn-light-blue) 145%);
    transform: translate3d(104%, 0, 0);
    box-shadow: -24px 0 80px rgba(0, 41, 83, 0);
    will-change: transform;
    transition:
        transform var(--wvn-menu-duration) var(--wvn-menu-ease),
        box-shadow var(--wvn-menu-duration) ease;
}

.wvn-menu.is-open .wvn-menu__panel {
    transform: translate3d(0, 0, 0);
    box-shadow: -24px 0 80px rgba(0, 41, 83, .2);
}

/* A restrained yellow reveal gives the motion a WV-Nord brand cue. */
.wvn-menu__panel::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 7px;
    height: 100%;
    background: var(--wvn-yellow);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 520ms 80ms var(--wvn-menu-ease);
    pointer-events: none;
}

.wvn-menu.is-open .wvn-menu__panel::before {
    transform: scaleY(1);
}

.wvn-menu__top,
.wvn-menu__list > li,
.wvn-menu__portal {
    opacity: 0;
    transform: translate3d(28px, 0, 0);
    filter: blur(2px);
    transition:
        opacity 260ms ease,
        transform 380ms var(--wvn-menu-ease),
        filter 300ms ease;
}

.wvn-menu.is-open .wvn-menu__top,
.wvn-menu.is-open .wvn-menu__list > li,
.wvn-menu.is-open .wvn-menu__portal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.wvn-menu.is-open .wvn-menu__top { transition-delay: 150ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(1) { transition-delay: 185ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(2) { transition-delay: 225ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(3) { transition-delay: 265ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(4) { transition-delay: 305ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(5) { transition-delay: 345ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(6) { transition-delay: 385ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(7) { transition-delay: 425ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(8) { transition-delay: 465ms; }
.wvn-menu.is-open .wvn-menu__list > li:nth-child(n+9) { transition-delay: 485ms; }
.wvn-menu.is-open .wvn-menu__portal { transition-delay: 500ms; }

/* On close, do not wait for the opening stagger in reverse. */
.wvn-menu:not(.is-open) .wvn-menu__top,
.wvn-menu:not(.is-open) .wvn-menu__list > li,
.wvn-menu:not(.is-open) .wvn-menu__portal {
    transition-delay: 0ms;
}

.wvn-menu__close {
    transition:
        transform 300ms var(--wvn-menu-ease),
        color 180ms ease,
        background-color 180ms ease;
}

.wvn-menu__close:hover,
.wvn-menu__close:focus-visible {
    color: var(--wvn-blue);
    transform: rotate(90deg);
}

.wvn-menu__list > li > a,
.wvn-menu__list ul a {
    position: relative;
}

.wvn-menu__list > li > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 11px;
    left: 0;
    height: 3px;
    background: var(--wvn-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--wvn-menu-ease);
}

.wvn-menu__list > li > a:hover::after,
.wvn-menu__list > li > a:focus-visible::after,
.wvn-menu__list > li.is-active > a::after {
    transform: scaleX(1);
}

/* Keep the existing active state but avoid a double underline. */
.wvn-menu__list .is-active > a {
    text-decoration: none;
}

@media (max-width: 767px) {
    :root {
        --wvn-menu-duration: 390ms;
    }

    .wvn-menu-toggle__icon,
    .wvn-menu-toggle__icon > span {
        width: 28px;
    }

    .wvn-menu-toggle__icon {
        height: 21px;
    }

    .wvn-menu-toggle__icon > span:nth-child(1) { top: 1px; }
    .wvn-menu-toggle__icon > span:nth-child(2) { top: 9px; }
    .wvn-menu-toggle__icon > span:nth-child(3) { top: 17px; }

    .wvn-menu-toggle[aria-expanded="true"] .wvn-menu-toggle__icon > span:nth-child(1),
    .wvn-menu-toggle[aria-expanded="true"] .wvn-menu-toggle__icon > span:nth-child(3) {
        top: 9px;
    }

    .wvn-menu__panel::before {
        width: 5px;
    }

    .wvn-menu__top,
    .wvn-menu__list > li,
    .wvn-menu__portal {
        transform: translate3d(20px, 0, 0);
    }

    .wvn-menu.is-open .wvn-menu__top { transition-delay: 110ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(1) { transition-delay: 135ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(2) { transition-delay: 165ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(3) { transition-delay: 195ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(4) { transition-delay: 225ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(5) { transition-delay: 255ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(6) { transition-delay: 285ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(7) { transition-delay: 315ms; }
    .wvn-menu.is-open .wvn-menu__list > li:nth-child(n+8) { transition-delay: 335ms; }
    .wvn-menu.is-open .wvn-menu__portal { transition-delay: 350ms; }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --wvn-menu-duration: 1ms;
    }

    .wvn-menu-toggle__icon > span,
    .wvn-menu__backdrop,
    .wvn-menu__panel,
    .wvn-menu__panel::before,
    .wvn-menu__top,
    .wvn-menu__list > li,
    .wvn-menu__portal,
    .wvn-menu__close,
    .wvn-menu__list > li > a::after {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        animation-duration: 1ms !important;
    }

    .wvn-menu__backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .wvn-menu__top,
    .wvn-menu__list > li,
    .wvn-menu__portal {
        filter: none;
    }
}