/* === オープニング演出（和食処 玄場 版） === */
#opening{
  position:fixed; inset:0; z-index:100;
  background:#1F1208;
  display:grid; place-items:center;
  overflow:hidden;
  cursor:pointer;
  animation:op-fade-in .4s ease both;
}
#opening.closing{ animation:op-fade-out .6s ease both forwards; pointer-events:none; }
@keyframes op-fade-in { from{opacity:0} to{opacity:1} }
@keyframes op-fade-out { from{opacity:1} to{opacity:0; visibility:hidden} }

#opening .stage{
  position:relative;
  width:min(900px, 92vw);
  aspect-ratio: 16 / 10;
  display:grid; place-items:center;
}
#opening svg{ width:100%; height:100%; display:block; }

#opening .scene{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease, transform 1.2s ease; }
#opening .scene.show{ opacity:1; }
#opening .scene-exterior.zooming{ transform:scale(3) translate(0,4%); opacity:0; }

/* 雲（ゆっくり流れる） */
.op-cloud{ filter: drop-shadow(0 4px 8px rgba(60,80,100,.18)); }
.op-cloud-1{ animation: op-cloud-drift-1 60s linear infinite; }
.op-cloud-2{ animation: op-cloud-drift-2 80s linear infinite; }
.op-cloud-3{ animation: op-cloud-drift-3 70s linear infinite; }
@keyframes op-cloud-drift-1 {
  0%   { transform: translate(120px, 70px); }
  100% { transform: translate(1280px, 70px); }
}
@keyframes op-cloud-drift-2 {
  0%   { transform: translate(420px, 130px); }
  100% { transform: translate(1300px, 130px); }
}
@keyframes op-cloud-drift-3 {
  0%   { transform: translate(680px, 40px); }
  100% { transform: translate(1280px, 40px); }
}

/* 鳥（V字が空を横切る） */
.op-bird{ fill:none; stroke:#3B2818; stroke-linecap:round; }
.op-bird-1{ animation: op-bird-fly-1 14s linear infinite; }
.op-bird-2{ animation: op-bird-fly-2 16s linear infinite 2s; }
.op-bird-3{ animation: op-bird-fly-3 18s linear infinite 5s; }
@keyframes op-bird-fly-1 {
  0%   { transform: translate(-40px, 100px); }
  100% { transform: translate(960px, 60px); }
}
@keyframes op-bird-fly-2 {
  0%   { transform: translate(-40px, 150px); }
  100% { transform: translate(960px, 110px); }
}
@keyframes op-bird-fly-3 {
  0%   { transform: translate(-40px, 70px); }
  100% { transform: translate(960px, 130px); }
}
.op-bird path{ animation: op-bird-flap .35s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes op-bird-flap {
  0%,100% { transform: scaleY(1); }
  50%     { transform: scaleY(.45); }
}

/* 提灯のゆらめき */
.op-chochin{ animation: op-sway-tight 4s ease-in-out infinite; transform-origin:center top; transform-box:fill-box; }
@keyframes op-sway-tight {
  0%,100% { transform:rotate(-1.2deg); }
  50% { transform:rotate(1.2deg); }
}

/* 暖簾（外観）の風揺れ */
.op-noren-cloth{ animation: op-noren-wind 6s ease-in-out infinite; transform-origin:center top; transform-box:fill-box; }
@keyframes op-noren-wind {
  0%,100% { transform:skewX(-1deg); }
  50% { transform:skewX(1deg); }
}

/* 通行人 */
.op-walker{ animation: op-walk 16s linear infinite; }
@keyframes op-walk {
  0% { transform: translate(120px, 290px); }
  100% { transform: translate(900px, 290px); }
}
.op-walker-2{ animation: op-walk-back 20s linear infinite; }
@keyframes op-walk-back {
  0% { transform: translate(780px, 296px); }
  100% { transform: translate(-50px, 296px); }
}

/* 暖簾シーン：左右に開く */
.op-noren-left{ transition: transform 1.2s cubic-bezier(.5,.1,.3,1); }
.op-noren-right{ transition: transform 1.2s cubic-bezier(.5,.1,.3,1); }
.op-noren-left.open{ transform: translateX(-380px) skewY(-3deg); }
.op-noren-right.open{ transform: translateX(380px) skewY(3deg); }

/* お品書きがコトッと置かれる */
.op-menu-card{ opacity:0; transition:none; }
.op-menu-card.drop{
  animation: op-drop .65s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes op-drop {
  0%   { opacity:0; transform:translate(330px, 340px) rotate(-6deg) scale(.94); }
  60%  { opacity:1; transform:translate(308px, 364px) rotate(-1deg) scale(1.02); }
  100% { opacity:1; transform:translate(310px, 360px) rotate(-1.5deg) scale(1); }
}

/* 湯気 */
.op-steam{ animation: op-steam 3s ease-in-out infinite; transform-origin:center bottom; transform-box:fill-box; }
@keyframes op-steam {
  0% { opacity:.2; transform:translateY(4px); }
  50% { opacity:.7; transform:translateY(-4px); }
  100% { opacity:.2; transform:translateY(-12px); }
}

/* 吹き出し */
.op-bubble{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; }
.op-bubble.show{ opacity:1; transform:translateY(0); }

/* メニューパネル（画面いっぱい） */
#opening .menu-wrap{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .6s ease;
  background:#1F1208;
  z-index:20;
}
#opening .menu-wrap.show{ opacity:1; pointer-events:auto; }
#opening .menu-wrap .menu-inner{
  width:100%; height:100%; max-width:none;
  background:#F5E5C8;
  background-image: linear-gradient(180deg, #F8EDD0 0%, #E8D4A8 100%);
  border-radius:2px;
  padding:48px 56px 40px;
  border:1px solid #7C5028;
  box-shadow:
    0 0 0 6px #1F1208,
    0 0 0 7px #9C3828,
    0 0 0 14px #1F1208;
  position:relative;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  overflow:hidden;
}
#opening .menu-wrap .menu-inner::before{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(124,80,40,.4);
  border-radius:1px; pointer-events:none;
}
#opening .menu-title{
  font-family:"Noto Sans JP", serif;
  font-size:13px; letter-spacing:.5em;
  color:#7C5028; text-align:center; margin:0 0 6px;
}
#opening .menu-title-jp{
  font-family:"Noto Sans JP", serif;
  font-size:38px; font-weight:700; color:#1F1208; text-align:center; margin:0 0 6px;
  letter-spacing:.3em;
}
#opening .menu-sub{
  font-family:"Noto Sans JP", serif;
  font-size:14px; color:#7C5028; text-align:center; margin:0 0 28px;
  letter-spacing:.15em;
}
#opening .menu-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:10px; flex:1; overflow:auto;
  padding:8px 4px;
  position:relative;
  align-content:start;
}
#opening .menu-item{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:2px;
  background:transparent;
  border:1px solid rgba(124,80,40,.25);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s, background .15s;
  text-align:left;
  opacity:0; transform:translateY(8px);
  animation:op-item-in .4s ease forwards;
  font-family:"Noto Sans JP", serif;
}
#opening .menu-item:hover{
  border-color:#7C5028;
  background:rgba(124,80,40,.08);
  transform:translateY(-2px);
}
#opening .menu-item .num{
  font-family:"JetBrains Mono", monospace; font-size:12px;
  color:#7C5028;
  border:1px solid rgba(124,80,40,.4);
  border-radius:2px;
  padding:3px 8px;
  min-width:36px; text-align:center; flex-shrink:0;
}
#opening .menu-item .ttl{ font-size:15px; font-weight:500; color:#1F1208; line-height:1.4; }
@keyframes op-item-in { to { opacity:1; transform:translateY(0); } }

