/* Шапка: прозрачная, без стекла и линии, прикреплена к началу страницы и уезжает с первым экраном. Меню на узкой ширине: полноэкранная шторка. */

.site-header{
  position:absolute;           /* прикреплена к первому экрану и уезжает вместе с ним */
  top:0;left:0;right:0;
  z-index:var(--hdr-z);
  height:var(--header-h);
  background:transparent;      /* без стекла, без линии, без острова */
  padding-top:env(safe-area-inset-top);
}

.site-wrap{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--pad);
}

.site-logo{
  justify-self:start;
  display:block;
  height:34px;
  line-height:0;
  color:var(--color-text);
  text-decoration:none;
}
.site-logo svg{display:block;height:100%;width:auto}

.site-nav ul{display:flex;gap:clamp(18px,2.4vw,38px);flex-wrap:nowrap}
.site-nav a{
  position:relative;
  display:block;
  padding:8px 0;
  white-space:nowrap;
  text-decoration:none;
  color:var(--color-text);
}
.site-nav a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:3px;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.site-nav a[aria-current="page"]{color:var(--color-primary)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover::after{transform:scaleX(1)}
}

.site-contact{
  justify-self:end;
  font-weight:500;
  font-size:18px;
  line-height:1;
  text-decoration:none;
  color:var(--color-text);
  padding:10px 0;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.site-contact[aria-current="page"]{color:var(--color-primary);border-bottom-color:var(--color-primary)}
@media (hover:hover) and (pointer:fine){
  .site-contact:hover{border-bottom-color:var(--color-text)}
}

/* бургер: скрыт на десктопе, полоски по центру кнопки */
.site-burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  justify-self:end;
  background:transparent;border:0;padding:0;cursor:pointer;
  z-index:80;
  -webkit-tap-highlight-color:transparent;
}
.site-burger span{
  position:absolute;left:50%;top:50%;
  width:24px;height:2px;
  background:var(--color-text);
  transform:translate(-50%,calc(-50% - 4px));
  transition:transform .45s var(--ease-out),background-color .3s;
}
.site-burger span:nth-child(2){transform:translate(-50%,calc(-50% + 4px))}
.site-header.is-open .site-burger span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.site-header.is-open .site-burger span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

/* полноэкранная панель: открывается шторкой сверху, пункты поднимаются по одному */
.menu-panel{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--header-h) + 28px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background:var(--color-background);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  pointer-events:none;
  overflow-y:auto;overscroll-behavior:contain;
  transition:clip-path .7s var(--ease-out),visibility 0s linear .7s;
}
.site-header.is-open .menu-panel{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  pointer-events:auto;
  transition:clip-path .7s var(--ease-out),visibility 0s;
}
.menu-panel ul{display:grid;gap:4px}
.menu-panel li{overflow:clip}
.menu-panel li a{
  display:block;
  font-weight:800;
  font-size:clamp(40px,12vw,76px);
  line-height:1;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-decoration:none;
  padding:6px 0;
  transform:translateY(105%);
  transition:transform .6s var(--ease-out);
}
.site-header.is-open .menu-panel li a{transform:none}
.site-header.is-open .menu-panel li:nth-child(1) a{transition-delay:.12s}
.site-header.is-open .menu-panel li:nth-child(2) a{transition-delay:.17s}
.site-header.is-open .menu-panel li:nth-child(3) a{transition-delay:.22s}
.site-header.is-open .menu-panel li:nth-child(4) a{transition-delay:.27s}
.site-header.is-open .menu-panel li:nth-child(5) a{transition-delay:.32s}
.site-header.is-open .menu-panel li:nth-child(6) a{transition-delay:.37s}
.menu-panel a[aria-current="page"]{color:var(--color-primary)}
.menu-panel__foot{color:var(--color-text-muted);margin-top:40px}

@media (max-width:1100px){
  .site-wrap{grid-template-columns:1fr auto}
  .site-nav,.site-contact{display:none}
  .site-burger{display:block}
}

@media (prefers-reduced-motion:reduce){
  .menu-panel,.menu-panel li a,.site-burger span,.site-nav a::after{transition:none!important}
  .menu-panel li a{transform:none}
}