/* ==========================================================================
   mer-actors.css — 役者に勢いと息を入れる
   内田FB: 枠からはみ出るぐらいの勢いが欲しい／動いたら嬉しい（ブルブル震えたり）
   mer-story.css / mer-track.css の後に読み込む。
   ========================================================================== */

/* ---- PRACTICE：カードの枠を越えさせる ---- */
.mer-play { position: relative; }

.mer-play__card {
  /* 枠内に閉じ込めない。はみ出してこそ勢いが出る。 */
  overflow: visible;
  z-index: 1;
}

.mer-play__card:hover { z-index: 4; }

/* 背景の角丸は保ちたいので、地は擬似要素へ逃がす */
.mer-play__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
}

.mer-play__actor {
  z-index: 3;
  right: -30px;
  bottom: -20px;
  width: clamp(150px, 18vw, 250px);
  transform-origin: 50% 100%;
  animation: mer-idle-breathe 3.6s ease-in-out infinite;
}

/* 01 勝利のポーズ。ゆっくり大きく息をする */
.mer-play__card--lead .mer-play__actor {
  right: -26px;
  bottom: -26px;
  width: clamp(165px, 20vw, 280px);
  animation: mer-idle-breathe 3.2s ease-in-out infinite;
}

/* 02 走り。カードの右上へ飛び出して、常に前へブレる */
.mer-play__card:nth-child(2) .mer-play__actor {
  right: -52px;
  bottom: -14px;
  width: clamp(175px, 22vw, 305px);
  animation: mer-idle-dash 0.42s linear infinite;
}

/* 04 バストアップ。飛び出させず、時々ブルッと震える */
.mer-play__card:nth-child(4) .mer-play__actor {
  right: 4px;
  bottom: 0;
  width: clamp(104px, 12vw, 168px);
  animation: mer-idle-twitch 5.4s ease-in-out infinite;
}

.mer-play__card:hover .mer-play__actor {
  animation: mer-idle-shake 0.14s linear infinite;
  transform: translateY(-12px) scale(1.06);
}

@keyframes mer-idle-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-0.5deg); }
}

@keyframes mer-idle-dash {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-3px, -4px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ふだんは止まっていて、たまに一瞬だけ震える */
@keyframes mer-idle-twitch {
  0%, 86%, 100% { transform: translate(0, 0) rotate(0deg); }
  88%  { transform: translate(-2.5px, 0) rotate(-0.9deg); }
  90%  { transform: translate(2.5px, -1px) rotate(0.9deg); }
  92%  { transform: translate(-2px, 0) rotate(-0.7deg); }
  94%  { transform: translate(1.6px, -0.5px) rotate(0.5deg); }
  96%  { transform: translate(0, 0) rotate(0deg); }
}

@keyframes mer-idle-shake {
  0%   { transform: translateY(-12px) scale(1.06) translate(0, 0) rotate(0deg); }
  33%  { transform: translateY(-12px) scale(1.06) translate(-3px, 1px) rotate(-1.2deg); }
  66%  { transform: translateY(-12px) scale(1.06) translate(3px, -1px) rotate(1.2deg); }
  100% { transform: translateY(-12px) scale(1.06) translate(0, 0) rotate(0deg); }
}

@media (max-width: 980px) {
  .mer-play__actor,
  .mer-play__card--lead .mer-play__actor,
  .mer-play__card:nth-child(2) .mer-play__actor {
    right: -18px;
    bottom: -12px;
    width: clamp(126px, 32vw, 190px);
  }
  .mer-play__card:nth-child(4) .mer-play__actor { width: clamp(96px, 24vw, 140px); }
}

/* ---- STORY：4節の役者にも息を入れる ---- */
.mer-saga__fig img {
  transform-origin: 50% 100%;
  animation: mer-idle-breathe 4.2s ease-in-out infinite;
}

.mer-saga__step:nth-child(1) .mer-saga__fig img { animation-duration: 4.6s; }
.mer-saga__step:nth-child(2) .mer-saga__fig img { animation: mer-idle-twitch 6.2s ease-in-out infinite; }
.mer-saga__step:nth-child(3) .mer-saga__fig img { animation: mer-idle-dash 0.46s linear infinite; }
/* 04は進化の一幕（.mer-evolve）に置き換わったので、息づかいの尺は当てない。
   `:not(.mer-evolve)` を外すと、この1行が進化アニメの尺（4.2s）を3.4sに上書きし、
   絵の入れ替えが閃光より0.4秒早く起きる＝すり替えが見える（実際に起きた）。 */
.mer-saga__step:nth-child(4) .mer-saga__fig:not(.mer-evolve) img { animation-duration: 3.4s; }

/* ==========================================================================
   STORY 04「世界が、変わった。」— 進化の一幕
   2026-08-04 内田FB「黒髪で正面の絵が回転し、金髪になって、
   スーパーサイヤ人のようにオーラをまとう感じに進化させたい」

   段取り: 黒髪でためる → 3回転 → 光で目隠しして入れ替え → 金髪＋金のオーラ。
   入れ替えは回転の最中に白い閃光で隠す（2枚の絵の差を目に触れさせない）。

   状態は3つ。JSが持っているのは .is-ready の付け外しだけ。
     （素のHTML）  JSが動かない環境。最終形＝金髪をそのまま出す
     .is-ready     JSが握った。「変わる前」＝黒髪で待機
     .is-evolving  演じている最中（4.2秒）
     .is-awakened  演じ終わった姿。金髪のままオーラが息をする
   ========================================================================== */
.mer-evolve {
  position: relative;
  overflow: visible;
}

.mer-evolve__spin {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  animation: mer-idle-breathe 3.4s ease-in-out infinite;
}

/* 2枚を同じ器・同じ足元に重ねる。比率の違いは object-fit が吸収する。
   ここを width:auto で置くと、絵ごとに幅が変わって入れ替えの瞬間にズレる。 */
.mer-evolve .mer-evolve__pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  animation: none;
}

