/* ============================================================
   スクロール演出（2026-10-01 追加「派手にスクロールアニメーション」）
   ・careheart-motion.js が <html> に .chm を付けたときだけ効く。
     JSが動かない／「視差効果を減らす」設定の端末では何も隠さない＝本文は常に読める。
   ・モチーフは「おおきな輪」と町のイラスト：
       カード＝町の家が弾んで建つように下からポン
       写真＝輪（円）が広がって見えてくる
       見出しバッジ＝輪の波紋＋色の粒がはじける
       ピンクのリボン＝スクロールに合わせて伸び、先端をハートが走る
   ・終了後は transform / clip-path を残さない（fill-mode: backwards）。
     既存のホバー演出や常時アニメを上書きしないため。
   ============================================================ */

/* ---------- 共通：出現前は隠す ---------- */
.chm .chm-t:not(.chm-in){ opacity: 0; }
.chm .chm-in{
  animation-delay: var(--chm-d, 0ms); animation-fill-mode: backwards;
  /* 元の要素に常時アニメ(無限ループ・長い周期)があっても、演出は1回だけ走らせる */
  animation-iteration-count: 1; animation-direction: normal; animation-play-state: running;
}

/* 下からポン（オーバーシュートつき・わずかに傾く） */
@keyframes chmPop{
  0%  { opacity: 0; transform: translateY(70px) scale(.82) rotate(-4deg); }
  60% { opacity: 1; transform: translateY(-10px) scale(1.03) rotate(1deg); }
  80% { transform: translateY(3px) scale(.99) rotate(0); }
  100%{ opacity: 1; transform: none; }
}
.chm .chm-pop.chm-in{ animation-name: chmPop; animation-duration: .95s; animation-timing-function: cubic-bezier(.22,.8,.3,1); }

/* 左右から滑り込む（交互） */
@keyframes chmSlideL{
  0%  { opacity: 0; transform: translateX(-60px) rotate(-2deg); }
  70% { opacity: 1; transform: translateX(6px) rotate(.4deg); }
  100%{ opacity: 1; transform: none; }
}
@keyframes chmSlideR{
  0%  { opacity: 0; transform: translateX(60px) rotate(2deg); }
  70% { opacity: 1; transform: translateX(-6px) rotate(-.4deg); }
  100%{ opacity: 1; transform: none; }
}
.chm .chm-sl.chm-in{ animation-name: chmSlideL; animation-duration: .85s; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
.chm .chm-sr.chm-in{ animation-name: chmSlideR; animation-duration: .85s; animation-timing-function: cubic-bezier(.2,.8,.3,1); }

/* 写真：輪が広がって見えてくる */
@keyframes chmRing{
  0%  { opacity: 1; clip-path: circle(0% at 50% 50%); }
  100%{ opacity: 1; clip-path: circle(75% at 50% 50%); }
}
@keyframes chmRingImg{
  0%  { transform: scale(1.35) rotate(-3deg); }
  100%{ transform: none; }
}
.chm .chm-ring.chm-in{ animation-name: chmRing; animation-duration: 1.25s; animation-timing-function: cubic-bezier(.6,.05,.25,1); }
.chm .chm-ring.chm-in img{ animation: chmRingImg 1.6s cubic-bezier(.2,.7,.2,1) var(--chm-d, 0ms) backwards; }

/* ボタン：ゴムのように弾んで出る */
@keyframes chmJelly{
  0%  { opacity: 0; transform: scale(.3); }
  45% { opacity: 1; transform: scale(1.12, .9); }
  65% { transform: scale(.94, 1.06); }
  82% { transform: scale(1.03, .98); }
  100%{ opacity: 1; transform: none; }
}
.chm .chm-jelly.chm-in{ animation-name: chmJelly; animation-duration: .9s; animation-timing-function: ease-out; }

/* 本文：下からふわっと */
@keyframes chmRise{
  0%  { opacity: 0; transform: translateY(34px); }
  100%{ opacity: 1; transform: none; }
}
.chm .chm-rise.chm-in{ animation-name: chmRise; animation-duration: .9s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }

/* ---------- 見出し：1文字ずつ跳ねる ---------- */
.chm-ch{ display: inline-block; white-space: pre; }
.chm .chm-chars:not(.chm-in) .chm-ch{ opacity: 0; }
@keyframes chmChar{
  0%  { opacity: 0; transform: translateY(.9em) scale(.4) rotate(-20deg); }
  55% { opacity: 1; transform: translateY(-.28em) scale(1.18) rotate(6deg); }
  100%{ opacity: 1; transform: none; }
}
.chm .chm-chars.chm-in .chm-ch{
  animation: chmChar .7s cubic-bezier(.3,1.4,.5,1) calc(var(--chm-d, 0ms) + var(--i) * 45ms) backwards;
}

/* ---------- 見出しバッジ：輪の波紋＋色の粒 ---------- */
.chm-burst{
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  pointer-events: none; z-index: -1;
}
.chm-burst i{
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: var(--chm-c, #fdb5c6);
  width: var(--s, 12px); height: var(--s, 12px); margin: calc(var(--s, 12px) / -2) 0 0 calc(var(--s, 12px) / -2);
  opacity: 0;
  animation: chmDot 1.1s cubic-bezier(.15,.7,.3,1) var(--dl, .25s) forwards;
}
@keyframes chmDot{
  0%  { opacity: 0; transform: translate(0, 0) scale(.2); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
  100%{ opacity: 0; transform: translate(calc(var(--x) * 1.12), calc(var(--y) * 1.12 + 14px)) scale(.6); }
}
.chm-burst b{
  position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 4px solid var(--chm-c, #fdb5c6);
  opacity: 0;
  animation: chmWave 1.2s cubic-bezier(.2,.7,.3,1) var(--dl, .2s) forwards;
}
@keyframes chmWave{
  0%  { opacity: .9; transform: scale(.2); border-width: 10px; }
  100%{ opacity: 0; transform: scale(3.2); border-width: 1px; }
}

/* ---------- リボンの先端を走るハート ---------- */
.chm-runner{
  position: absolute; left: 0; top: 0; z-index: 9005;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  pointer-events: none; will-change: transform;
  transition: opacity .3s;
}
.chm-runner svg{ display: block; width: 100%; height: 100%; animation: chmBeat 1.1s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(232,110,140,.35)); }
@keyframes chmBeat{
  0%,100%{ transform: scale(1); }
  15%    { transform: scale(1.22); }
  30%    { transform: scale(.96); }
  45%    { transform: scale(1.12); }
}
@media screen and (max-width: 767px){
  .chm-runner{ width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}

/* ---------- 横はみ出し防止（滑り込み・粒が画面外へ出る分） ---------- */
.chm body{ overflow-x: clip; }

/* ---------- 視差効果を減らす設定では一切動かさない（JSも .chm を付けない） ---------- */
@media (prefers-reduced-motion: reduce){
  .chm .chm-t, .chm .chm-ch{ opacity: 1 !important; animation: none !important; }
  .chm-burst, .chm-runner{ display: none !important; }
}