/* =========================================================================
   matsuri-page.css ―― ページ全体の最下層固定背景（ヒーロー枠の外側）
   --------------------------------------------------------------------------
   - body.theme-day / body.theme-night（layout.php が付与）で切り替える
   - マークアップは templates/matsuri_page_bg.php
   - 昼：空色→生成りのグラデ＋画面下を歩く人々（縁日の喧騒）
   - 夜：CSSで描く篝火（かがり火）。夜テーマ/kagaribi.css からの移植
   - テーマ対象外ページ（旅行・商品詳細など）は従来の base.css 背景のまま
   - 動きは transform / opacity のみ。prefers-reduced-motion 対応
   ========================================================================= */

/* ----------------------------------------------------------------------
   テーマページ共通：base.css の既定背景装飾を整理する
   - 背景グラデはこのファイルの固定レイヤーに任せるので body 側は無地に
   - 画面端の篝火SVG（body::after）は昼＝日中なので不要／夜＝CSS篝火と重複
   - 七宝パターン（body::before）は昼のみ残す（夜は暗背景に浮くため消す）
   ---------------------------------------------------------------------- */
body.theme-day,
body.theme-night {
    background-image: none;
    animation: none;
}
body.theme-day::after,
body.theme-day::before,
body.theme-night::after,
body.theme-night::before {
    display: none;
}

