/* =========================================================================
   nav-menu.css — ハンバーガーメニュー（内田指示・2026-08-09）
   -------------------------------------------------------------------------
   それまでは .bs-header__nav がテキストリンクのまま常駐していたが、
   （1）モバイルでは max-width:720px で display:none になり、
       ナビが丸ごと消えていた（.bs-dock はアクセス導線だけの代役）
   （2）板が奥から手前へ受け渡る「回廊」というこのサイトの主題に対して、
       テキストが横に並ぶだけのヘッダーは平凡すぎた
   の2つを、章立てのフルスクリーンメニューで直す。

   ★「3D表現にあった」の中身：メニューを開くと、奥にいる常駐canvas
   （.bs-canvas--page）自身がぼける・少し引く。UIを上に重ねるのではなく、
   世界の側が一歩下がって道を譲る＝奥行きのある場所にメニューが開く感覚にする。
   ========================================================================= */

.bs-header__actions { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); }

/* ---------- ハンバーガー本体 ---------- */
.bs-burger {
  position: relative; z-index: 160;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.bs-burger:hover { border-color: var(--ink); }
.bs-burger__box { position: relative; width: 20px; height: 14px; }
.bs-burger__line {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .45s var(--ease), opacity .25s var(--ease), width .3s var(--ease);
}
.bs-burger__line:nth-child(1) { top: 0; }
.bs-burger__line:nth-child(2) { top: 6px; }
.bs-burger__line:nth-child(3) { top: 12px; }
/* 開いた状態：3本 → ×。上下が中央で交差し、真ん中は消える */
.bs-burger[aria-expanded="true"] .bs-burger__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.bs-burger[aria-expanded="true"] .bs-burger__line:nth-child(2) {
  opacity: 0; width: 40%;
}
.bs-burger[aria-expanded="true"] .bs-burger__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- 世界の側が一歩引く（メニューが開いているあいだ） ----------
   ★キャンバスDOM要素そのものへの transform/filter。Three.jsの描画解像度には
   関与しない（見た目だけの演出）ので安全に足せる。 */
.bs-canvas--page {
  transition: filter .7s var(--ease), transform .7s var(--ease), opacity .7s var(--ease);
}
html.is-nav-open .bs-canvas--page {
  filter: blur(9px) brightness(.62) saturate(.85);
  transform: scale(1.035);
}
html.is-nav-open .bs-script,
html.is-nav-open .bs-header__logo {
  filter: blur(2.5px);
  transition: filter .7s var(--ease);
}
/* ★モバイルの常駐CTA（.bs-dock）はヘッダーと同じ z-index:60。ぼかすだけだと
   メニューの上に乗ったまま押せてしまうので、開いているあいだは消す。 */
html.is-nav-open .bs-dock { display: none; }
html.is-nav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html.is-nav-open .bs-canvas--page,
  html.is-nav-open .bs-script { filter: none; transform: none; }
}

/* ---------- オーバーレイ ----------
   ★ z-index は .bs-header（plates.css で60）より低い40にする。
   ヘッダーの高さは薄い帯なので視界は塞がないが、ハンバーガー本体が
   常にメニューより手前に残る＝開いた後も同じボタンで閉じられる
   （逆にすると、開いた瞬間に閉じるボタンがメニューの下へ隠れて押せなくなる：
   2026-08-09 実測で発覚・修正）。 */
.bs-nav-menu {
  position: fixed; inset: 0; z-index: 40;
  visibility: hidden; opacity: 0;
  display: flex; align-items: stretch; justify-content: flex-end;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.bs-nav-menu.is-open {
  visibility: visible; opacity: 1;
  transition: opacity .5s var(--ease);
}
.bs-nav-menu__veil {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(26px) saturate(1.05);
  -webkit-backdrop-filter: blur(26px) saturate(1.05);
}
.bs-nav-menu__panel {
  position: relative; z-index: 1;
  width: min(30rem, 92vw); height: 100%;
  margin-left: auto;
  padding: clamp(96px, 12vh, 140px) clamp(28px, 4vw, 56px) clamp(28px, 4vh, 48px);
  display: flex; flex-direction: column; justify-content: space-between;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  transform: translateX(28px);
  opacity: 0;
  transition: transform .6s var(--ease) .05s, opacity .6s var(--ease) .05s;
}
.bs-nav-menu.is-open .bs-nav-menu__panel {
  transform: translateX(0); opacity: 1;
}

.bs-nav-menu__list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
.bs-nav-menu__list li {
  opacity: 0; transform: translateY(16px);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  /* 板が奥から手前へ受け渡るのと同じ「1つずつ現れる」間合い */
  transition-delay: calc(var(--i) * 55ms + 60ms);
}
.bs-nav-menu.is-open .bs-nav-menu__list li { opacity: 1; transform: translateY(0); }

.bs-nav-menu__list a {
  position: relative;
  display: flex; align-items: baseline; gap: 1.1em;
  padding: 0.85em 0.1em;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.bs-nav-menu__no {
  font-size: var(--t-meta); letter-spacing: 0.2em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bs-nav-menu__label {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  color: var(--ink);
  transition: transform .35s var(--ease), color .35s var(--ease);
}
/* ホバー／フォーカスで、火の粉の色の下線がすっと伸びる */
.bs-nav-menu__list a::after {
  content: ""; position: absolute; left: 0.1em; right: 0.1em; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.bs-nav-menu__list a:hover .bs-nav-menu__label,
.bs-nav-menu__list a:focus-visible .bs-nav-menu__label {
  transform: translateX(0.35em);
}
.bs-nav-menu__list a:hover::after,
.bs-nav-menu__list a:focus-visible::after { transform: scaleX(1); }

.bs-nav-menu__foot {
  opacity: 0; transform: translateY(10px);
  transition: transform .5s var(--ease) .38s, opacity .5s var(--ease) .38s;
  display: flex; flex-direction: column; gap: 0.9em;
}
.bs-nav-menu.is-open .bs-nav-menu__foot { opacity: 1; transform: translateY(0); }
.bs-nav-menu__note {
  font-size: var(--t-meta); color: var(--ink-dim); letter-spacing: 0.04em;
}

@media (max-width: 560px) {
  .bs-nav-menu__panel { width: 100%; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-nav-menu, .bs-nav-menu__panel, .bs-nav-menu__list li, .bs-nav-menu__foot,
  .bs-burger__line { transition: none !important; }
}