/* ============ НАВИГАЦИЯ ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-block:var(--navpad);
  /* бренд стоит на той же сетке, что и контент (макс. колонка 1440) */
  padding-inline:max(var(--gut),calc((100% - 1440px)/2 + var(--gut)));
  transition:padding .45s var(--ease),transform .45s var(--ease)}
/* стеклянная панель выезжает следом за шапкой */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,38,45,.86),rgba(11,29,36,.72));
  backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 14px 44px rgba(3,14,19,.42);
  transform:translateY(-101%);opacity:0;
  transition:transform .55s var(--ease),opacity .4s var(--ease)}
.nav.stuck::before{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.nav,.nav::before{transition:none}}
.brand{display:block;line-height:1}
/* трекинг снят с макета — нулевой */
.brand .k{display:block;font-weight:800;font-size:var(--brandh);color:var(--mint2);
  letter-spacing:0;line-height:1;transition:text-shadow var(--fast)}
.brand:hover .k{text-shadow:0 0 26px rgba(187,255,222,.4)}
/* ===== НАВИГАЦИЯ: отдельный элемент, но на одной оси с брендом ===== */
.navdock{
  --nav-e:cubic-bezier(.32,.72,.26,1);
  --mgap:clamp(10px,1vw,16px);                    /* гамбургер ↔ список */
  --gw:clamp(250px,32vw,500px);                   /* подложка и блик: ширина */
  --gh:clamp(240px,26vw,350px);                   /* …и высота от верха экрана */
  position:fixed;z-index:90;
  /* правый край — тот же, что у колонки контента */
  --rightoff:max(var(--gut),calc((100vw - 1440px)/2 + var(--gut)));
  right:var(--rightoff);
  /* центр кнопки совпадает с центром строки «К-433» */
  top:calc(var(--navpad) + (var(--brandh) - var(--bsize))/2);
  width:var(--bsize);height:var(--bsize)}

.burger{position:relative;z-index:2;width:100%;height:100%;
  border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.burger .bl{position:absolute;width:min(58%,26px);height:2px;border-radius:2px;background:var(--mint);
  filter:drop-shadow(0 1px 5px rgba(8,20,25,.7));
  transition:transform .5s var(--nav-e),opacity .3s var(--nav-e),background var(--fast)}
.burger .bl:nth-child(1){transform:translateY(calc(var(--bsize) * -.17))}
.burger .bl:nth-child(3){transform:translateY(calc(var(--bsize) *  .17))}
.burger:hover .bl{background:#fff}
/* открыто — крест */
.burger[aria-expanded="true"] .bl:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] .bl:nth-child(2){opacity:0;transform:scaleX(.25)}
.burger[aria-expanded="true"] .bl:nth-child(3){transform:rotate(-45deg)}

/* ---- список: выпадает под кнопкой, по правому краю ---- */
.menu{position:absolute;top:calc(100% + var(--mgap));right:0;width:max-content;
  display:flex;flex-direction:column;align-items:flex-end;gap:clamp(12px,1.3vw,20px);
  padding:clamp(10px,1vw,15px) 0 clamp(4px,.5vw,8px);pointer-events:none;
  --ox:calc(100% - var(--bsize)/2);
  --oy:calc(-1 * (var(--mgap) + var(--bsize)/2));
  clip-path:circle(0% at var(--ox) var(--oy));
  transition:clip-path .72s var(--nav-e) .18s}
.menu.open{pointer-events:auto;clip-path:circle(170% at var(--ox) var(--oy));
  transition:clip-path .86s var(--nav-e) 0s}
.menu a{position:relative;white-space:nowrap;
  font-size:clamp(13px,1.34vw,20px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mint);padding-bottom:5px;text-shadow:0 2px 16px rgba(8,20,25,.65);
  opacity:0;transform:translateX(24px);filter:blur(7px);
  transition:opacity .5s var(--nav-e),transform .72s var(--nav-e),
             filter .5s var(--nav-e),color var(--fast)}
.menu.open a{opacity:1;transform:none;filter:blur(0)}
/* открытие — сверху вниз */
.menu.open a:nth-of-type(1){transition-delay:.14s,.14s,.14s,0s}
.menu.open a:nth-of-type(2){transition-delay:.22s,.22s,.22s,0s}
.menu.open a:nth-of-type(3){transition-delay:.30s,.30s,.30s,0s}
/* закрытие — снизу вверх, круг схлопывается следом */
.menu a:nth-of-type(1){transition-delay:.12s,.12s,.12s,0s}
.menu a:nth-of-type(2){transition-delay:.06s,.06s,.06s,0s}
.menu a:nth-of-type(3){transition-delay:0s,0s,0s,0s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--white);transition:right .34s var(--ease)}
.menu a:hover,.menu a.active{color:var(--white)}
.menu a:hover::after,.menu a.active::after{right:0}

/* ---- мятная волна по раскрытию: по подложке, от верха экрана ---- */
.sweep{position:fixed;z-index:-1;top:0;right:0;width:var(--gw);height:var(--gh);
  pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 34%,rgba(187,255,222,.22) 50%,transparent 66%);
  background-size:260% 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 34%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%),
             linear-gradient(90deg,transparent 0,#000 34%);
  mask-composite:intersect}
.navdock.open .sweep{animation:sweep .95s var(--nav-e) .1s}
@keyframes sweep{0%{opacity:0;background-position:140% 0}22%{opacity:1}100%{opacity:0;background-position:-70% 0}}

/* ---- выброс «чернил» из кнопки ---- */
.ink{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(circle,rgba(187,255,222,.5),rgba(187,255,222,.16) 46%,transparent 72%)}
.navdock.open .ink{animation:ink .95s var(--nav-e) forwards}
@keyframes ink{0%{opacity:.9;transform:scale(1)}60%{opacity:.32}100%{opacity:0;transform:scale(22)}}

/* ---- матовая подложка под списком, без чётких границ ---- */
.navglass{position:fixed;z-index:-1;pointer-events:none;opacity:0;
  top:0;right:0;width:var(--gw);height:var(--gh);
  background:linear-gradient(180deg,rgba(10,27,34,.74),rgba(10,27,34,.3) 56%,rgba(10,27,34,0));
  backdrop-filter:blur(20px) saturate(115%);-webkit-backdrop-filter:blur(20px) saturate(115%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 34%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%),
             linear-gradient(90deg,transparent 0,#000 34%);
  mask-composite:intersect;
  /* центр круга — центр кнопки, отсчёт от верха экрана */
  --ox:calc(100% - var(--rightoff) - var(--bsize)/2);
  --oy:calc(var(--navpad) + var(--brandh)/2);
  clip-path:circle(0% at var(--ox) var(--oy));
  transition:opacity .5s var(--nav-e) .16s,clip-path .78s var(--nav-e) .16s}
.navdock.open .navglass{opacity:1;clip-path:circle(150% at var(--ox) var(--oy));
  transition:opacity .5s var(--nav-e) 0s,clip-path .9s var(--nav-e) 0s}

@media (prefers-reduced-motion:reduce){
  .burger .bl,.menu,.menu a,.navglass{transition:none}
  .menu,.menu.open{clip-path:none}
  .navdock.open .ink,.navdock.open .sweep{animation:none}
}