body.theme-day   { background-color: #A1D8E7; }  /* 縁日グラデの下地（フォールバック） */
body.theme-night { background-color: #0a0709; }  /* 篝火背景の下地（フォールバック） */

/* ----------------------------------------------------------------------
   夜テーマ：暗背景の上に直接載るテキストの可読性を確保する
   （カード類は自前の背景色を持つので対象外）
   ---------------------------------------------------------------------- */
/* ※ .filter__label は含めない（.filter-section がクリーム背景を持つため） */
body.theme-night .section__heading,
body.theme-night .section__subtext,
body.theme-night .products-count,
body.theme-night .features-empty {
    color: #f5e9d0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
/* 夜テーマの暗い背景の上に出る「一覧へ戻る」リンク・パンくず・PR表記を読めるように */
body.theme-night .back-link__anchor,
body.theme-night .breadcrumb__item,
body.theme-night .breadcrumb__item a {
    color: #f5e9d0;
}
body.theme-night .item-pr-note {
    color: #f0e6d2;   /* 少し白く（暗背景での可読性アップ） */
}
/* フィルタ直下のPR表記（filter_panel.php）も暗背景の上に直接載るので白っぽく。
   昼テーマ側の色は base.css の .pr-notice--filter を参照 */
body.theme-night .pr-notice--filter {
    color: #f0e6d2;
    opacity: 0.9;
}

/* =======================================================================
   昼：縁日背景（.ennichi-bg）
   ======================================================================= */

/* 最下層：グラデーション＋画面下の縁日屋台の街並み画像
   - 画像（images/bg/day_content.png 1050×325）の上端色は #A1D8E7。
     グラデの終端をこの色に揃えて、画像との継ぎ目を消している。
   - ヒーロー帯（.mh-band--day の濃い空色）とは色合いを分けている */
.ennichi-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background-color: #A1D8E7;   /* 画像読込前のフォールバック */
    background-image:
        url("../../images/bg/day_content.png"),
        linear-gradient(180deg, #f2fbff 0%, #cdeaf2 55%, #A1D8E7 100%);
    background-repeat: repeat-x, no-repeat;
    background-position: left bottom, left top;
    background-size: auto 325px, 100% calc(100% - 324px);  /* 1px重ねて隙間を防ぐ */
}

/* 画面下の人波エリア */
.ennichi-crowd {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 130px;
}
/* 地面のほんのりした影（人物を地面に立たせて見せる） */
.ennichi-crowd::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    background: linear-gradient(180deg,
        rgba(160, 110, 60, 0) 0%,
        rgba(150, 100, 55, 0.14) 100%);
}

/* ---- 歩く人（1人分の入れ物） ----
   外側 .ew ＝ 横移動（画面を横断） / 内側 .ew__bob ＝ 上下の弾み
   個体差（速さ・大きさ・色・奥行き）は .ew--1〜8 のCSS変数で付ける */
.ew {
    position: absolute;
    bottom: 4px;
    width: calc(56px * var(--ew-scale, 1));
    color: rgba(92, 58, 38, 0.5);   /* シルエット色（currentColor で SVG に効く） */
    animation: ew-walk var(--ew-dur, 26s) linear infinite;
    animation-delay: var(--ew-delay, 0s);  /* 負の値＝初期表示から画面途中に散らばる */
    will-change: transform;
}
.ew svg { display: block; width: 100%; height: auto; }
.ew--rev { animation-name: ew-walk-rev; }
.ew--rev svg { transform: scaleX(-1); }    /* 逆方向の人は左右反転 */

/* 歩調に合わせた上下の弾み */
.ew__bob { animation: ew-bob var(--ew-step, 0.5s) ease-in-out infinite; }

/* 脚と腕の振り（SVG内の rect を肩・股関節から回転させる）。
   横向き歩行なので、腕は手前(--a)と奥(--b)の2本を逆位相で振る。
   自然な歩容：手前脚(leg--a)と奥腕(arm--b)が同位相／奥脚(leg--b)と手前腕(arm--a)が同位相 */
.ew-leg, .ew-arm {
    transform-box: fill-box;
    transform-origin: 50% 0;    /* 付け根を支点に振る */
}
.ew-leg--a,
.ew-arm--b { animation: ew-swing var(--ew-step, 0.5s) ease-in-out infinite; }
.ew-leg--b,
.ew-arm--a { animation: ew-swing var(--ew-step, 0.5s) ease-in-out infinite;
             animation-delay: calc(var(--ew-step, 0.5s) / -2); }  /* 逆位相 */

/* 風船のゆらゆら・うちわの扇ぎ */
.ew-balloon {
    transform-box: fill-box;
    transform-origin: 20% 100%;
    animation: ew-balloon 2.6s ease-in-out infinite;
}
.ew-fan {
    transform-box: fill-box;
    transform-origin: 20% 90%;
    animation: ew-fan 0.9s ease-in-out infinite;
}
/* 手持ち提灯のゆれ（吊り元を支点に振る） */
.ew-lantern {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: ew-balloon 2.2s ease-in-out infinite;
}

/* ---- 個体差（12人分）。手前＝大きく濃く／奥＝小さく薄く。
   全体的にゆったり歩くテンポ（横断26〜70秒） ---- */
.ew--1  { --ew-dur: 44s; --ew-delay: -6s;  --ew-scale: 1;    --ew-step: 0.7s;  bottom: 4px;  color: rgba(92, 58, 38, 0.5); }
.ew--2  { --ew-dur: 30s; --ew-delay: -16s; --ew-scale: 0.62; --ew-step: 0.5s;  bottom: 2px;  color: rgba(125, 72, 45, 0.45); }
.ew--3  { --ew-dur: 50s; --ew-delay: -28s; --ew-scale: 0.95; --ew-step: 0.75s; bottom: 6px;  color: rgba(72, 54, 62, 0.42); }
.ew--4  { --ew-dur: 38s; --ew-delay: -10s; --ew-scale: 1.05; --ew-step: 0.65s; bottom: 0;    color: rgba(80, 48, 32, 0.55); }
.ew--5  { --ew-dur: 64s; --ew-delay: -40s; --ew-scale: 0.75; --ew-step: 0.8s;  bottom: 26px; color: rgba(100, 70, 50, 0.3); }
.ew--6  { --ew-dur: 34s; --ew-delay: -22s; --ew-scale: 0.9;  --ew-step: 0.65s; bottom: 3px;  color: rgba(60, 45, 55, 0.48); }
.ew--7  { --ew-dur: 26s; --ew-delay: -3s;  --ew-scale: 0.55; --ew-step: 0.45s; bottom: 1px;  color: rgba(130, 75, 40, 0.4); }
.ew--8  { --ew-dur: 58s; --ew-delay: -48s; --ew-scale: 0.7;  --ew-step: 0.85s; bottom: 22px; color: rgba(90, 60, 70, 0.32); }
.ew--9  { --ew-dur: 42s; --ew-delay: -13s; --ew-scale: 0.9;  --ew-step: 0.68s; bottom: 5px;  color: rgba(110, 60, 50, 0.5); }
.ew--10 { --ew-dur: 48s; --ew-delay: -31s; --ew-scale: 1;    --ew-step: 0.72s; bottom: 2px;  color: rgba(70, 50, 40, 0.52); }
.ew--11 { --ew-dur: 40s; --ew-delay: -20s; --ew-scale: 0.85; --ew-step: 0.66s; bottom: 8px;  color: rgba(85, 55, 65, 0.45); }
.ew--12 { --ew-dur: 70s; --ew-delay: -55s; --ew-scale: 0.6;  --ew-step: 0.9s;  bottom: 24px; color: rgba(100, 70, 60, 0.3); }
.ew--13 { --ew-dur: 46s; --ew-delay: -9s;  --ew-scale: 1.02; --ew-step: 0.7s;  bottom: 3px;  color: rgba(88, 54, 40, 0.5); }
.ew--14 { --ew-dur: 36s; --ew-delay: -25s; --ew-scale: 0.68; --ew-step: 0.55s; bottom: 4px;  color: rgba(120, 70, 48, 0.42); }
.ew--15 { --ew-dur: 54s; --ew-delay: -37s; --ew-scale: 0.8;  --ew-step: 0.78s; bottom: 14px; color: rgba(95, 62, 52, 0.4); }
.ew--16 { --ew-dur: 62s; --ew-delay: -50s; --ew-scale: 0.62; --ew-step: 0.85s; bottom: 25px; color: rgba(100, 72, 62, 0.3); }

/* ---- 人波のキーフレーム ---- */
/* 左端の外から右端の外へ（逆方向は ew-walk-rev） */
@keyframes ew-walk {
    0%   { transform: translateX(-90px); }
    100% { transform: translateX(calc(100vw + 90px)); }
}
@keyframes ew-walk-rev {
    0%   { transform: translateX(calc(100vw + 90px)); }
    100% { transform: translateX(-90px); }
}
/* 歩調の上下動 */
@keyframes ew-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
/* 脚・腕の振り子 */
@keyframes ew-swing {
    0%, 100% { transform: rotate(18deg); }
    50%      { transform: rotate(-18deg); }
}
/* 風船のゆれ */
@keyframes ew-balloon {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(6deg); }
}
/* うちわの扇ぎ */
@keyframes ew-fan {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(14deg); }
}