/* 金のオーラ。地の丸い光＋立ちのぼる炎2枚。ふだんは完全に消しておく */
.mer-evolve__aura {
  position: absolute;
  bottom: -8%;
  left: 50%;
  z-index: 1;
  width: 118%;
  height: 136%;
  opacity: 0;
  pointer-events: none;
  /* 中心を塗り潰すと、光の玉になって人物が沈む。中は薄く、縁で落とす */
  background: radial-gradient(ellipse 44% 56% at 50% 64%,
    rgba(255, 242, 196, 0.60) 0%,
    rgba(240, 178, 46, 0.38) 36%,
    rgba(240, 178, 46, 0.11) 58%,
    rgba(240, 178, 46, 0) 76%);
  filter: blur(4px);
  transform: translateX(-50%) scale(0.55);
}

.mer-evolve__aura::before,
.mer-evolve__aura::after {
  content: "";
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 52%;
  height: 126%;
  border-radius: 50% 50% 44% 44% / 64% 64% 36% 36%;
  background: linear-gradient(to top,
    rgba(255, 208, 96, 0.92) 0%,
    rgba(255, 236, 172, 0.52) 44%,
    rgba(255, 255, 255, 0) 86%);
  transform-origin: 50% 100%;
  transform: translateX(-50%);
}

.mer-evolve__aura::after {
  width: 28%;
  height: 162%;
  opacity: 0.78;
}

/* 変身の瞬間の閃光。ここで絵を入れ替える */
.mer-evolve__flash {
  position: absolute;
  inset: -10%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 56%,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 236, 168, 0.72) 32%,
    rgba(255, 212, 90, 0) 70%);
  transform: scale(0.7);
}

/* 衝撃波。1回だけ広がって消える */
.mer-evolve__ring {
  position: absolute;
  top: 58%;
  left: 50%;
  z-index: 1;
  width: 42%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 228, 156, 0.9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.15);
}

/* ---- 状態 ---- */
.mer-evolve .mer-evolve__pose--before { opacity: 0; }
.mer-evolve.is-ready .mer-evolve__pose--before { opacity: 1; }
.mer-evolve.is-ready .mer-evolve__pose--after { opacity: 0; }

.mer-evolve.is-evolving .mer-evolve__spin {
  animation: mer-evo-spin 4.2s cubic-bezier(0.62, 0, 0.28, 1) both;
}
/* 入れ替えは linear で。steps(1,end) は区切りの解釈がブラウザ任せで、
   実測すると閃光の頂点より 400ms 早く入れ替わっていた（＝すり替えが見えた）。
   43.5%→44% の 21ms で切り替える。目には一瞬にしか見えず、時刻はぶれない。 */
