/* =========================================================================
   matsuri-bg.css ―― 祭り背景（昼=青空＋流れる雲／夜=夜空＋花火）
   --------------------------------------------------------------------------
   - 親に .theme-day か .theme-night を付けて切り替える
   - ★本体組み込み版：画面全体固定ではなく「ヒーロー枠の中だけ」に収める。
     （元のデモは position:fixed の全画面背景だったが、ヒーロー領域
      .matsuri-hero の中に absolute で敷く形に変更している）
   - transform / opacity 中心。prefers-reduced-motion 対応
   ========================================================================= */

:root {
  --mb-day-top:    #1e9bf5;   /* ★青を強めに（旧 #4fb3ff） */
  --mb-day-mid:    #63bef9;   /* ★（旧 #8fd2ff） */
  --mb-day-bottom: #b6e4ff;   /* ★（旧 #d6f0ff） */
  --mb-cloud:      #ffffff;

  --mb-night-top:  #05060f;
  --mb-night-mid:  #0c1024;
  --mb-night-bot:  #1a1430;

  --fw-gold:   #ffd24b;
  --fw-rose:   #ff5e7a;
  --fw-aqua:   #5ad1ff;
  --fw-lime:   #7CFC8A;
  --fw-violet: #c89bff;
}

/* ヒーロー枠いっぱいに敷く「空＋雲/花火」レイヤー
   重なり順：背景画像(.mh-scene z-index:0) → このレイヤー(1) → 出し物(2) → 文字ロゴ(3) */
.matsuri-bg {
  position: absolute;   /* ★ fixed → absolute（ヒーロー .matsuri-hero の中に収める） */
  inset: 0;
  z-index: 1;           /* ★ 背景画像(.mh-scene:0)の上、出し物(2)の下 */
  overflow: hidden;
  pointer-events: none;
}

/* ---- 昼：青空グラデ ---- */
.theme-day .matsuri-bg,
.matsuri-bg.theme-day {
  background: linear-gradient(180deg,
    var(--mb-day-top) 0%, var(--mb-day-mid) 50%, var(--mb-day-bottom) 100%);
}
/* ---- 夜：夜空グラデ ---- */
.theme-night .matsuri-bg,
.matsuri-bg.theme-night {
  background: linear-gradient(180deg,
    var(--mb-night-top) 0%, var(--mb-night-mid) 55%, var(--mb-night-bot) 100%);
}

/* ---- 背景画像がある場合：空グラデを透明化して画像を見せる ----
   （雲/花火はこのレイヤーに残るので、画像の上で動き続ける） */
.matsuri-bg.mb-has-scene { background: transparent; }

/* =======================================================================
   昼の雲（流れる）。夜テーマでは非表示
   ======================================================================= */
.mb-clouds { position: absolute; inset: 0; pointer-events: none; }
.theme-night .mb-clouds { display: none; }

.mb-cloud { position: absolute; background: var(--mb-cloud); border-radius: 50%; will-change: transform; }
/* ★雲を増量（4→7）し、流れを少し速く（周期を約25%短縮） */
.mb-cloud--1 { top: 7%;  width: 110px; height: 40px; left: -240px;
  box-shadow: 50px 8px 0 -3px var(--mb-cloud), 92px -5px 0 5px var(--mb-cloud), -38px 10px 0 7px var(--mb-cloud);
  opacity: 0.95; animation: mb-cloud 68s linear infinite; }
.mb-cloud--2 { top: 16%; width: 76px; height: 28px; left: -180px;
  box-shadow: 36px 5px 0 0 var(--mb-cloud), 64px -4px 0 4px var(--mb-cloud);
  opacity: 0.8; animation: mb-cloud 90s linear infinite; animation-delay: -30s; }
