/* =========================================================================
   matsuri-hero.css ―― 祭りヒーロー（昼・夜共通の出し物）
   --------------------------------------------------------------------------
   - 中央：太鼓を叩く人（day_taiko_a / day_taiko_b を交互パラパラ）
   - 左：露店（day_roten を -10°/-20° で揺れる）※昼のみ
   - 右：山車（day_dashi を 10°/20° で揺れる）※昼のみ
   - 夜は太鼓のみ（左右の露店・山車は出さない）
   - 下側にロゴ用の余白を確保
   - 昼/夜は背景レイヤー .matsuri-bg の .theme-day / .theme-night で切替
   - 背景（matsuri-bg.css）はヒーロー枠内に absolute で敷く
   - スマホは案B寄り：全体を小さく、左右はかなり小さく
   - 画像は public/images/hero/ に配置
   ========================================================================= */

/* ヒーロー帯（ヒーローの外側左右に敷く全幅の帯。header.php で .matsuri-hero を包む）
   コンテンツ背景（matsuri-page.css の縁日/篝火）と色合いを分けるための層。 */
.mh-band { position: relative; }
/* ページ最上部の紅白ライン（theme.css のヘッダー上端ストライプと同じ柄） */
.mh-band::before {
  content: '';
  display: block;
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--festival-red) 0 12px,
    #FFFDF0 12px 24px
  );
}
.mh-band--day {
  background: linear-gradient(180deg, #2f9be8 0%, #7ac6f7 100%);  /* 濃いめの空色 */
}
.mh-band--night { background: #000; }  /* 夜はヒーロー後ろを黒で締める */

/* ヒーロー領域（この中に背景レイヤーと出し物を重ねる）
   ★コンテンツ幅(1100px)に合わせて中央寄せ。高さ420px（背景画像 1100×420 想定）。 */
.matsuri-hero {
  position: relative;
  width: 100%;
  max-width: 1100px;     /* ★ .container と同じ最大幅に合わせる */
  margin-inline: auto;   /* ★ 中央寄せ */
  height: 420px;         /* ★ 640→420 に縮小 */
  overflow: hidden;
}

/* 縮小版（商品ページ）：出し物なし・背景画像＋文字ロゴのみの細い帯 */
.matsuri-hero.mh--compact { height: 150px; }
.mh--compact .matsuri-bg { display: none; }        /* 雲/花火の空レイヤーは出さない */
.mh--compact .mh-logo-area {
  top: 0; bottom: 0; height: auto;                 /* 帯いっぱいで縦中央寄せ */
  align-items: center;
}
.mh--compact .mh-logo { max-height: 74%; max-width: min(78%, 560px); }
@media (max-width: 600px) {
  .matsuri-hero.mh--compact { height: 104px; }
}

/* 背景画像レイヤー（後から差し込む。1100×420＝2倍 2200×840 で作成）
   - ★最背面（z-index:0）。この上に 雲/花火(1)→出し物(2)→文字ロゴ(3) が重なる
   - 画像を出すときは空グラデを透明化するため .matsuri-bg に mb-has-scene を付与
   - $matsuri_bg_image をセットした時だけ <img class="mh-scene"> が出力される */
.mh-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 枠に合わせて拡大縮小（上下が多少見切れる前提） */
  z-index: 0;
  pointer-events: none;
}

/* 出し物を載せるステージ（さらに上寄せ。ロゴ拡大のため太鼓を上げる） */
.mh-stage {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  bottom: 34%;            /* 出し物を上に持ち上げる（下34%はロゴ帯用の余白） */
  z-index: 2;             /* ★ 背景レイヤー(.matsuri-bg z-index:0)より前面 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2%;
  pointer-events: none;
}

/* ロゴを置くための下部エリア（タイトル＋リード文。後でロゴ画像に差替可）
   ★ロゴを一番目立たせる：ヒーロー下端30%超を占める帯にして最前面に出す */
.mh-logo-area {
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  height: 32%;            /* ★ヒーロー高さの約3割をロゴ帯に確保 */
  z-index: 3;             /* ★ 最前面（出し物 z:2 より手前） */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
  pointer-events: none;
}

/* ロゴ余白のタイトル・リード（昼夜どちらでも読めるよう白文字＋濃い影） */
.mh-title {
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 3px rgba(0,0,0,0.5);
}
.mh-lead {
  margin-top: 0.4rem;
  font-size: clamp(0.72rem, 2.4vw, 1rem);
  color: #fff8d6;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* ロゴ画像（仮テキストの代わりに差し込む場合。SVG推奨）
   $matsuri_logo_image をセットした時だけ <img class="mh-logo"> が出力される */
.mh-logo {
  display: block;
  margin: 0 auto;
  max-width: min(92%, 900px);   /* ★さらに大きく */
  max-height: 100%;             /* ロゴ帯(32%)の高さいっぱいまで使う */
  height: auto;
  width: auto;
  /* 太鼓に重なっても沈まないよう、ふちに影を落として浮かせる */
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

/* 各出し物の共通：画像を重ねてパラパラ */
.mh-item { position: relative; flex: 0 0 auto; }
.mh-item img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0; left: 0;
}
.mh-item img.pose-b { opacity: 0; }
/* 1枚目を基準位置に置くためのスペーサー（高さ確保用） */
.mh-item img.spacer { position: relative; opacity: 0; }

/* ---- 中央：太鼓（やや小さめ）----
   正面向き(pose-a)を長め（約1.15秒）、後ろ向き(pose-b)を短め（約0.45秒）。
   切替は steps ではなく約0.2秒のクロスフェード（残像感のあるトランジション）。 */
.mh-taiko { width: clamp(150px, 26vw, 340px); z-index: 3; }
.mh-taiko .pose-a { animation: mh-flip-a 1.6s ease-in-out infinite; }
.mh-taiko .pose-b { animation: mh-flip-b 1.6s ease-in-out infinite; }

/* ---- 太鼓の上の「ドン」効果音画像 ----
   叩点（画像内の左上寄り）の上に大きめに置く。太鼓と距離を詰めて（top を浅く）
   出し物全体の天地を縮め、その分ロゴを大きく取れるようにする。
   ポーズ切替と同じ1.6秒周期で角度・大きさを変えながら弾ませる */
.mh-taiko .mh-don {
  position: absolute;
  bottom: auto;            /* .mh-item img の bottom:0 を打ち消す */
  top: -28%;               /* ★ -50% → -28%（太鼓に寄せる） */
  left: 2%;
  width: 62%;
  z-index: 4;
  transform-origin: 50% 80%;
  animation: mh-don-beat 1.6s ease-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* ---- 左：露店（さらに大きめ・まっすぐのまま大きさだけゆっくりふくらむ） ---- */
.mh-roten { width: clamp(150px, 27vw, 350px); z-index: 1; margin-bottom: 2%; }
.mh-roten .pose-a { transform-origin: 50% 100%; animation: mh-roten-breath 3.4s ease-in-out infinite; }

/* ---- 右：山車（さらに大きめ・控えめに揺れる） ---- */
.mh-dashi { width: clamp(140px, 25vw, 320px); z-index: 1; margin-bottom: 2%; }
.mh-dashi .pose-a { transform-origin: 50% 100%; animation: mh-sway-right-a 1.6s ease-in-out infinite; }
.mh-dashi .pose-b { transform-origin: 50% 100%; animation: mh-sway-right-b 1.6s ease-in-out infinite; opacity: 0; }

/* =======================================================================
   キーフレーム
   ======================================================================= */
/* 太鼓クロスフェード（正面 0〜66%＝約1.15秒 → 0.2秒かけて後ろへ →
   後ろ 78〜88% → 0.2秒かけて正面へ戻る） */
@keyframes mh-flip-a {
  0%   { opacity: 1; }
  66%  { opacity: 1; }
  78%  { opacity: 0; }   /* 正面→後ろ のフェード（約0.2秒） */
  88%  { opacity: 0; }
  100% { opacity: 1; }   /* 後ろ→正面 のフェード（約0.2秒） */
}
@keyframes mh-flip-b {
  0%   { opacity: 0; }
  66%  { opacity: 0; }
  78%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 「ドン」：ポーズ切替（0%と72%）の瞬間に大きく弾み、間はゆっくり戻る。
   100%→0% の値の飛びが「ドン！」のポップになる */
@keyframes mh-don-beat {
  0%    { transform: rotate(-8deg) scale(1.18); }   /* 正面ポーズのドン！（大） */
  12%   { transform: rotate(-5deg) scale(0.97); }
  28%   { transform: rotate(-6deg) scale(1.04); }
  71.9% { transform: rotate(-4deg) scale(0.98); }
  72%   { transform: rotate(7deg)  scale(1.10); }   /* 後ろポーズのドン（小・逆傾き） */
  82%   { transform: rotate(4deg)  scale(0.95); }
  100%  { transform: rotate(5deg)  scale(0.91); }
}

/* 露店：回転なし。呼吸するようにゆっくり大きさが変わる */
@keyframes mh-roten-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
/* 山車：5° と 10° を交互に（旧 10°/20° から角度を抑えめに） */
@keyframes mh-sway-right-a {
  0%,49.9% { opacity:1; transform: rotate(5deg); }
  50%,100% { opacity:0; transform: rotate(5deg); }
}
@keyframes mh-sway-right-b {
  0%,49.9% { opacity:0; transform: rotate(10deg); }
  50%,100% { opacity:1; transform: rotate(10deg); }
}

/* =======================================================================
   スマホ：案B寄り（全体小さく・左右かなり小さく・間隔を詰める）
   ======================================================================= */
@media (max-width: 600px) {
  .matsuri-hero { height: clamp(260px, 46vh, 340px); }
  .mh-stage { gap: 0; top: 4%; bottom: 30%; }
  .mh-taiko { width: clamp(120px, 40vw, 190px); }
  .mh-roten { width: clamp(72px, 27vw, 112px); margin-right: -6%; } /* 重なるくらい寄せる */
  .mh-dashi { width: clamp(80px, 29vw, 124px); margin-left: -6%; }
  .mh-logo  { max-width: 88%; }
}

/* =======================================================================
   動きを減らす設定
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mh-taiko .pose-a, .mh-taiko .pose-b, .mh-taiko .mh-don,
  .mh-roten .pose-a,
  .mh-dashi .pose-a, .mh-dashi .pose-b { animation: none !important; }
  .pose-a { opacity: 1 !important; }
  .pose-b { opacity: 0 !important; }
  .mh-taiko .mh-don { transform: rotate(-5deg); }
  .mh-dashi .pose-a { transform: rotate(7deg); }
}