.mer-evolve.is-evolving .mer-evolve__pose--before { animation: mer-evo-before 4.2s linear both; }
.mer-evolve.is-evolving .mer-evolve__pose--after { animation: mer-evo-after 4.2s linear both; }
.mer-evolve.is-evolving .mer-evolve__aura { animation: mer-evo-aura 4.2s ease-out both; }
.mer-evolve.is-evolving .mer-evolve__flash { animation: mer-evo-flash 4.2s ease-out both; }
.mer-evolve.is-evolving .mer-evolve__ring { animation: mer-evo-ring 4.2s ease-out both; }

.mer-evolve.is-awakened .mer-evolve__pose--before { opacity: 0; }
.mer-evolve.is-awakened .mer-evolve__pose--after { opacity: 1; }
.mer-evolve.is-awakened .mer-evolve__spin { animation: mer-evo-power 3.0s ease-in-out infinite; }
.mer-evolve.is-awakened .mer-evolve__aura {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: mer-evo-aura-idle 2.8s ease-in-out infinite;
}

/* 炎は演じている間と、まとったあとだけ揺れる */
.mer-evolve.is-evolving .mer-evolve__aura::before,
.mer-evolve.is-awakened .mer-evolve__aura::before { animation: mer-evo-flame 1.15s ease-in-out infinite; }
.mer-evolve.is-evolving .mer-evolve__aura::after,
.mer-evolve.is-awakened .mer-evolve__aura::after { animation: mer-evo-flame 0.78s ease-in-out infinite reverse; }

/* 金髪側にだけ、金の縁を足す */
.mer-evolve.is-evolving .mer-evolve__pose--after,
.mer-evolve.is-awakened .mer-evolve__pose--after {
  filter:
    drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 206, 104, 0.60));
}

/* ---- keyframes ---- */
/* ためて（0〜20%）、3回転して（〜74%）、行き過ぎて戻る */
@keyframes mer-evo-spin {
  0%   { transform: translateY(0) rotateY(0deg) scale(1); }
  10%  { transform: translateY(4px) rotateY(-24deg) scale(0.95); }
  20%  { transform: translateY(4px) rotateY(-10deg) scale(0.92); }
  62%  { transform: translateY(-6px) rotateY(1000deg) scale(1.10); }
  74%  { transform: translateY(-10px) rotateY(1080deg) scale(1.20); }
  86%  { transform: translateY(0) rotateY(1080deg) scale(1.04); }
  100% { transform: translateY(0) rotateY(1080deg) scale(1.07); }
}

/* 入れ替えは閃光の頂点（44%＝約1.85秒）で。混ぜない */
@keyframes mer-evo-before {
  0%, 43.5% { opacity: 1; }
  44%, 100% { opacity: 0; }
}

@keyframes mer-evo-after {
  0%, 43.5% { opacity: 0; }
  44%, 100% { opacity: 1; }
}

@keyframes mer-evo-flash {
  0%, 34%   { opacity: 0;    transform: scale(0.62); }
  44%       { opacity: 0.94; transform: scale(1.14); }
  60%, 100% { opacity: 0;    transform: scale(1.55); }
}

/* 一度しぼんでから、一気に立ちのぼる。
   いちばん濃くするのは回転が正対で止まる76%。ここを外すと、
   オーラの頂点で人物が横向き（＝見えない）になる。 */
@keyframes mer-evo-aura {
  0%, 14%   { opacity: 0;    transform: translateX(-50%) scale(0.50); }
  32%       { opacity: 0.34; transform: translateX(-50%) scale(0.70); }
  43%       { opacity: 0.12; transform: translateX(-50%) scale(0.58); }
  58%       { opacity: 0.58; transform: translateX(-50%) scale(0.88); }
  76%       { opacity: 1;    transform: translateX(-50%) scale(1.16); }
  88%       { opacity: 0.90; transform: translateX(-50%) scale(0.98); }
  100%      { opacity: 1;    transform: translateX(-50%) scale(1); }
}

