/* ============================================================
   МЕНЮ — барабан. ДВЕ РОДНЫЕ ФОРМЫ — ОДИН ХАРАКТЕР.

   Десктоп (≥800): боковой барабан у левого борта — 1/5 экрана,
   воздух справа, стрелка вровень со словом.

   Портрет (<800): экран — сцена. Вуаль приглушает дышащее
   полотно, слова крупно по центру, стрелка в верхнем левом
   углу — в один ряд с шапкой. Сцена принимает палец: тяга
   в любом месте крутит, чистый тап закрывает.

   РАЗДЕЛЕНИЕ СВОЙСТВ: выезд - transform якоря, магнетизм —
   transform кнопки. Стрелка магнитится в любом состоянии.
   ============================================================ */

/* — якорь: позиция, интро, выезд всей сборки — */
.menu-anchor{
  position:fixed;
  left:var(--mx);
  top:calc(50% - 24px);
  width:48px;height:48px;
  z-index:70;pointer-events:none;
  opacity:0;transform:translateX(-14px);
  transition:opacity var(--t-mid) var(--ease-out) .25s,
             transform var(--t-mid) var(--ease-out) .25s;
}
body.ready .menu-anchor{
  opacity:1;transform:none;
  /* возврат при закрытии — сразу, занавесом, без паузы */
  transition:opacity var(--t-mid) var(--ease-out) .25s,
             transform .6s var(--ease-io);
}
body.menu-open .menu-anchor{
  transform:translateX(var(--m-slide,150px));
  /* выезд — росчерк, почти без задержки */
  transition:opacity var(--t-mid) var(--ease-out) .25s,
             transform .65s var(--ease-out) .08s;
}

/* — кнопка: transform отдан магнетизму курсора — */
.menu-btn{
  position:relative;
  width:48px;height:48px;
  border:1px solid var(--cream-35);
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--cream);
  pointer-events:none;
  transition:transform .4s var(--ease-out),
             border-color .45s ease,
             opacity .4s ease;
}
body.ready .menu-btn{pointer-events:auto}
body.search-open .menu-btn,
body.cart-open   .menu-btn{opacity:0;pointer-events:none}

.menu-btn:hover{border-color:var(--cream-60)}
.menu-btn:hover .tip{opacity:.5}

.menu-arrow{display:grid;place-items:center;transition:transform .6s var(--ease-io)}
body.menu-open .menu-arrow{transform:rotate(180deg)}
.menu-arrow svg{transition:transform .35s var(--ease-out)}
.menu-btn:hover .menu-arrow svg{transform:translateX(3px)}

/* — барабан: при закрытии гаснет и уезжает к борту — */
.m-drum{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  visibility:hidden;opacity:0;transform:translateX(-28px);
  transition:opacity .3s ease,transform .3s var(--ease-io),visibility 0s linear .3s;
}
body.menu-open .m-drum{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .55s var(--ease-out) .12s,
             transform .6s var(--ease-out) .12s,
             visibility 0s;
}

/* — хребет: волосяная ось барабана — */
.m-spine{
  position:absolute;top:0;left:0;width:1px;
  background:linear-gradient(to bottom,transparent,var(--cream-35) 22%,var(--cream-35) 78%,transparent);
}

/* — слова: правый край к оси, под словом — подпись-шёпот — */
.m-item{
  position:absolute;left:0;top:0;
  padding:12px 24px;
  white-space:nowrap;text-align:right;
  color:var(--cream);
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  will-change:transform,opacity,filter;
}
.m-word{
  display:block;
  font-family:'Cormorant',serif;font-weight:300;
  font-size:clamp(1.75rem,5vw,3.7rem);line-height:1;
  letter-spacing:.01em;
  transition:letter-spacing .35s var(--ease-out);
}
.m-item:hover .m-word{letter-spacing:.06em}
.m-item.active .m-word{font-weight:400}
.m-note{
  display:block;margin-top:10px;
  white-space:normal;
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-60);
}
.m-item.chosen .m-word{animation:mPulse .4s var(--ease-io)}
@keyframes mPulse{
  0%{transform:scale(1);opacity:1}
  30%{transform:scale(1.08);opacity:.35}
  100%{transform:scale(1);opacity:1}
}

/* — ПОРТРЕТНАЯ ФОРМА: экран — сцена — */
@media (max-width:799px){
  /* стрелка — верхний левый угол, в ряд с шапкой */
  .menu-anchor{top:var(--my)}

  /* сцена: лёгкий подъём масштаба вместо выезда вбок */
  .m-drum{
    transform:scale(.985);
    transition:opacity .3s ease,transform .3s var(--ease-io),visibility 0s linear .3s;
  }
  body.menu-open .m-drum{
    pointer-events:auto;   /* сцена принимает палец: тяга и тап-закрытие */
    touch-action:none;
    transform:none;
    transition:opacity .5s var(--ease-out),
               transform .55s var(--ease-out),
               visibility 0s;
  }
  /* вуаль: полотно продолжает дышать сквозь */
  .m-drum::before{
    content:'';position:absolute;inset:0;
    background:rgba(194,61,0,.55);
  }

  .m-item{text-align:center;padding:14px 18px}
  .m-word{font-size:clamp(2.1rem,9vw,3.4rem)}
  .m-note{margin-top:12px;font-size:9.5px;letter-spacing:.18em}
}