/* スマホ：街並み画像を小さく・人波を少し低く・奥の人は間引いてすっきり */
@media (max-width: 600px) {
    .ennichi-bg {
        background-size: auto 230px, 100% calc(100% - 229px);
    }
    .ennichi-crowd { height: 100px; }
    .ew--5, .ew--8, .ew--12, .ew--15, .ew--16 { display: none; }
}

/* =========================================================================
   夜：かがり火（篝火）背景
   ―― 夜テーマ/kagaribi.css からの移植（クラス名・数値は原本のまま）
   --------------------------------------------------------------------------
   設計方針（リアル7：アニメ3／スマホでも軽い）
   - 動きは transform と opacity だけで付ける（GPU合成が効くので軽い）
   - SVGノイズ（feTurbulence）は「静止画」として1回だけ生成し、
     炎の質感づけに使う。毎フレーム再計算しないので軽い。
   - 炎は「外炎(赤橙)→中炎(橙)→芯(黄白)」の3層を少しずつ位相をずらして
     揺らすことで、火が舐めるように燃え続ける表現を作る。
   ========================================================================= */

/* ----------------------------------------------------------------------
   色・サイズの調整つまみ（ここを変えるだけで雰囲気を調整できる）
   ---------------------------------------------------------------------- */
:root {
  --kgr-night-top:    #05060a;   /* 夜空の上端（ほぼ黒） */
  --kgr-night-bottom: #140a06;   /* 地面側（暖色を帯びた暗褐色） */

  --kgr-fire-deep:  #7a1500;     /* 炎のいちばん外側（暗い赤） */
  --kgr-fire-red:   #e23b00;     /* 赤橙 */
  --kgr-fire-orng:  #ff7a18;     /* 橙 */
  --kgr-fire-gold:  #ffc24b;     /* 黄金 */
  --kgr-fire-core:  #fff6d8;     /* 芯の明るい黄白 */
  --kgr-glow:       #ff6a1a;     /* 周囲ににじむ火明かりの色 */

  --kgr-iron:       #1a1714;     /* 鉄かご・三脚の影色 */
  --kgr-iron-rim:   #ff7b2e;     /* 鉄に当たる火の照り返し（リムライト） */
}

