/* ==========================================================
 *  kh-backbtn.css
 *  戻るボタン（.khblog-backbtn）のキーブレードモーション
 *  配置: cocoon-child-master/css/kh-backbtn.css
 *  読み込み: functions/13_backbtn.php（全ページ）
 *  ---------------------------------------------------------
 *  ・通常時：キーブレードは 9時方向（左向き）
 *  ・クリック時：12時方向（上）に振りかぶり → 9時方向へ振り下ろす
 *  ・ボタンが左へスライドする／飛んでいく動きは無効化
 *  ※ 元のSVGは刃先が右上（1時半方向）を向いているので
 *     -45deg で 12時、-135deg で 9時になる
 * ========================================================== */

/* ---------- ボタン本体：左スライド・飛んでいく動きを打ち消す ---------- */
body .khblog-backbtn,
body .khblog-backbtn:hover,
body .khblog-backbtn:active,
body .khblog-backbtn.is-leaving {
  transform: none;
}
body .khblog-backbtn.is-leaving {
  opacity: 1;
  transition: box-shadow 0.25s ease, background 0.2s ease;
}

/* ---------- キーブレード：通常は 9時 ---------- */
body .khblog-backbtn .khblog-backbtn-kb,
body .khblog-backbtn:hover .khblog-backbtn-kb {
  position: relative;
  overflow: visible;
  transform: none;
  transition: none;
}
body .khblog-backbtn .khblog-backbtn-kb svg,
body .khblog-backbtn:hover .khblog-backbtn-kb svg {
  overflow: visible;
  /* 支点＝柄の付け根（SVG座標 12,20 付近） */
  transform-origin: 37.5% 62.5%;
  transform: rotate(-135deg); /* 9時 */
  transition: none;
}

/* ---------- クリック時：12時に振りかぶって 9時へ振り下ろす ----------
 *  is-swing   … グッズ検索の戻るボタン（13_backbtn.php）
 *  is-leaving … 既存の戻るボタン（クリック時に既存スクリプトが付けるクラス）
 */
body .khblog-backbtn.is-swing .khblog-backbtn-kb svg,
body .khblog-backbtn.is-leaving .khblog-backbtn-kb svg {
  animation: khbb-swing 0.5s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}
@keyframes khbb-swing {
  0%   { transform: rotate(-135deg); }                              /* 9時 */
  30%  { transform: rotate(-45deg);  animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); } /* 12時に振りかぶる */
  78%  { transform: rotate(-150deg); }                              /* 振り抜き */
  100% { transform: rotate(-135deg); }                              /* 9時で止まる */
}

/* 振った軌跡の光（12時→9時の弧） */
body .khblog-backbtn .khblog-backbtn-kb::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border-top: 2px solid rgba(255, 209, 102, 0.6);
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) scale(0.6);
  opacity: 0;
  pointer-events: none;
}
body .khblog-backbtn.is-swing .khblog-backbtn-kb::after,
body .khblog-backbtn.is-leaving .khblog-backbtn-kb::after {
  animation: khbb-trail 0.5s ease-out;
}
@keyframes khbb-trail {
  0%, 30% { opacity: 0;   transform: rotate(-45deg) scale(0.6); }
  55%     { opacity: 0.9; }
  100%    { opacity: 0;   transform: rotate(-45deg) scale(1.05); }
}

/* ---------- 検索結果・ジャンル別一覧に追加したボタンの位置 ---------- */
body.search .khblog-backbtn--top,
body.tax-goods_genre .khblog-backbtn--top {
  margin: 4px 0 12px;
}
body.search .khblog-backbtn--bottom,
body.tax-goods_genre .khblog-backbtn--bottom {
  margin: 20px 0 8px;
}

/* ---------- 動きを減らす設定：9時で静止 ---------- */
@media (prefers-reduced-motion: reduce) {
  body .khblog-backbtn.is-swing .khblog-backbtn-kb svg,
  body .khblog-backbtn.is-leaving .khblog-backbtn-kb svg {
    animation: none;
  }
  body .khblog-backbtn .khblog-backbtn-kb::after {
    display: none;
  }
}