.mb-cloud--3 { top: 3%;  width: 150px; height: 48px; left: -320px;
  box-shadow: 64px 10px 0 -4px var(--mb-cloud), 116px -6px 0 8px var(--mb-cloud), -48px 12px 0 10px var(--mb-cloud);
  opacity: 0.7; animation: mb-cloud 112s linear infinite; animation-delay: -70s; }
.mb-cloud--4 { top: 22%; width: 90px; height: 32px; left: -200px;
  box-shadow: 42px 6px 0 -2px var(--mb-cloud), 74px -4px 0 4px var(--mb-cloud);
  opacity: 0.6; animation: mb-cloud 82s linear infinite; animation-delay: -50s; }
.mb-cloud--5 { top: 11%; width: 96px; height: 34px; left: -220px;
  box-shadow: 44px 7px 0 -2px var(--mb-cloud), 80px -5px 0 5px var(--mb-cloud), -34px 9px 0 6px var(--mb-cloud);
  opacity: 0.88; animation: mb-cloud 76s linear infinite; animation-delay: -18s; }
.mb-cloud--6 { top: 30%; width: 68px; height: 26px; left: -170px;
  box-shadow: 32px 5px 0 0 var(--mb-cloud), 58px -4px 0 3px var(--mb-cloud);
  opacity: 0.65; animation: mb-cloud 96s linear infinite; animation-delay: -44s; }
.mb-cloud--7 { top: 1%;  width: 128px; height: 42px; left: -280px;
  box-shadow: 56px 9px 0 -3px var(--mb-cloud), 100px -5px 0 6px var(--mb-cloud), -42px 11px 0 8px var(--mb-cloud);
  opacity: 0.75; animation: mb-cloud 104s linear infinite; animation-delay: -88s; }

@keyframes mb-cloud { 0%{transform:translateX(0);} 100%{transform:translateX(calc(100vw + 380px));} }

/* =======================================================================
   夜の花火。昼テーマでは非表示
   ★盛大化：6発構成。打上げ光跡（ヒーロー下端から）→ 閃光 → 広がるリング
   　→ 16方向の火花。各花火の大きさは --s、打上げ高さは --rise で調整する。
   ======================================================================= */
.mb-fireworks { position: absolute; inset: 0; pointer-events: none; }
.theme-day .mb-fireworks { display: none; }

.mb-fw { position: absolute; width: 0; height: 0; }
.mb-fw__rocket {
  position: absolute; left: 0; bottom: 0; width: 3px; height: 30px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,230,150,0) 0%, var(--fw-gold) 100%);
  transform-origin: 50% 100%; animation: mb-rocket 6.8s ease-in infinite; will-change: transform, opacity;
}
.mb-fw__flash {
  position: absolute; left: 0; top: 0; width: 90px; height: 90px; margin: -45px 0 0 -45px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 65%);
  opacity: 0; transform: scale(0.2); animation: mb-flash 6.8s ease-out infinite; will-change: transform, opacity;
}
/* 広がって消える輪（花火の「殻」。色は各花火の --ring で指定） */
.mb-fw__ring {
  position: absolute; left: 0; top: 0; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; border: 2px solid var(--ring, rgba(255,255,255,0.9));
  opacity: 0; transform: scale(0.1); animation: mb-ring 6.8s ease-out infinite; will-change: transform, opacity;
}
/* burst 全体を --s で拡大縮小（花火ごとの大小差を出す） */
.mb-fw__burst { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: scale(var(--s, 1)); }
.mb-spark {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; opacity: 0; animation: mb-burst 6.8s ease-out infinite; will-change: transform, opacity;
}

/* 花火の配置・色・大きさ・打上げ高さ・時間差（約1.1秒間隔で次々に上がる）
   種類：1・4＝牡丹（標準） / 2・5＝しだれ柳（尾を引いて垂れる） / 3・6＝瞬き（チカチカ明滅） */
