/* 生成物：menu-demo.css から採用案 03 だけを抜き出したもの（build/demo_menu.py build_production_assets）。
   ブラッシュアップは menu-demo.css 側で行い、python3 -m build.build_site で作り直す。 */
/* ============================================================
   Auguri! ─ 全画面メニュー 3 案（Q3・デモ）
   ------------------------------------------------------------
   ・3 案とも同じ HTML（.mn）を使い、body の data-menu="01|02|03" で見た目を切り替える
   ・座標は 1920 基準（--s 追従）。縦方向は画面の高さに合わせて中央寄せ
   ・開閉：.mn.is-open。prefers-reduced-motion では即時表示
   ・色・書体・罫はサイトのトークンのみ（新しい色は使わない）
   ============================================================ */

/* ── 共通の器 ─────────────────────────────── */
.mn { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.mn.is-open { visibility: visible; pointer-events: auto; }
.mn__bg { position: absolute; inset: 0; }
.mn__in { position: relative; width: calc(1920 * var(--s)); height: 100%; margin-inline: auto; }
.mn__in > * { position: absolute; }

/* 上部：ロゴと Close（ヘッダーと同じ座標。Menu ボタンがそのまま × に変わる） */
.mn__logo { left: calc(50 * var(--s)); top: calc(27 * var(--s)); width: calc(140 * var(--s)); height: calc(66 * var(--s)); }
.mn__logo svg { display: block; width: 100%; height: 100%; }
.mn__close { left: calc(1800 * var(--s)); top: 0; width: calc(120 * var(--s)); height: calc(120 * var(--s)); cursor: pointer; }
.mn__close-l1, .mn__close-l2 {
  position: absolute; left: calc(28 * var(--s)); width: calc(64 * var(--s)); height: 1px; background: currentColor;
  transform-origin: 50% 50%;
}
.mn__close-l1 { top: calc(48.82 * var(--s)); transform: rotate(45deg) scaleX(.72); }
.mn__close-l2 { top: calc(48.82 * var(--s)); transform: rotate(-45deg) scaleX(.72); }
.mn__close-label {
  position: absolute; left: calc(40.43 * var(--s)); top: calc(var(--s) * (78.34 - 8 - 16 * var(--k-cormorant-16, var(--k-cormorant))));
  font-family: var(--ff-en-display-md); font-weight: var(--fw-en-md); font-size: calc(16 * var(--s)); line-height: calc(16 * var(--s)); letter-spacing: .05em;
}
.mn__hline { left: 0; top: calc(120.05 * var(--s)); width: 100%; height: 1px; background: currentColor; transform: scaleY(.5); transform-origin: 0 0; }

/* ナビ：本体（案ごとに配置が変わる） */
.mn__nav { left: 0; right: 0; top: calc(121 * var(--s)); bottom: 0; }
.mn__list { margin: 0; padding: 0; list-style: none; position: absolute; }
.mn__item a { display: block; color: inherit; text-decoration: none; }
.mn__ja { font-family: var(--ff-jp-display); font-weight: var(--fw-jp-display); font-feature-settings: "palt"; }
.mn__en { font-family: var(--ff-en-display); letter-spacing: .12em; }
.mn__num { font-family: var(--ff-en-display); letter-spacing: .08em; }
.mn__desc { font-family: var(--ff-jp-body); letter-spacing: .05em; }

/* 店舗情報（3 案共通の文言・NAP は単一ソース） */
.mn__nap { font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); line-height: calc(30 * var(--s)); letter-spacing: .05em; }
.mn__nap p { margin: 0; }
.mn__links { font-family: var(--ff-en-display); font-size: calc(16 * var(--s)); line-height: calc(36 * var(--s)); letter-spacing: .05em; }
.mn__links a { display: inline-flex; align-items: center; gap: calc(10 * var(--s)); }
.mn__links a svg { width: calc(14 * var(--s)); height: calc(14 * var(--s)); }
.mn__links a span.jp { font-family: var(--ff-jp-body); font-size: calc(12 * var(--s)); letter-spacing: .05em; opacity: .7; }

/* 今いるページ */
.mn__item a[aria-current="page"] .mn__ja { opacity: .45; }