/* キャプション */
#opening .caption{
  position:absolute; left:0; right:0; bottom:32px;
  text-align:center; color:#FFFFFF;
  font-family:"Noto Sans JP", serif;
  font-size:22px; font-weight:600; letter-spacing:.2em;
  opacity:0; transition:opacity .5s ease;
  text-shadow:0 2px 12px rgba(0,0,0,.7), 0 0 32px rgba(0,0,0,.5);
}
#opening .caption.show{ opacity:1 }
#opening .caption .small{ display:block; font-size:13px; color:#E8C868; margin-top:8px; letter-spacing:.4em; font-style:italic; font-weight:400; }

/* スキップ */
#opening .skip-btn{
  position:absolute; top:20px; right:20px;
  background:rgba(255,255,255,.85); border:1px solid #7C5028;
  color:#1F1208; padding:8px 14px; border-radius:2px;
  font-family:"Noto Sans JP", serif; font-size:13px;
  cursor:pointer; transition:background .15s;
  backdrop-filter:blur(4px);
  z-index:10;
}
#opening .skip-btn:hover{ background:#FFFFFF; border-color:#3B2410; }

/* リプレイボタン（ヘッダ） */
.replay-opening{
  border:1px solid var(--line-strong); background:#fff; border-radius:var(--radius);
  padding:6px 10px; font-size:13px; cursor:pointer; color:var(--ink-soft);
  font-family:inherit; margin-left:8px;
}
.replay-opening:hover{ border-color:var(--accent); color:var(--accent-ink); }

@media (max-width:600px){
  #opening .menu-grid{ grid-template-columns:1fr 1fr; }
  #opening .caption{ font-size:17px; bottom:20px; padding:0 20px; }
  #opening .menu-wrap{ padding:12px; }
  #opening .menu-wrap .menu-inner{ padding:24px 20px 20px; }
  #opening .menu-title-jp{ font-size:26px; }
}