@charset "UTF-8";
/* =============================================================================
 * intro.css ── 入店の演出（案A「餃子レイン」のローディングを本サイトへ移植）
 * -----------------------------------------------------------------------------
 * このファイルは「セッションの最初の1回」だけ読み込まれる（header.php が判断）。
 * 2回目以降の画面移動は base.css の .pl（行き先を出す軽い幕）が受け持つので、
 * ここは重くてよい。逆に、ここへ common な指定を書いてはいけない。
 *
 * 見せ方の方針（案Aから引き継ぎ）
 *   落として弾ませる派手さではなく「灯る」で見せる。
 *   ロゴは静かに浮かび、屋号は字間が詰まりながら現れ、炭火のゆらぎが背後を流れる。
 *   飛び道具は最後のアオリ（トス）だけに残す。
 *
 * 注意
 *   鍋と餃子の位置・傾き・影は intro.js が毎フレーム transform に書き込む。
 *   ここで transform を動かす CSS アニメーションを足すと上書き合戦になるので、
 *   .pan / .pan__gyo / .pan__shadow には「見た目（形・色・質感）」だけを持たせる。
 *   寸法（380x176 / 330x94 / transform-origin）は intro.js の定数と対になっている。
 * ========================================================================== */

/* JS が動く環境でだけ出す。JS が止まっている環境では最初から出さないので、
   幕が残って本文が読めなくなることがない（boot.js 側にも時間切れの保険あり）。 */
/* 演出のあいだは、画面の外側（スクロールバーの溝）も同じ暗さにする。
   演出は position: fixed なので溝の上には描けず、ここを塗らないと
   暗い画面の右端に白い筋が立つ。 */
html.js[data-load="intro"].is-loading { background-color: var(--intro-edge); }

.intro { display: none; }
html.js .intro {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  /* 中身が画面より広くなっても、列は画面幅で止める（minmax(0,...) が要る）。
     これが無いと、鍋の固定幅ぶん中身全体が右へずれる。 */
  grid-template-columns: minmax(0, 1fr);
  background: var(--intro-bg);
  cursor: pointer;
  overflow: hidden;
  /* 幕なので、下の本文へは触らせない（タップはスキップとして受ける） */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 背後をゆっくり流れる熱気。輪郭を持たせないので「動いている」ことだけが伝わる */
.intro::before, .intro::after {
  content: ''; position: absolute; left: 50%; top: 52%;
  width: 128vmax; height: 128vmax;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(255, 158, 60, .13), rgba(255, 158, 60, .04) 46%, transparent 72%);
  animation: introHaze 19s ease-in-out infinite alternate;
}
.intro::after {
  background: radial-gradient(closest-side, rgba(255, 201, 30, .09), transparent 66%);
  animation-duration: 27s; animation-direction: alternate-reverse;
}
@keyframes introHaze {
  0%   { transform: translate(-7%, 4%) scale(.9);    opacity: .55; }
  100% { transform: translate(6%, -5%) scale(1.12);  opacity: 1; }
}

/* 中身は画面幅を超えさせない。
   鍋（.intro__pan）は 380px の固定寸法なので、狭い画面ではこの箱より広くなる。
   箱ごと広がるのを許すと中身全体が右へずれるため、箱は画面に収め、
   鍋だけ中央を基準にはみ出させる（見た目は transform で縮めてある）。 */
.intro__in {
  position: relative; z-index: 1;
  max-width: 100%;
  text-align: center; padding-inline: 16px;
}

/* ------------------------------------------------------------------ ロゴが灯る */
.intro__logo {
  width: clamp(126px, 21vw, 186px); height: auto;
  border-radius: 50%;
  border: 2px solid var(--yellow);
  box-shadow: 0 0 0 1px rgba(255, 201, 30, .22), 0 0 64px rgba(255, 158, 60, .3);
  margin: 0 auto;
  opacity: 0;
}
.intro.is-play .intro__logo { animation: introLogo 1.15s cubic-bezier(.22, .8, .28, 1) .12s forwards; }
@keyframes introLogo {
  0%   { opacity: 0; transform: scale(.86); filter: brightness(.35); }
  100% { opacity: 1; transform: none;       filter: none; }
}