/* ── 開閉モーションの土台（案ごとに上書き） ── */
.mn__bg { opacity: 0; transition: opacity .35s var(--e-out); }
.mn.is-open .mn__bg { opacity: 1; }
.mn__reveal { opacity: 0; transform: translateY(calc(10 * var(--s))); transition: opacity .5s var(--e-out), transform .6s var(--e-out); }
.mn.is-open .mn__reveal { opacity: 1; transform: none; }
.mn.is-open .mn__reveal:nth-child(1) { transition-delay: .18s; }
.mn.is-open .mn__reveal:nth-child(2) { transition-delay: .24s; }
.mn.is-open .mn__reveal:nth-child(3) { transition-delay: .30s; }
.mn.is-open .mn__reveal:nth-child(4) { transition-delay: .36s; }
.mn.is-open .mn__reveal:nth-child(5) { transition-delay: .42s; }
.mn__logo, .mn__close, .mn__hline, .mn__aside, .mn__foot { opacity: 0; transition: opacity .4s var(--e-out) .3s; }
.mn.is-open .mn__logo, .mn.is-open .mn__close, .mn.is-open .mn__hline, .mn.is-open .mn__aside, .mn.is-open .mn__foot { opacity: 1; }
/* 閉じるときは全体を素早く消す */
.mn.is-closing .mn__bg, .mn.is-closing .mn__reveal, .mn.is-closing .mn__logo, .mn.is-closing .mn__close, .mn.is-closing .mn__hline, .mn.is-closing .mn__aside, .mn.is-closing .mn__foot {
  transition-duration: .25s; transition-delay: 0s;
}

/* ============================================================
   03 余白 ─ セージの面に、中央の軸
   Reservation 帯の色（--c-sage）。白文字。中央に 1 本の縦罫が下り、その上に 5 項目
   ============================================================ */
[data-menu="03"] .mn { color: var(--c-white); }
[data-menu="03"] .mn__bg { background: var(--c-sage); }
[data-menu="03"] .mn__list { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
[data-menu="03"] .mn__item { height: calc(120 * var(--s)); }
[data-menu="03"] .mn__item a { display: inline-flex; flex-direction: column; align-items: center; gap: calc(14 * var(--s)); padding: calc(10 * var(--s)) calc(40 * var(--s)); background: var(--c-sage); }
[data-menu="03"] .mn__en { font-size: calc(13 * var(--s)); line-height: 1; letter-spacing: .24em; opacity: .85; }
[data-menu="03"] .mn__ja { font-size: calc(44 * var(--s)); line-height: 1; letter-spacing: .12em; transition: letter-spacing .5s var(--e-out); }
[data-menu="03"] .mn__item a:hover .mn__ja, [data-menu="03"] .mn__item a:focus-visible .mn__ja { letter-spacing: .2em; }
[data-menu="03"] .mn__num, [data-menu="03"] .mn__desc, [data-menu="03"] .mn__arrow { display: none; }
[data-menu="03"] .mn__en { order: -1; }
[data-menu="03"] .mn__ja { white-space: nowrap; }
[data-menu="03"] .mn__axis { left: calc(959.5 * var(--s)); top: calc(121 * var(--s)); bottom: 0; width: 1px; background: currentColor; transform: scaleX(.5) scaleY(0); transform-origin: 0 0; transition: transform 1.1s var(--e-out) .1s; }
[data-menu="03"] .mn.is-open .mn__axis { transform: scaleX(.5) scaleY(1); }
[data-menu="03"] .mn__aside, [data-menu="03"] .mn__foot-sig { display: none; }
[data-menu="03"] .mn__foot { left: calc(240 * var(--s)); right: calc(240 * var(--s)); bottom: calc(56 * var(--s)); display: flex; justify-content: space-between; align-items: baseline; }
[data-menu="03"] .mn__foot .mn__nap { display: flex; gap: calc(40 * var(--s)); line-height: 1; }
[data-menu="03"] .mn__foot .mn__links { display: flex; gap: calc(40 * var(--s)); line-height: 1; }
[data-menu="03"] .mn__reveal { transform: translateY(calc(16 * var(--s))); }
[data-menu="03"] .mn.is-open .mn__reveal:nth-child(1) { transition-delay: .40s; }
[data-menu="03"] .mn.is-open .mn__reveal:nth-child(2) { transition-delay: .48s; }
[data-menu="03"] .mn.is-open .mn__reveal:nth-child(3) { transition-delay: .56s; }
[data-menu="03"] .mn.is-open .mn__reveal:nth-child(4) { transition-delay: .64s; }
[data-menu="03"] .mn.is-open .mn__reveal:nth-child(5) { transition-delay: .72s; }

/* 01・02 では foot の NAP を隠す／出すの整理 */
[data-menu="01"] .mn__rail, [data-menu="03"] .mn__rail { display: none; }

/* ── 動きを減らす設定 ── */
@media (prefers-reduced-motion: reduce) {
  .mn *, .mn *::before, .mn *::after { transition: none !important; }
}