/* ----------------------------------------------------------------------
   背景レイヤー本体
   position:fixed で画面に固定。サイトの最背面に敷く。
   ---------------------------------------------------------------------- */
.kagaribi-bg {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left を全て0に */
  z-index: -1;              /* コンテンツより後ろへ */
  overflow: hidden;
  pointer-events: none;
  /* 夜の下地。上は暗く、下は火に照らされてやや暖かい */
  background:
    radial-gradient(120% 80% at 50% 100%,
      rgba(255,106,26,0.18) 0%,
      rgba(255,106,26,0.06) 30%,
      rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--kgr-night-top) 0%, var(--kgr-night-bottom) 100%);
}

/* 全面のゆらぐ火明かり（アンビエント光）。
   大きくぼかした暖色をゆっくり明滅させ、画面全体が火に照らされている感を出す */
.kagaribi-ambient {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(40% 50% at 18% 88%, rgba(255,120,40,0.30), rgba(255,120,40,0) 70%),
    radial-gradient(40% 50% at 82% 88%, rgba(255,120,40,0.30), rgba(255,120,40,0) 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(255,90,20,0.20), rgba(255,90,20,0) 75%);
  filter: blur(6px);
  animation: kgr-ambient 5.5s ease-in-out infinite;
  will-change: opacity, transform;
}

/* 炎の質感づけ用ノイズ（静止）。
   feTurbulence で作ったフラクタルノイズを overlay 合成で薄くのせ、
   のっぺりした光に粒状の揺らぎを足す。アニメさせないので負荷は低い */
.kagaribi-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ----------------------------------------------------------------------
   かがり火スタンド（左右に1基ずつ配置）
   ---------------------------------------------------------------------- */
.kagaribi-stand {
  position: absolute;
  bottom: 0;
  width: 220px;
  height: 360px;
  /* スマホでは小さめに。下の @media で調整 */
}
.kagaribi-stand--left  { left: 4%;  }
.kagaribi-stand--right { right: 4%; }

/* SVGの鉄かご・三脚。火の照り返しがほのかに脈打つ */
.kagaribi-stand__iron {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140px;
  transform: translateX(-50%);
  /* 鉄に火明かりのにじみを足す影。ゆっくり明滅 */
  filter: drop-shadow(0 -6px 12px rgba(255,120,40,0.55));
  animation: kgr-iron-glow 3.2s ease-in-out infinite;
}

/* ----------------------------------------------------------------------
   炎（3層構造）。.flame を鉄かごの口の高さに置く
   ---------------------------------------------------------------------- */
.flame {
  position: absolute;
  left: 50%;
  bottom: 150px;             /* 鉄かごの口の高さに合わせる */
  width: 100px;
  height: 170px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 炎まわりの丸いにじみ光（グロー） */
.flame__glow {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 180px;
  height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 60%,
    rgba(255,160,60,0.55) 0%,
    rgba(255,110,30,0.30) 35%,
    rgba(255,90,20,0) 70%);
  filter: blur(4px);
  animation: kgr-glow 2.4s ease-in-out infinite;
  will-change: opacity, transform;
}

/* 炎の各層に共通の形。下が太く上がすぼまる火炎形を border-radius で作り、
   下端(transform-origin: bottom)を支点に伸び縮みさせて「舐める炎」にする */