/* ロゴから静かに広がる一輪 */
.intro__ring {
  position: absolute; left: 50%; top: clamp(63px, 10.5vw, 93px);
  width: 20px; height: 20px;
  border: 1px solid var(--yellow); border-radius: 50%;
  translate: -50% -50%;
  opacity: 0; pointer-events: none;
}
.intro.is-play .intro__ring { animation: introRing 1.5s cubic-bezier(.16, .7, .2, 1) .5s; }
@keyframes introRing {
  0%   { opacity: .7; scale: 1; }
  100% { opacity: 0;  scale: 22; }
}

/* --------------------------------------------------------------- 屋号が現れる
   字間が詰まりながら浮かび上がる。にじみもスケールも使わない。
   はじまりの字間だけは画面幅で緩める（狭い画面で横にはみ出して切れるため）。 */
.intro__ttl {
  --ls0: .5em;
  --ls1: .12em;
  margin-top: 26px;
  font-family: var(--f-brush); font-weight: 400;
  /* 1行で見せる字なので、狭い画面では字の大きさも一緒に落とす
     （案Aの見た目は 900px 以上でそのまま出る） */
  font-size: clamp(19px, 6.2vw, 48px);
  line-height: 1.3; white-space: nowrap;
  color: var(--paper);
  letter-spacing: var(--ls0); text-indent: var(--ls0);   /* 字間ぶんの右余りを打ち消して中央に見せる */
  opacity: 0;
}
.intro__ttl small {
  display: block;
  font-family: var(--f-body); font-size: clamp(10.5px, 1.2vw, 12.5px); font-weight: 500;
  color: var(--yellow);
  letter-spacing: .52em; text-indent: .52em;
  margin-bottom: 15px;
  opacity: 0;
}
.intro.is-play .intro__ttl { animation: introTtl 1.5s cubic-bezier(.16, .75, .2, 1) .55s forwards; }
.intro.is-play .intro__ttl small { animation: introFade .9s ease .38s forwards; }
@keyframes introTtl {
  0%   { opacity: 0; letter-spacing: var(--ls0); text-indent: var(--ls0); }
  100% { opacity: 1; letter-spacing: var(--ls1); text-indent: var(--ls1); }
}

/* ロゴと屋号を分ける一本の細い金の罫。中央から引かれる */
.intro__rule {
  width: min(300px, 52vw); height: 1px; margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 30, .75), transparent);
  scale: 0 1; opacity: 0;
}
.intro.is-play .intro__rule { animation: introRule 1.1s cubic-bezier(.16, .75, .2, 1) .95s forwards; }
@keyframes introRule { to { scale: 1 1; opacity: 1; } }

@keyframes introFade { to { opacity: 1; } }

/* ============================================================ フライパンのアオリ
   じゅうじゅう焼く → アオリ（トス）で餃子が空へ飛び出す。
   寸法は intro.js の PAN_C / PIVOT / FIRE / BURNER と対。片方だけ変えるとズレる。 */
.intro__pan {
  position: relative; left: 50%;
  width: 380px; height: 176px;
  margin: 26px 0 0;
  translate: -50% 0;          /* 箱より広くても、必ず中央に置く */
  opacity: 0;
}
.intro.is-play .intro__pan { animation: introFade .5s ease 1.15s forwards; }

/* 鍋。斜め上から見おろした楕円。奥の内壁が立っているので、
   アオリのとき餃子がそこを駆け上がって飛ぶ、という形が読める。 */