@keyframes mer-evo-ring {
  0%, 42%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.15); }
  48%       { opacity: 0.9; transform: translate(-50%, -50%) scale(0.65); }
  74%, 100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.2); }
}

@keyframes mer-evo-flame {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  25%      { transform: translateX(-50%) scale(0.90, 1.16); }
  50%      { transform: translateX(-50%) scale(1.08, 0.94); }
  75%      { transform: translateX(-50%) scale(0.95, 1.10); }
}

@keyframes mer-evo-aura-idle {
  0%, 100% { opacity: 0.84; transform: translateX(-50%) scale(0.97); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.07); }
}

@keyframes mer-evo-power {
  0%, 100% { transform: translateY(0) scale(1.05); }
  50%      { transform: translateY(-9px) scale(1.08); }
}

/* 縦画面は1列。オーラが上へ伸びると、真上のカード（03）の本文に被る。
   高さを詰めて、光をカードの中に収める。 */
@media (max-width: 980px) {
  .mer-evolve__aura { bottom: -4%; height: 116%; }
  .mer-evolve__aura::before { height: 104%; }
  .mer-evolve__aura::after { height: 128%; }
}

@media (prefers-reduced-motion: reduce) {
  .mer-evolve__spin,
  .mer-evolve.is-awakened .mer-evolve__spin,
  .mer-evolve.is-awakened .mer-evolve__aura,
  .mer-evolve__aura::before,
  .mer-evolve__aura::after { animation: none !important; }
  .mer-evolve.is-awakened .mer-evolve__aura {
    opacity: 0.9;
    transform: translateX(-50%) scale(1);
  }
}

/* ---- CTA：スクロールで一気に立ち上がる役者 ----
   拡大率(--grow)と沈み(--rise)は mer-track.js がスクロールから書き込む。
   呼吸のkeyframesの中で変数を掛けているのは、animationのtransformと
   scrollのtransformが打ち消し合うのを避けるため。 */
/* 位置の基準を、文字のかたまり（__inner）ではなく章全体にする。
   innerを基準にすると、育ったとき頭がヘッダーの裏へ抜ける（実際に抜けた）。 */
.mer-cta { position: relative; }
.mer-cta__inner { position: static; }

.mer-cta__actor {
  --grow: 0.32;
  --rise: 46px;
  right: clamp(40px, 10vw, 210px);
  bottom: clamp(40px, 8vh, 110px);
  transform-origin: 50% 100%;
  transform: translateY(var(--rise)) scale(var(--grow));
  animation: mer-cta-rise 3.8s ease-in-out infinite;
}

@keyframes mer-cta-rise {
  0%, 100% { transform: translateY(var(--rise)) scale(var(--grow)); }
  50%      { transform: translateY(calc(var(--rise) - 9px)) scale(calc(var(--grow) * 1.022)); }
}

@media (prefers-reduced-motion: reduce) {
  .mer-play__actor,
  .mer-play__card:hover .mer-play__actor,
  .mer-saga__fig img { animation: none !important; }
  .mer-cta__actor {
    animation: none !important;
    --grow: 1;
    --rise: 0px;
  }
}

/* 縦画面：拡大しても本文へ乗り上げないよう、上下に居場所を確保する */
@media (max-width: 980px) {
  .mer-cta__actor {
    position: static;
    display: block;
    width: clamp(180px, 52vw, 260px);
    margin: clamp(40px, 7vh, 70px) auto clamp(18px, 3vh, 30px);
  }
}

/* ==========================================================================
   縦画面の常駐CTA（顔つき）
   スクロールのどこにいても、相談への入口を切らさない。
   ========================================================================== */
.mer-dock { display: none; }