.flame__layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: 50% 100%;
  /* 上が尖り下が丸い火炎形 */
  border-radius: 46% 46% 46% 46% / 96% 96% 32% 32%;
  filter: blur(2px);
  mix-blend-mode: screen;    /* 重ねた炎が明るく加算的に混ざる */
  will-change: transform, opacity;
}

/* 外炎（赤橙・いちばん大きい） */
.flame__layer--outer {
  width: 90px;
  height: 165px;
  background: linear-gradient(0deg,
    var(--kgr-fire-deep) 0%,
    var(--kgr-fire-red) 40%,
    var(--kgr-fire-orng) 80%,
    rgba(255,180,80,0) 100%);
  animation: kgr-flicker-a 2.3s ease-in-out infinite;
}

/* 中炎（橙） */
.flame__layer--mid {
  width: 58px;
  height: 120px;
  background: linear-gradient(0deg,
    var(--kgr-fire-red) 0%,
    var(--kgr-fire-orng) 45%,
    var(--kgr-fire-gold) 85%,
    rgba(255,220,120,0) 100%);
  animation: kgr-flicker-b 1.7s ease-in-out infinite;
  animation-delay: -0.4s;
}

/* 芯（黄白・いちばん小さく明るい） */
.flame__layer--core {
  width: 28px;
  height: 70px;
  background: linear-gradient(0deg,
    var(--kgr-fire-gold) 0%,
    var(--kgr-fire-core) 55%,
    rgba(255,255,255,0) 100%);
  filter: blur(1px);
  animation: kgr-flicker-c 1.1s ease-in-out infinite;
  animation-delay: -0.7s;
}

/* ----------------------------------------------------------------------
   火の粉（embers）。.kagaribi-embers の中に小さな粒を並べ、
   上昇＋横ゆれ＋消える、を時間差で繰り返す
   ---------------------------------------------------------------------- */
.kagaribi-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ember {
  position: absolute;
  bottom: 120px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kgr-fire-core) 0%, var(--kgr-fire-orng) 50%, rgba(255,120,30,0) 75%);
  opacity: 0;
  animation: kgr-ember 5s ease-in infinite;
  will-change: transform, opacity;
}
/* 1粒ずつ位置・大きさ・速さをずらして自然なばらつきを作る
   （左右のかがり火付近から立ちのぼるよう左右に寄せて配置）。
   数を増やすときは matsuri_page_bg.php の ember の出力数も同じ数だけ増やす */