.pan {
  position: absolute; left: 50%; bottom: 16px;
  width: 330px; height: 94px; margin-left: -165px;
  transform-origin: 275px 184px;   /* 手首のあたり。intro.js の PIVOT と同じ点 */
  will-change: transform;
}
.pan__handle {
  position: absolute; left: 96%; top: 26%;
  width: 150px; height: 15px;
  background: linear-gradient(#3D3529, #17130E);
  border: 2px solid #524936;
  border-radius: 3px 999px 999px 3px;
  transform: rotate(-11deg); transform-origin: left center;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .5);
}
.pan__body {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(#6D6253 0%, #3C3428 26%, #221D16 62%, #100D09 100%);
  box-shadow: 0 20px 34px rgba(0, 0, 0, .62), inset 0 -8px 14px rgba(255, 214, 140, .07);
}
/* 手前のふちに乗る金属のハイライト（厚みを見せる） */
.pan__body::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border-top: 2px solid rgba(255, 240, 200, .16);
  border-bottom: 3px solid rgba(255, 208, 128, .22);
}
/* 焼き面。ふちの内側が熱で照り返す */
.pan__face {
  position: absolute; left: 6.5%; top: 15%; width: 87%; height: 68%;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(64% 72% at 50% 26%, #332C22 0%, #221D16 58%, #120F0B 100%);
  box-shadow: inset 0 7px 15px rgba(0, 0, 0, .75), inset 0 -5px 10px rgba(255, 196, 96, .1);
}
/* 油膜のてかり */
.pan__face::before {
  content: ''; position: absolute; left: 12%; top: 26%; width: 46%; height: 40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 205, 110, .26), rgba(255, 205, 110, 0) 72%);
  filter: blur(3px);
}

/* コンロの炎。鍋の奥と手前の2枚に描き分けて、ふちに巻きつくように見せる。
   置き場と大きさは intro.js の FIRE と揃えること */
.pan__fire { position: absolute; left: -40px; top: -196px; width: 470px; height: 380px; pointer-events: none; }

.pan__shadows, .pan__gyos { position: absolute; inset: 0; }
/* 餃子が鍋に落とす影。飛び上がるほど大きく薄くぼける（高さの手がかり） */
.pan__shadow {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 76%);
  translate: -50% -50%;
  will-change: transform, opacity; pointer-events: none;
}
.pan__gyo {
  position: absolute; aspect-ratio: 1;
  translate: -50% -50%;            /* 中心合わせ。transform は物理が使うので触らない */
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45));
  will-change: transform, filter;
}

.pan__steam {
  position: absolute; bottom: 86px;
  width: 11px; height: 28px; border-radius: 999px;
  background: rgba(252, 250, 244, .34);
  filter: blur(4px);
  animation: panSteam 1.7s ease-in infinite;
}
.pan__steam:nth-of-type(1) { left: 66px; }
.pan__steam:nth-of-type(2) { left: 148px; animation-delay: .55s; }
.pan__steam:nth-of-type(3) { left: 226px; animation-delay: 1.1s; }
.pan__steam:nth-of-type(4) { left: 300px; animation-delay: .3s; }
@keyframes panSteam {
  0%   { opacity: 0;   translate: 0 0; }
  25%  { opacity: .85; }
  100% { opacity: 0;   translate: 8px -74px; }
}

/* トスの瞬間、鍋にたまっていた湯気が餃子と一緒に巻き上がる
   （animation 差し替えで forwards が消えるため opacity は明示で維持する） */
.intro.is-toss .intro__pan { opacity: 1; }
.intro.is-toss .pan__steam { animation: panBurst .6s ease-out forwards; }
@keyframes panBurst {
  0%   { opacity: .6; translate: 0 0;      scale: 1 1;     filter: blur(4px); }
  100% { opacity: 0;  translate: 0 -168px; scale: 2.8 4.2; filter: blur(13px); }
}

/* ============================================================ 支度の進み具合
   一本の線で見せる。これがあるだけで「待たされている」が「支度中」に変わる。 */
.intro__bar {
  position: absolute; left: 50%; bottom: clamp(64px, 9vh, 104px); translate: -50%;
  width: min(190px, 44vw); height: 1px; overflow: hidden;
  background: rgba(255, 201, 30, .18);
  opacity: 0;
}
.intro.is-play .intro__bar { animation: introFade .8s ease 1.3s forwards; }
.intro__bar i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 158, 60, .5), var(--yellow));
  transform-origin: left; scale: 0 1;
  transition: scale .45s cubic-bezier(.2, .7, .3, 1);
}