@media (max-width: 980px) {
  .mer-dock {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 60;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px 10px 10px;
    color: #f6f8ff;
    background: linear-gradient(122deg, #0d1526 0%, #1a2745 62%, #2c2138 130%);
    border: 1px solid rgba(240, 178, 46, 0.42);
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(8, 14, 28, 0.34);
  }

  .mer-dock__face {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border: 1px solid rgba(240, 178, 46, 0.55);
    border-radius: 50%;
  }

  .mer-dock__body { display: grid; gap: 2px; min-width: 0; }

  .mer-dock__label {
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .mer-dock__sub {
    overflow: hidden;
    color: rgba(212, 224, 250, 0.68);
    font-family: var(--mer-latin);
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mer-dock__arrow {
    color: rgba(240, 178, 46, 0.95);
    font-size: 1.1rem;
    font-style: normal;
  }

  /* 常駐ぶんの居場所をページ末尾に空ける */
  .mer-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* 幕が出ているあいだは隠す */
  .is-locked .mer-dock { display: none; }
}

/* 縦画面：役者は残したまま、本文に重ならせない。
   文字の右にキャラのぶんの席を空ける（重なったら勢いより可読性が先）。 */
@media (max-width: 980px) {
  .mer-play__card {
    min-height: clamp(250px, 30vh, 320px);
    padding-bottom: clamp(28px, 4vh, 44px);
  }

  /* 席を空けるのは本文だけ。見出しまで狭めると長いカタカナが割れる
     （「対面コンサルティン／グ」になった）。役者は下寄りなので見出しとは当たらない。
     2026-08-04 内田FB「スマホの人物をもうちょっと大きく」→ 30vw → 34vw（約13%増）。
     広げすぎると本文の右の席（padding-right）も広げることになり、
     1行が短くなって「企画から／運用改善まで、」のように行が割れる。ここが上限。 */
  .mer-play__card p { padding-right: 39%; }

  .mer-play__actor,
  .mer-play__card--lead .mer-play__actor,
  .mer-play__card:nth-child(2) .mer-play__actor {
    right: -14px;
    bottom: -10px;
    width: clamp(128px, 34vw, 190px);
  }

  .mer-play__card:nth-child(4) .mer-play__actor { width: clamp(102px, 27vw, 150px); }

  /* 3番は役者が居ないので、右の席は要らない */
  .mer-play__card:nth-child(3) p { padding-right: 0; }
}

@media (max-width: 560px) {
  .mer-play__card p { padding-right: 43%; }
}

/* ==========================================================================
   常駐CTAを作り直す — 顔を切り抜いて、頭をボタンの外へ出す
   枠に収めた丸アイコンは「ただのバナー」に見える。台座から人が生えている形にする。
   ========================================================================== */
@media (max-width: 980px) {
  .mer-dock {
    overflow: visible;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    padding: 13px 14px 13px 12px;
    border-width: 1.5px;
    border-color: rgba(240, 178, 46, 0.72);
    box-shadow:
      0 16px 44px rgba(8, 14, 28, 0.42),
      0 0 0 4px rgba(240, 178, 46, 0.10);
    animation: mer-dock-pulse 3.4s ease-in-out infinite;
  }

  /* 台座。ここから上へ人が出る */
  .mer-dock__stage {
    position: relative;
    display: block;
    width: 64px;
    height: 52px;
  }

  .mer-dock__stage::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 56px;
    height: 56px;
    background: radial-gradient(circle at 50% 40%, rgba(240, 178, 46, 0.30), rgba(240, 178, 46, 0.06) 62%, transparent 72%);
    border-radius: 50%;
    transform: translateX(-50%);
  }

  /* 頭がボタンの上端を越える */
  .mer-dock__face {
    position: absolute;
    bottom: -13px;
    left: 50%;
    width: 78px;
    height: auto;
    max-width: none;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  }

  .mer-dock__label { font-size: 1.12rem; letter-spacing: 0.005em; }
  .mer-dock__sub { font-size: 0.66rem; }

  .mer-dock__arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #0c1424;
    background: #f0b22e;
    border-radius: 50%;
  }

  .mer-dock__arrow svg { display: block; }
}

@keyframes mer-dock-pulse {
  0%, 100% { box-shadow: 0 16px 44px rgba(8, 14, 28, 0.42), 0 0 0 4px rgba(240, 178, 46, 0.10); }
  50%      { box-shadow: 0 16px 44px rgba(8, 14, 28, 0.42), 0 0 0 9px rgba(240, 178, 46, 0.02); }
}

@media (prefers-reduced-motion: reduce) {
  .mer-dock { animation: none !important; }
}

/* ==========================================================================
   スプラッシュの一幕 — 松葉杖から、走り出す
   読み込みの数秒に物語を1本通す。1周4.2秒。幕が消えるまでに一度は走る。
   ========================================================================== */
.mer-splash-run {
  position: relative;
  width: min(320px, 74vw);
  height: clamp(120px, 17vh, 168px);
  margin: clamp(6px, 1.4vh, 16px) auto 0;
}

.mer-splash-run__ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(32, 44, 72, 0) 0%,
    rgba(32, 44, 72, 0.22) 18%,
    rgba(32, 44, 72, 0.22) 82%,
    rgba(32, 44, 72, 0) 100%);
}