/* --- 左のかがり火から --- */
.ember:nth-child(1)  { left:  4%; animation-delay: 0.0s; animation-duration: 5.2s; }
.ember:nth-child(2)  { left:  8%; animation-delay: 1.4s; animation-duration: 6.0s; transform: scale(0.7); }
.ember:nth-child(3)  { left: 11%; animation-delay: 2.7s; animation-duration: 4.6s; }
.ember:nth-child(4)  { left: 14%; animation-delay: 3.6s; animation-duration: 5.8s; transform: scale(1.3); }
.ember:nth-child(5)  { left:  6%; animation-delay: 0.8s; animation-duration: 6.4s; transform: scale(0.6); }
.ember:nth-child(6)  { left: 17%; animation-delay: 2.1s; animation-duration: 5.0s; }
.ember:nth-child(7)  { left:  9%; animation-delay: 4.4s; animation-duration: 5.5s; transform: scale(0.9); }
.ember:nth-child(8)  { left: 20%; animation-delay: 1.1s; animation-duration: 6.3s; transform: scale(0.5); }
.ember:nth-child(9)  { left:  3%; animation-delay: 3.0s; animation-duration: 4.9s; }
.ember:nth-child(10) { left: 13%; animation-delay: 0.4s; animation-duration: 5.7s; transform: scale(1.1); }
.ember:nth-child(11) { left: 16%; animation-delay: 4.9s; animation-duration: 6.6s; transform: scale(0.6); }
.ember:nth-child(12) { left: 22%; animation-delay: 2.5s; animation-duration: 5.3s; }
.ember:nth-child(13) { left:  5%; animation-delay: 1.8s; animation-duration: 5.9s; transform: scale(0.8); }
.ember:nth-child(14) { left: 19%; animation-delay: 3.3s; animation-duration: 4.7s; transform: scale(0.5); }
/* --- 右のかがり火から --- */
.ember:nth-child(15) { left: 78%; animation-delay: 0.5s; animation-duration: 5.4s; }
.ember:nth-child(16) { left: 82%; animation-delay: 1.9s; animation-duration: 6.2s; transform: scale(0.7); }
.ember:nth-child(17) { left: 86%; animation-delay: 3.1s; animation-duration: 4.8s; }
.ember:nth-child(18) { left: 90%; animation-delay: 0.3s; animation-duration: 5.9s; transform: scale(1.2); }
.ember:nth-child(19) { left: 94%; animation-delay: 2.4s; animation-duration: 6.5s; transform: scale(0.6); }
.ember:nth-child(20) { left: 80%; animation-delay: 3.8s; animation-duration: 5.1s; }
.ember:nth-child(21) { left: 96%; animation-delay: 1.2s; animation-duration: 6.1s; transform: scale(0.8); }
.ember:nth-child(22) { left: 84%; animation-delay: 4.6s; animation-duration: 5.6s; transform: scale(0.5); }
.ember:nth-child(23) { left: 88%; animation-delay: 0.9s; animation-duration: 4.9s; transform: scale(1.1); }
.ember:nth-child(24) { left: 92%; animation-delay: 2.8s; animation-duration: 6.4s; }
.ember:nth-child(25) { left: 76%; animation-delay: 4.1s; animation-duration: 5.8s; transform: scale(0.6); }
.ember:nth-child(26) { left: 97%; animation-delay: 3.5s; animation-duration: 5.2s; transform: scale(0.9); }
.ember:nth-child(27) { left: 81%; animation-delay: 1.5s; animation-duration: 6.7s; transform: scale(0.5); }
.ember:nth-child(28) { left: 89%; animation-delay: 4.9s; animation-duration: 4.6s; transform: scale(0.8); }
/* --- 増量分（左右の火勢を強める。matsuri_page_bg.php の出力数44と揃えること） --- */
.ember:nth-child(29) { left:  7%; animation-delay: 2.3s; animation-duration: 5.1s; transform: scale(1.2); }
.ember:nth-child(30) { left: 12%; animation-delay: 4.2s; animation-duration: 6.2s; transform: scale(0.6); }
.ember:nth-child(31) { left: 18%; animation-delay: 0.6s; animation-duration: 5.5s; transform: scale(0.9); }
.ember:nth-child(32) { left:  2%; animation-delay: 3.9s; animation-duration: 6.8s; transform: scale(0.7); }
.ember:nth-child(33) { left: 15%; animation-delay: 1.7s; animation-duration: 4.8s; transform: scale(1.1); }
.ember:nth-child(34) { left: 10%; animation-delay: 5.3s; animation-duration: 5.9s; transform: scale(0.5); }
.ember:nth-child(35) { left: 21%; animation-delay: 3.2s; animation-duration: 6.1s; transform: scale(0.8); }
.ember:nth-child(36) { left: 23%; animation-delay: 0.2s; animation-duration: 5.4s; transform: scale(0.6); }
.ember:nth-child(37) { left: 79%; animation-delay: 2.6s; animation-duration: 5.3s; transform: scale(1.2); }
.ember:nth-child(38) { left: 85%; animation-delay: 4.4s; animation-duration: 6.3s; transform: scale(0.6); }
.ember:nth-child(39) { left: 91%; animation-delay: 0.7s; animation-duration: 5.7s; transform: scale(0.9); }
.ember:nth-child(40) { left: 95%; animation-delay: 3.4s; animation-duration: 6.6s; transform: scale(0.7); }
.ember:nth-child(41) { left: 83%; animation-delay: 1.0s; animation-duration: 4.7s; transform: scale(1.1); }
.ember:nth-child(42) { left: 87%; animation-delay: 5.1s; animation-duration: 5.8s; transform: scale(0.5); }
.ember:nth-child(43) { left: 93%; animation-delay: 2.0s; animation-duration: 6.0s; transform: scale(0.8); }
.ember:nth-child(44) { left: 77%; animation-delay: 3.7s; animation-duration: 5.5s; transform: scale(0.6); }