.mb-fw--1 { left: 14%;  top: 30%; --s: 1.15; --rise: 290px; --ring: rgba(255,210,75,0.85); }
.mb-fw--1 .mb-spark { background: radial-gradient(circle,#fff 0%, var(--fw-gold) 55%, rgba(255,210,75,0) 78%); }

.mb-fw--2 { right: 15%; left: auto; top: 24%; --s: 1.3; --rise: 315px; --ring: rgba(255,94,122,0.85); }
.mb-fw--2 .mb-spark { background: radial-gradient(circle,#fff 0%, var(--fw-rose) 55%, rgba(255,94,122,0) 78%);
                      animation-name: mb-burst-willow; }
.mb-fw--2 * { animation-delay: 1.1s !important; }

.mb-fw--3 { left: 30%;  top: 46%; --s: 0.9; --rise: 225px; --ring: rgba(90,209,255,0.85); }
.mb-fw--3 .mb-spark { background: radial-gradient(circle,#fff 0%, var(--fw-aqua) 55%, rgba(90,209,255,0) 78%);
                      animation-name: mb-burst-twinkle; }
.mb-fw--3 * { animation-delay: 2.2s !important; }

.mb-fw--4 { right: 30%; left: auto; top: 50%; --s: 0.85; --rise: 210px; --ring: rgba(200,155,255,0.85); }
.mb-fw--4 .mb-spark { background: radial-gradient(circle,#fff 0%, var(--fw-violet) 55%, rgba(200,155,255,0) 78%); }
.mb-fw--4 * { animation-delay: 3.4s !important; }

/* 中央のいちばん大きな金花火（主役・しだれ柳） */
.mb-fw--5 { left: 49%;  top: 16%; --s: 1.55; --rise: 350px; --ring: rgba(255,246,220,0.9); }
.mb-fw--5 .mb-spark { background: radial-gradient(circle,#fff 0%, var(--fw-gold) 45%, rgba(255,210,75,0) 78%);
                      animation-name: mb-burst-willow; }
.mb-fw--5 * { animation-delay: 4.5s !important; }

.mb-fw--6 { left: 38%;  top: 36%; --s: 1.0; --rise: 265px; --ring: rgba(124,252,138,0.8); }
.mb-fw--6 .mb-spark { background: radial-gradient(circle,#fff 0%, var(--fw-lime) 55%, rgba(124,252,138,0) 78%);
                      animation-name: mb-burst-twinkle; }
.mb-fw--6 * { animation-delay: 5.6s !important; }

/* 16方向（距離は旧版より約25%増しで大きく開く） */
.mb-spark:nth-child(1){--a:0deg;--d:88px;}    .mb-spark:nth-child(2){--a:22deg;--d:95px;}
.mb-spark:nth-child(3){--a:45deg;--d:83px;}   .mb-spark:nth-child(4){--a:67deg;--d:98px;}
.mb-spark:nth-child(5){--a:90deg;--d:85px;}   .mb-spark:nth-child(6){--a:112deg;--d:95px;}
.mb-spark:nth-child(7){--a:135deg;--d:80px;}  .mb-spark:nth-child(8){--a:157deg;--d:98px;}
.mb-spark:nth-child(9){--a:180deg;--d:88px;}  .mb-spark:nth-child(10){--a:202deg;--d:95px;}
.mb-spark:nth-child(11){--a:225deg;--d:80px;} .mb-spark:nth-child(12){--a:247deg;--d:98px;}
.mb-spark:nth-child(13){--a:270deg;--d:85px;} .mb-spark:nth-child(14){--a:292deg;--d:95px;}
.mb-spark:nth-child(15){--a:315deg;--d:80px;} .mb-spark:nth-child(16){--a:337deg;--d:98px;}

@keyframes mb-rocket {
  0%{transform:translateY(var(--rise, 260px)) scaleY(1);opacity:0;} 4%{opacity:1;}
  15%{transform:translateY(0) scaleY(1.25);opacity:1;} 19%{transform:translateY(0) scaleY(0.15);opacity:0;}
  100%{transform:translateY(0) scaleY(0.15);opacity:0;}
}
@keyframes mb-flash {
  0%,18%{transform:scale(0.2);opacity:0;} 20%{transform:scale(1);opacity:1;}
  26%{transform:scale(1.4);opacity:0;} 100%{transform:scale(1.4);opacity:0;}
}
@keyframes mb-ring {
  0%,18% { transform: scale(calc(var(--s,1) * 0.12)); opacity: 0; }
  20%    { transform: scale(calc(var(--s,1) * 0.35)); opacity: 0.9; }
  45%    { transform: scale(var(--s,1));              opacity: 0.3; }
  62%    { transform: scale(calc(var(--s,1) * 1.2));  opacity: 0; }
  100%   { transform: scale(calc(var(--s,1) * 1.2));  opacity: 0; }
}
@keyframes mb-burst {
  0%,18%{transform:rotate(var(--a)) translateX(0) translateY(0) scale(1);opacity:0;}
  20%{transform:rotate(var(--a)) translateX(8px) scale(1.3);opacity:1;}
  40%{transform:rotate(var(--a)) translateX(var(--d)) scale(1);opacity:1;}
  60%{transform:rotate(var(--a)) translateX(calc(var(--d) + 10px)) translateY(8px) scale(0.5);opacity:0.5;}
  72%{transform:rotate(var(--a)) translateX(calc(var(--d) + 14px)) translateY(16px) scale(0.2);opacity:0;}
  100%{opacity:0;}
}
/* しだれ柳：開いたあと尾を引いてゆっくり垂れ、長く残る */
@keyframes mb-burst-willow {
  0%,18%{transform:rotate(var(--a)) translateX(0) translateY(0) scale(1);opacity:0;}
  20%{transform:rotate(var(--a)) translateX(8px) scale(1.3);opacity:1;}
  38%{transform:rotate(var(--a)) translateX(var(--d)) scale(1);opacity:1;}
  60%{transform:rotate(var(--a)) translateX(calc(var(--d) + 6px)) translateY(30px) scale(0.7);opacity:0.8;}
  80%{transform:rotate(var(--a)) translateX(calc(var(--d) + 10px)) translateY(64px) scale(0.35);opacity:0.35;}
  92%{transform:rotate(var(--a)) translateX(calc(var(--d) + 12px)) translateY(88px) scale(0.15);opacity:0;}
  100%{opacity:0;}
}
/* 瞬き：開いたあとチカチカと明滅しながら消える */
@keyframes mb-burst-twinkle {
  0%,18%{transform:rotate(var(--a)) translateX(0) translateY(0) scale(1);opacity:0;}
  20%{transform:rotate(var(--a)) translateX(10px) scale(1.4);opacity:1;}
  34%{transform:rotate(var(--a)) translateX(var(--d)) scale(0.9);opacity:1;}
  40%{transform:rotate(var(--a)) translateX(calc(var(--d) + 4px)) scale(0.8);opacity:0.15;}
  46%{transform:rotate(var(--a)) translateX(calc(var(--d) + 8px)) scale(0.75);opacity:0.9;}
  52%{transform:rotate(var(--a)) translateX(calc(var(--d) + 10px)) translateY(6px) scale(0.6);opacity:0.1;}
  58%{transform:rotate(var(--a)) translateX(calc(var(--d) + 12px)) translateY(10px) scale(0.5);opacity:0.7;}
  68%{transform:rotate(var(--a)) translateX(calc(var(--d) + 14px)) translateY(16px) scale(0.25);opacity:0;}
  100%{opacity:0;}
}

@media (prefers-reduced-motion: reduce) {
  .mb-cloud, .mb-fw__rocket, .mb-fw__flash, .mb-fw__ring, .mb-spark { animation: none !important; }
  .mb-fw__ring { opacity: 0; }
  .mb-spark { opacity: 0.9; transform: rotate(var(--a)) translateX(var(--d)) scale(0.8); }
}