/* =========================================================
   LPの型 共通の動き（01 エレガントピンク＝あい先生LPの動きを、どの型にも足せるようにしたもの）
   motion.js が html に .motion-on を付けたときだけ効く。JSが動かなくても文字は全部見える。
   文字が読めなくなる動きはしない：ずらすのは14pxまで・ぼかしは見出しだけ一瞬・0.7秒で止まる。
   ========================================================= */
:root { --m-ease: cubic-bezier(.22, .61, .36, 1); }

/* 1. 画面に入ったら、下からふわっと（兄弟は少しずつ遅れて） */
.motion-on [data-m] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--m-ease), transform .7s var(--m-ease); transition-delay: var(--m-delay, 0s); }
.motion-on [data-m].m-in { opacity: 1; transform: none; }
/* 見出しだけ、うっすらぼかしから */
.motion-on [data-m="head"] { filter: blur(3px); transition-property: opacity, transform, filter; }
.motion-on [data-m="head"].m-in { filter: none; }

/* 2. 一番上（FV）：読み込んだら上から順に立ち上がる */
.motion-on [data-m-fv] { opacity: 0; animation: m-rise .9s var(--m-ease) forwards; animation-delay: var(--m-delay, 0s); }
@keyframes m-rise { from { opacity: 0; transform: translateY(16px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* 3. マーカー・帯：左から引かれる */
.motion-on [data-m-mark] { background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1s var(--m-ease) .25s; }
.motion-on [data-m-mark].m-in { background-size: 100% 100%; }
/* 箱型の帯（赤い箱など）は、左から開く */
.motion-on [data-m-box] { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--m-ease) .15s; }
.motion-on [data-m-box].m-in { clip-path: inset(0 0 0 0); }

/* 4. 申込ボタン：ゆっくり呼吸＋光が走る */
.motion-on [data-m-btn] { position: relative; overflow: hidden; animation: m-breathe 2.6s ease-in-out infinite; }
.motion-on [data-m-btn]::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg);
  animation: m-sweep 3.2s ease-in-out infinite;
}
/* 一番上のボタンは、立ち上がってから呼吸を始める（2つの動きを1つにまとめる） */
.motion-on [data-m-fv][data-m-btn] { animation: m-rise .9s var(--m-ease) var(--m-delay, 0s) forwards, m-breathe 2.6s ease-in-out calc(var(--m-delay, 0s) + 1s) infinite; }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes m-sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* 5. 大きな言葉：画面に入ったら1回だけ弾む */
.motion-on [data-m-pop].m-in { animation: m-pop 1.1s var(--m-ease) .3s; }
@keyframes m-pop { 0%, 100% { transform: none; } 30% { transform: translateY(-10px) scale(1.04); } 55% { transform: translateY(0) scale(.99); } 75% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .motion-on [data-m], .motion-on [data-m-fv] { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .motion-on [data-m-mark] { background-size: 100% 100% !important; transition: none !important; }
  .motion-on [data-m-box] { clip-path: none !important; transition: none !important; }
  .motion-on [data-m-btn], .motion-on [data-m-btn]::after, .motion-on [data-m-pop].m-in { animation: none !important; }
}