/* ======================================================================
   キーフレーム定義（かがり火）
   ====================================================================== */

/* 炎のゆらぎ（3層で微妙に違う動き＝周期をずらして単調さを消す）。
   translateX(-50%) は左右中央寄せを保つため毎フレーム入れている */
@keyframes kgr-flicker-a {
  0%, 100% { transform: translateX(-50%) scale(1, 1)        skewX(0deg);  opacity: 0.85; }
  25%      { transform: translateX(-52%) scale(0.96, 1.08)  skewX(2deg);  opacity: 0.92; }
  50%      { transform: translateX(-48%) scale(1.04, 0.94)  skewX(-2deg); opacity: 0.80; }
  75%      { transform: translateX(-51%) scale(0.98, 1.05)  skewX(1deg);  opacity: 0.88; }
}
@keyframes kgr-flicker-b {
  0%, 100% { transform: translateX(-50%) scale(1, 1)        skewX(0deg);  opacity: 0.9; }
  30%      { transform: translateX(-49%) scale(0.93, 1.10)  skewX(-3deg); opacity: 1;   }
  60%      { transform: translateX(-51%) scale(1.06, 0.92)  skewX(3deg);  opacity: 0.85;}
}
@keyframes kgr-flicker-c {
  0%, 100% { transform: translateX(-50%) scale(1, 1)        skewX(0deg);  opacity: 0.95; }
  40%      { transform: translateX(-50%) scale(0.9, 1.12)   skewX(2deg);  opacity: 1;    }
  70%      { transform: translateX(-50%) scale(1.08, 0.9)   skewX(-2deg); opacity: 0.9;  }
}

/* 丸いグローの明滅 */
@keyframes kgr-glow {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.85; }
  50%      { transform: translateX(-50%) scale(1.08); opacity: 1;    }
}

/* 全面アンビエント光の明滅 */
@keyframes kgr-ambient {
  0%, 100% { opacity: 0.85; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.03); }
}

/* 鉄かごに当たる照り返しの脈動 */
@keyframes kgr-iron-glow {
  0%, 100% { filter: drop-shadow(0 -6px 12px rgba(255,120,40,0.45)); }
  50%      { filter: drop-shadow(0 -8px 18px rgba(255,140,50,0.70)); }
}

/* 火の粉：下から上へ昇りながら横に揺れ、上で消える */
@keyframes kgr-ember {
  0%   { transform: translate(0, 0)       scale(1);   opacity: 0;   }
  10%  {                                                opacity: 1;   }
  50%  { transform: translate(10px, -160px) scale(0.9); opacity: 0.9; }
  80%  { transform: translate(-6px, -260px) scale(0.6); opacity: 0.4; }
  100% { transform: translate(4px, -340px)  scale(0.3); opacity: 0;   }
}

/* ----------------------------------------------------------------------
   スマホ向け調整（画面が狭いときはスタンドを小さく・下寄せ）
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  .kagaribi-stand {
    width: 150px;
    height: 250px;
    transform: scale(0.82);
    transform-origin: bottom center;
  }
  .kagaribi-stand--left  { left: -2%; }
  .kagaribi-stand--right { right: -2%; }
}

/* ----------------------------------------------------------------------
   「動きを減らす」設定の端末では動きを止める（電池・酔い対策）
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* 昼：人波は静止すると不自然なので非表示に */
  .ennichi-crowd { display: none; }

  /* 夜：炎を静止させる */
  .kagaribi-ambient,
  .kagaribi-stand__iron,
  .flame__glow,
  .flame__layer,
  .ember {
    animation: none !important;
  }
  .ember { opacity: 0.7; }
}