.mer-splash-pose {
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  height: 100%;
  max-width: none;
  opacity: 0;
  filter: drop-shadow(0 10px 16px rgba(28, 40, 72, 0.28));
  animation: 4.2s linear infinite;
}

.mer-splash-pose[data-pose="crutch"] {
  height: 96%;
  animation-name: mer-splash-crutch;
}

.mer-splash-pose[data-pose="standup"] {
  height: 74%;
  animation-name: mer-splash-standup;
}

.mer-splash-pose[data-pose="run"] {
  height: 100%;
  animation-name: mer-splash-run-pose;
}

/* 0〜45% 松葉杖でじりじり進む */
@keyframes mer-splash-crutch {
  0%   { opacity: 1; transform: translateX(4%); }
  40%  { opacity: 1; transform: translateX(30%); }
  45%  { opacity: 0; transform: translateX(32%); }
  100% { opacity: 0; transform: translateX(32%); }
}

/* 45〜58% 立ち上がる */
@keyframes mer-splash-standup {
  0%, 43%   { opacity: 0; transform: translateX(32%); }
  46%       { opacity: 1; transform: translateX(33%); }
  56%       { opacity: 1; transform: translateX(38%); }
  60%, 100% { opacity: 0; transform: translateX(40%); }
}

/* 58〜100% 一気に走り抜ける */
@keyframes mer-splash-run-pose {
  0%, 56%  { opacity: 0; transform: translateX(40%); }
  60%      { opacity: 1; transform: translateX(44%); }
  92%      { opacity: 1; transform: translateX(190%); }
  100%     { opacity: 0; transform: translateX(230%); }
}

@media (prefers-reduced-motion: reduce) {
  .mer-splash-pose { animation: none !important; }
  .mer-splash-pose[data-pose="run"] { opacity: 1; transform: translateX(44%); }
}

/* ==========================================================================
   BGMボタン＝メルおじの歌ウィジェット
   小さなイコライザーでは目立たないため、メルおじがマイクを差し出す絵に替えた。
   クリック（.is-on）で歌う絵に入れ替わり、音符はCSSで浮かせる。
   仕組みは bs-core.js の initSound のまま（.bs-sound の click と is-on の付け外し。
   JSには一切触れていない）。文字は画像に焼かずHTMLの吹き出しで持つ。
   ========================================================================== */
.bs-sound {
  display: block;
  width: clamp(104px, 10vw, 150px);
  height: auto;
  padding: 0;
  bottom: 10px;   /* PCは画面の隅ぎりぎりに置く（2026-08-05 内田指示） */
  background: none;
  border: none;
  transform-origin: 50% 100%;
  animation: mer-sing-wobble 2.8s ease-in-out infinite;
}
/* 再生中は揺れのリズムを少し速く＝ノッている */
.bs-sound.is-on { animation-duration: 1.5s; }

/* 影は人物だけに掛ける（ボタン全体に掛けるとオーラの光が灰色に濁る） */
.bs-sound__pose { display: none; width: 100%; height: auto; pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(8, 14, 28, 0.24)); }
.bs-sound:not(.is-on) .bs-sound__pose--invite { display: block; }
.bs-sound.is-on .bs-sound__pose--sing { display: block; }

