/* ===== Menu FX: выпадающие панели шапки (только десктоп) ===== */
@property --mfx-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes mfx-spin {
    to { --mfx-angle: 360deg; }
}

@keyframes mfx-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(206, 146, 72, .45), 0 0 14px -4px rgba(206, 146, 72, .6); }
    50%      { box-shadow: inset 0 0 0 1px rgba(206, 146, 72, .8), 0 0 26px -2px rgba(206, 146, 72, .85); }
}

@media (min-width: 1181px) {

    /* --- триггер --- */
    .animenu__nav > li > a.animenu__nav__hasDropdown {
        position: relative;
        padding-right: 40px;
        transition: color .3s;
    }

    .animenu__nav > li > .animenu__nav__hasDropdown:before {
        right: 18px;
        transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .animenu__nav > li > a.animenu__nav__hasDropdown:after {
        content: '';
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 5px;
        height: 1px;
        background: linear-gradient(90deg, transparent, #ce9248, transparent);
        transform: scaleX(0);
        transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .animenu__nav > li:hover > .animenu__nav__hasDropdown:before,
    .animenu__nav > li:focus-within > .animenu__nav__hasDropdown:before {
        transform: rotate(180deg);
    }

    .animenu__nav > li:hover > a.animenu__nav__hasDropdown:after,
    .animenu__nav > li:focus-within > a.animenu__nav__hasDropdown:after {
        transform: scaleX(1);
    }

    /* --- панель --- */
    .animenu__nav__dropdown.mfx-panel {
        --mx: 50%;
        --my: 0%;
        position: absolute;
        top: calc(100% + 14px);
        left: 0;
        width: 400px;
        min-width: 0;
        margin: 0;
        padding: 8px;
        border-radius: 18px;
        background:
            radial-gradient(360px circle at var(--mx) var(--my), rgba(206, 146, 72, .13), transparent 65%),
            linear-gradient(180deg, rgba(24, 21, 18, .92), rgba(10, 9, 8, .94));
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px) scale(.97);
        transform-origin: 30% 0;
        clip-path: inset(0 0 100% 0 round 18px);
        transition:
            clip-path .45s cubic-bezier(.2, .8, .2, 1) .12s,
            transform .45s cubic-bezier(.2, .8, .2, 1) .12s,
            opacity .3s .12s,
            visibility 0s .6s;
    }

    .animenu__nav > li:hover > .mfx-panel,
    .animenu__nav > li:focus-within > .mfx-panel {
        opacity: 1;
        visibility: visible;
        transform: none;
        clip-path: inset(-30px -80px -120px -80px round 18px);
        transition:
            clip-path .6s cubic-bezier(.2, .8, .2, 1),
            transform .6s cubic-bezier(.2, .8, .2, 1),
            opacity .25s,
            visibility 0s;
    }

    /* бегущая золотая кромка */
    .mfx-panel:before {
        content: '';
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: conic-gradient(from var(--mfx-angle),
            rgba(206, 146, 72, 0) 0deg,
            rgba(206, 146, 72, .9) 50deg,
            rgba(255, 228, 186, 1) 70deg,
            rgba(206, 146, 72, 0) 130deg,
            rgba(255, 255, 255, .07) 200deg,
            rgba(206, 146, 72, 0) 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        animation: mfx-spin 7s linear infinite;
        pointer-events: none;
        z-index: 2;
    }

    /* мостик над зазором, чтобы hover не рвался */
    .mfx-panel:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
    }

    .mfx-panel--grid {
        width: 620px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
    }

    /* --- пункты --- */
    .animenu__nav__dropdown.mfx-panel > li {
        position: relative;
        z-index: 1;
        display: block;
        width: auto;
        border: 0;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .2s, transform .3s;
    }

    .animenu__nav > li:hover > .mfx-panel > li,
    .animenu__nav > li:focus-within > .mfx-panel > li {
        opacity: 1;
        transform: none;
        transition:
            opacity .4s calc(var(--i, 0) * 40ms + 120ms),
            transform .55s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 40ms + 120ms);
    }

    .mfx-panel--grid > li.mfx-head,
    .mfx-panel--grid > li.mfx-feature,
    .mfx-panel--grid > li.mfx-foot {
        grid-column: 1 / -1;
    }

    .mfx-panel > li:first-child > a:after,
    .mfx-panel > li > a:after {
        content: none;
    }

    .mfx-panel a {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        color: #b9b2a9;
        font-family: Montserrat, sans-serif;
        outline: none;
    }

    .mfx-panel a:hover,
    .mfx-panel a:focus-visible,
    .mfx-panel a.active {
        background: transparent;
        border-color: transparent;
    }

    .mfx-ico {
        flex: none;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        color: #ce9248;
        background: rgba(255, 255, 255, .035);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
        transition: background .35s, color .35s, box-shadow .35s, transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .mfx-ico svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mfx-panel a:hover .mfx-ico,
    .mfx-panel a:focus-visible .mfx-ico {
        color: #1a1108;
        background: #ce9248;
        box-shadow: 0 0 26px -2px rgba(206, 146, 72, .75);
        transform: rotate(-8deg) scale(1.06);
    }

    .mfx-txt {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        padding-top: 1px;
    }

    .mfx-txt b {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        color: #ece7e0;
        transition: color .3s;
    }

    .mfx-txt small {
        font-size: 12px;
        line-height: 1.4;
        color: #847d74;
        transition: color .3s;
    }

    .mfx-panel a:hover .mfx-txt small,
    .mfx-panel a:focus-visible .mfx-txt small {
        color: #cdb89c;
    }

    /* текущая страница */
    .mfx-panel a.active .mfx-txt b {
        color: #ce9248;
    }

    .mfx-panel a.active .mfx-ico {
        animation: mfx-pulse 2.4s ease-in-out infinite;
    }

    /* флагманская карточка */
    .mfx-feature a {
        align-items: center;
        margin-top: 4px;
        background: linear-gradient(100deg, rgba(206, 146, 72, .10), rgba(206, 146, 72, 0) 70%);
        box-shadow: inset 0 0 0 1px rgba(206, 146, 72, .18);
    }

    .mfx-feature .mfx-ico {
        color: #1a1108;
        background: radial-gradient(circle at 30% 25%, #f3d3a3, #ce9248 60%, #8a5a22);
        box-shadow: 0 0 22px -4px rgba(206, 146, 72, .8);
    }

    /* шапка панели */
    .mfx-panel > li.mfx-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 10px 14px 8px;
        font-family: Montserrat, sans-serif;
        font-size: 10.5px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: #6f6961;
    }

    .mfx-head em {
        font-style: normal;
        letter-spacing: .08em;
        color: #ce9248;
    }

    /* подвал панели */
    .mfx-panel > li.mfx-foot {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .mfx-foot a {
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        font-size: 13px;
        color: #ce9248;
    }

    .mfx-foot svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .4s cubic-bezier(.2, .8, .2, 1);
    }

    .mfx-foot a:hover svg,
    .mfx-foot a:focus-visible svg {
        transform: translateX(6px);
    }

    /* перетекающая подсветка */
    .animenu__nav__dropdown.mfx-panel > li.mfx-glider {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: 0;
        height: 0;
        border-radius: 12px;
        pointer-events: none;
        opacity: 0;
        transform: none;
        background: linear-gradient(135deg, rgba(206, 146, 72, .20), rgba(206, 146, 72, .05));
        box-shadow: inset 0 0 0 1px rgba(206, 146, 72, .32), 0 10px 40px -12px rgba(206, 146, 72, .55);
        transition:
            translate .4s cubic-bezier(.2, .8, .2, 1),
            width .4s cubic-bezier(.2, .8, .2, 1),
            height .4s cubic-bezier(.2, .8, .2, 1),
            opacity .25s;
    }

    .animenu__nav__dropdown.mfx-panel > li.mfx-glider.is-on {
        opacity: 1;
        transition:
            translate .4s cubic-bezier(.2, .8, .2, 1),
            width .4s cubic-bezier(.2, .8, .2, 1),
            height .4s cubic-bezier(.2, .8, .2, 1),
            opacity .25s;
    }

    .mfx-glider.no-anim {
        transition: none !important;
    }
}

@media (min-width: 1181px) and (prefers-reduced-motion: reduce) {
    .mfx-panel,
    .mfx-panel *,
    .mfx-panel:before {
        animation: none !important;
        transition-duration: .01s !important;
        transition-delay: 0s !important;
    }
}

/* ===== Мобильное меню (до 1180px): стеклянная панель и раскрывающиеся разделы ===== */
@media (max-width: 1180px) {
    .animenu ul.animenu__nav.animenu__nav--active {
        left: 0;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 90px);
        margin: 8px 0 0;
        padding: 6px;
        overflow-y: auto;
        border: 1px solid rgba(206, 146, 72, .35);
        border-radius: 16px;
        background: rgba(12, 11, 10, .97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 30px 60px -20px #000;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(206, 146, 72, .5) transparent;
    }

    .animenu .animenu__nav > li {
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .animenu .animenu__nav > li:last-child {
        border-bottom: 0;
    }

    .animenu .animenu__nav > li:first-child > a:after {
        content: none;
    }

    .animenu .animenu__nav > li > a {
        padding: 15px 14px;
        border-radius: 10px;
        background: transparent;
        color: #f1e3d3;
        font-family: Montserrat, Arial, sans-serif;
        font-size: 16px;
        font-weight: 600;
    }

    .animenu .animenu__nav > li > a:hover,
    .animenu .animenu__nav > li > a:focus-visible {
        background: rgba(255, 255, 255, .04);
        color: #fff;
    }

    /* стрелка раздела */
    .animenu .animenu__nav > li > .animenu__nav__hasDropdown:before {
        right: 18px;
        border-width: 5px;
        border-bottom: 0;
        border-top-color: #ce9248;
        transition: transform .3s;
    }

    .animenu .animenu__nav > li.mfx-open > .animenu__nav__hasDropdown:before {
        transform: rotate(180deg);
    }

    /* раскрывающиеся разделы */
    .animenu .animenu__nav--active .animenu__nav__dropdown.mfx-panel {
        display: none;
        padding: 0 4px 8px;
        background: transparent;
    }

    .animenu .animenu__nav--active > li.mfx-open > .animenu__nav__dropdown.mfx-panel {
        display: block;
    }

    .mfx-panel > li.mfx-glider,
    .mfx-panel > li.mfx-head,
    .mfx-txt small {
        display: none !important;
    }

    .animenu .mfx-panel > li {
        width: 100%;
        border: 0;
    }

    .animenu .mfx-panel a {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 9px 10px;
        border-radius: 10px;
        background: transparent;
        color: #b9b2a9;
        font-family: Montserrat, Arial, sans-serif;
        font-size: 15px;
        line-height: 1.3;
    }

    .animenu .mfx-panel a:hover,
    .animenu .mfx-panel a:focus-visible {
        background: rgba(206, 146, 72, .12);
        color: #fff;
    }

    .animenu .mfx-panel a.active {
        background: rgba(206, 146, 72, .14);
        color: #f3d3a3;
    }

    .mfx-ico {
        flex: none;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        color: #ce9248;
        background: rgba(255, 255, 255, .04);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    }

    .mfx-ico svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .animenu .mfx-panel a.active .mfx-ico {
        color: #1a1108;
        background: #ce9248;
    }

    .mfx-txt b {
        font-weight: 500;
    }

    .animenu .mfx-foot a {
        justify-content: space-between;
        margin-top: 4px;
        color: #ce9248;
        font-weight: 600;
    }

    .mfx-foot svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}