.intro__copy {
  position: absolute; bottom: 26px; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-body); font-size: 10.5px; font-weight: 500;
  letter-spacing: .34em;
  color: rgba(252, 250, 244, .28);
  opacity: 0;
}
.intro.is-play .intro__copy { animation: introFade .9s ease 1.5s forwards; }

/* ------------------------------------------------------------------ 中身を送る
   アイリスが開くとき、中身だけ先に消して背景の黒を残す（intro.js が付ける） */
.intro.is-out .intro__in,
.intro.is-out .intro__bar,
.intro.is-out .intro__copy { opacity: 0; transition: opacity .6s ease; }
/* アイリスを使えない／使わない端末では、幕ごと素直に消す */
.intro.is-fade { opacity: 0; transition: opacity .6s var(--ease); }

/* ロゴの引き継ぎ（イントロ中央のロゴ → ヘッダのロゴへ飛ぶ共有要素） */
.intro-fly {
  position: fixed; z-index: 310;
  border-radius: 50%;
  border: 4px solid var(--yellow);
  box-shadow: 0 0 0 6px rgba(255, 201, 30, .18), 0 24px 60px rgba(0, 0, 0, .6);
  background: var(--yellow);
  pointer-events: none;
  transition:
    transform 1.3s cubic-bezier(.32, .8, .2, 1),
    border-color 1.3s ease, border-width 1.3s ease, box-shadow 1.3s ease,
    opacity .4s ease;
}
.intro-fly.is-go {
  border-color: var(--black); border-width: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.intro-fly.is-land { opacity: 0; }

/* -------------------------------------------------------------------- 狭い画面
   屋号は「字間が詰まりながら現れる」ので、はじまりの1瞬がいちばん横に広い。
   案Aの見た目（字間 .5em → .12em）は 1024px 以上でそのまま出し、
   それより狭い画面では、はじまりの字間だけ段階的に詰める（切れるのを防ぐ）。 */
@media (max-width: 1023px) {
  .intro__ttl { --ls0: .26em; --ls1: .1em; }
}
@media (max-width: 520px) {
  .intro__ttl { --ls0: .2em; --ls1: .07em; }
  /* 2行に折り返して進み具合の線とぶつからないよう、字と字間を詰める */
  .intro__copy { font-size: 9px; letter-spacing: .18em; padding-inline: 10px; }
  /* 鍋は柄のぶん実寸で 470px 近くあるので、狭い画面では丸ごと縮める。
     intro.js は縮尺を実測して初速を補正するため、飛距離はここで変えなくてよい。 */
  .intro__pan { transform: scale(.66); transform-origin: 50% 100%; margin-top: 8px; }
}
@media (max-width: 380px) {
  .intro__ttl { font-size: 6.4vw; --ls0: .16em; --ls1: .05em; }
}
/* 背の低い画面では、ロゴと間隔だけ詰める（鍋と屋号がぶつからないように） */
@media (max-height: 700px) {
  .intro__logo { width: clamp(96px, 16vw, 126px); }
  .intro__ring { top: clamp(48px, 8vw, 63px); }
  .intro__ttl { margin-top: 18px; }
  .intro__rule { margin-top: 16px; }
  .intro__pan { margin-top: 4px; }
}

/* 「動きを減らす」設定でも、この演出は止めない（案Aと同じ判断）。
   フライパンで焼いて空へ飛ばす流れがサイトの主題そのもので、
   止めると「暗い画面に文字が置いてあるだけ」になってしまう。
   「視差効果を減らす」を入れている端末でも、同じ演出がそのまま流れる。
   長く待たせないよう、画面を押せばいつでも飛ばせるようにしてある。

   ここに @media (prefers-reduced-motion: reduce) を足すと、
   フライパンや焼きの動きが消えてしまうので足さないこと。 */