/* 吹き出し。クリック前だけ出す */
.bs-sound__bubble {
  position: absolute;
  right: 8%;
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: 176px;
  padding: 9px 12px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
/* 吹き出しのしっぽ（縁つき二重三角） */
.bs-sound__bubble::before,
.bs-sound__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 22px;
  border-style: solid;
  border-color: transparent;
}
.bs-sound__bubble::before { border-width: 10px 7px 0 7px; border-top-color: var(--ink); }
.bs-sound__bubble::after  { border-width: 7px 5px 0 5px; right: 24px; border-top-color: #fff; }
.bs-sound.is-on .bs-sound__bubble { display: none; }

/* スーパーサイヤ人風の金色オーラ（画像には焼かない＝光はCSSの仕事）。
   芯のにじみ＋炎のスパイク2層。再生中は明るく・速く燃える */
.bs-sound__aura {
  position: absolute;
  inset: -34% -30% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(48% 46% at 50% 50%,
    rgba(255, 228, 150, 0.95), rgba(244, 186, 56, 0.55) 48%, rgba(240, 178, 46, 0.22) 66%, transparent 80%);
  filter: blur(6px);
  animation: mer-aura-breathe 2.4s ease-in-out infinite;
}
.bs-sound__aura::before,
.bs-sound__aura::after {
  content: "";
  position: absolute;
  inset: -10%;
  transform-origin: 50% 78%;
  -webkit-mask-image: radial-gradient(50% 56% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(50% 56% at 50% 50%, #000 30%, transparent 78%);
}
/* 炎のスパイク：とがった金の芒（のぎ）。2層を互い違いに揺らして炎のちらつきに */
.bs-sound__aura::before {
  background: repeating-conic-gradient(from 4deg,
    transparent 0deg 8deg, rgba(255, 218, 115, 0.85) 12deg 16deg, transparent 20deg 32deg);
  filter: blur(1.5px);
  animation: mer-aura-flick 1.15s ease-in-out infinite;
}
.bs-sound__aura::after {
  background: repeating-conic-gradient(from 21deg,
    transparent 0deg 11deg, rgba(255, 200, 80, 0.65) 15deg 19deg, transparent 23deg 39deg);
  filter: blur(2.5px);
  animation: mer-aura-flick 1.35s ease-in-out infinite reverse;
}
/* 再生中＝戦闘力が上がる。明るく・大きく・速く */
.bs-sound.is-on .bs-sound__aura { animation-duration: 1.4s; opacity: 1; }
.bs-sound.is-on .bs-sound__aura::before { animation-duration: 0.7s; }
.bs-sound.is-on .bs-sound__aura::after { animation-duration: 0.85s; }

@keyframes mer-aura-breathe {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50%      { transform: scale(1.07); opacity: 1; }
}
@keyframes mer-aura-flick {
  0%, 100% { transform: scale(0.97) rotate(-2deg); opacity: 0.5; }
  50%      { transform: scale(1.05) rotate(2.5deg); opacity: 0.95; }
}

/* 再生中の音符（画像に焼かずCSSで浮かせる）。金＋影で白地でも濃紺でも見える */
.bs-sound.is-on::before,
.bs-sound.is-on::after {
  position: absolute;
  color: #e0a52a;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(8, 14, 28, 0.4);
  pointer-events: none;
  animation: mer-note-rise 2.1s ease-out infinite;
}
.bs-sound.is-on::before { content: "♪"; top: -6px; right: 12%; font-size: 20px; }
.bs-sound.is-on::after  { content: "♫"; top: 2px; right: 34%; font-size: 15px; animation-delay: 1.05s; }

@keyframes mer-sing-wobble {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}
@keyframes mer-note-rise {
  0%   { opacity: 0; transform: translateY(8px) scale(0.8) rotate(-10deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.15) rotate(12deg); }
}

/* ドックが出る幅では、ドックの真上ギリギリに乗せる（2026-08-05 内田指示）
   ドック＝bottom12px＋実測高さ84px＝96px。+4px＝100px。
   （98pxだと360px幅で0.1px食い込み、揺れの回転でも下角が数px沈むため） */
@media (max-width: 980px) {
  .bs-sound { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  /* スマホは画面が狭いので吹き出しは出さない（2026-08-05 内田指示）。キャラとオーラだけで誘う */
  .bs-sound__bubble { display: none; }
}

/* アプリ内ブラウザ（LINE等）で再生できなかったときだけは、
   スマホで吹き出しを消す指示（上）より優先して理由を見せる */
.bs-sound.is-fail .bs-sound__bubble { display: block; }

@media (prefers-reduced-motion: reduce) {
  .bs-sound,
  .bs-sound.is-on::before,
  .bs-sound.is-on::after { animation: none !important; }
}