/* =========================================================
   動きの部品集（見た目の動き）
   14個の型にあった動きを、どの型の部品にも付けられる形にまとめたもの。
   - クラスも @keyframes も「m-」で始める（型の .reveal・@keyframes shine などとぶつけない）
   - 色はトーンの変数（--c-*）だけ。直書きしない
   - 強さ・速さは下の --m-* で変える（トーンごとの値は tones.css）
   - 動かす量は transform ではなく translate / scale / rotate で持つ
     （部品がもともと transform で傾けている・寄せている所を壊さない）
   - 画面に入ってから出す物（m-reveal など）は、motion.js が動いたときだけ隠す（html.m-js）。
     JS が動かない環境では全部そのまま見える
   ========================================================= */
:root {
  --m-speed: 1;              /* 時間の倍率。1.5 で1.5倍ゆっくり */
  --m-distance: 22px;        /* 出てくるときに動く距離 */
  --m-strength: 1;           /* 弾む・揺れる・脈打つ大きさの倍率 */
  --m-blur: 4px;             /* にじみ出るときのぼかし */
  --m-stagger: .12s;         /* 順番に出るときの間隔 */
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* =========================================================
   1. 画面に入ると出る（motion.js が m-is-in を付ける）
   ========================================================= */

/* ふわっと出る（下から）。--left / --right で横から、--blur でにじみ出る */
.m-reveal { transition: opacity calc(.9s * var(--m-speed)) var(--m-ease), translate calc(.9s * var(--m-speed)) var(--m-ease), filter calc(.9s * var(--m-speed)) var(--m-ease); }
.m-js .m-reveal:not(.m-is-in) { opacity: 0; translate: 0 var(--m-distance); }
.m-js .m-reveal--left:not(.m-is-in) { translate: calc(var(--m-distance) * -1.6) 0; }
.m-js .m-reveal--right:not(.m-is-in) { translate: calc(var(--m-distance) * 1.6) 0; }
.m-js .m-reveal--blur:not(.m-is-in) { filter: blur(var(--m-blur)); }

/* 中身が順番に出る（親に付ける） */
.m-stagger > * { transition: opacity calc(.7s * var(--m-speed)) var(--m-ease), translate calc(.7s * var(--m-speed)) var(--m-ease), rotate calc(.6s * var(--m-speed)) var(--m-ease); }
.m-js .m-stagger:not(.m-is-in) > * { opacity: 0; translate: 0 calc(var(--m-distance) * .7); }
.m-stagger.m-is-in > :nth-child(2) { transition-delay: calc(var(--m-stagger) * 1); }
.m-stagger.m-is-in > :nth-child(3) { transition-delay: calc(var(--m-stagger) * 2); }
.m-stagger.m-is-in > :nth-child(4) { transition-delay: calc(var(--m-stagger) * 3); }
.m-stagger.m-is-in > :nth-child(5) { transition-delay: calc(var(--m-stagger) * 4); }
.m-stagger.m-is-in > :nth-child(6) { transition-delay: calc(var(--m-stagger) * 5); }
.m-stagger.m-is-in > :nth-child(7) { transition-delay: calc(var(--m-stagger) * 6); }
.m-stagger.m-is-in > :nth-child(n+8) { transition-delay: calc(var(--m-stagger) * 7); }
/* 一文字ずつ札がめくれる（一文字ずつ <span> で包む） */
.m-stagger--flip > * { display: inline-block; }
.m-js .m-stagger--flip:not(.m-is-in) > * { translate: none; rotate: y 90deg; }
.m-stagger--flip.m-is-in > * { --m-stagger: .08s; }

/* 弾んで出る（小さい所から大きく） */
.m-pop { display: inline-block; transition: opacity calc(.5s * var(--m-speed)) var(--m-ease), scale calc(.6s * var(--m-speed)) var(--m-ease-pop); }
.m-js .m-pop:not(.m-is-in) { opacity: 0; scale: calc(1 - .4 * var(--m-strength)); }

/* 画面に入ったら1回ぴょんと跳ねる言葉 */
.m-bounce { display: inline-block; }
.m-bounce.m-is-in { animation: m-bounce calc(1.2s * var(--m-speed)) var(--m-ease) .3s; }
@keyframes m-bounce {
  0%, 100% { translate: none; rotate: none; }
  30% { translate: 0 calc(-14px * var(--m-strength)); rotate: calc(-3deg * var(--m-strength)); }
  55% { translate: none; rotate: calc(2deg * var(--m-strength)); }
  75% { translate: 0 calc(-5px * var(--m-strength)); rotate: none; }
}

/* 蛍光ペンが引かれる（下半分）。--full で文字全体の帯 */
.m-marker {
  background: linear-gradient(transparent 62%, var(--c-highlight) 62%) no-repeat 0 0 / 0% 100%;
  transition: background-size calc(1.1s * var(--m-speed)) var(--m-ease) .2s;
}
.m-marker--full { padding: 0 .1em; background-image: linear-gradient(var(--c-highlight-pale), var(--c-highlight-pale)); }
.m-marker.m-is-in, html:not(.m-js) .m-marker { background-size: 100% 100%; }

/* 線が伸びる（横）。--y で縦 */
.m-draw { transform-origin: left center; transition: scale calc(1.1s * var(--m-speed)) var(--m-ease); }
.m-js .m-draw:not(.m-is-in) { scale: 0 1; }
.m-draw--y { transform-origin: center top; }
.m-js .m-draw--y:not(.m-is-in) { scale: 1 0; }
/* 線そのものが要るとき（中身の無い線） */
.m-line { display: block; width: min(70%, 240px); height: 1px; margin: 12px auto; background: var(--c-highlight-deep); }
.m-line.m-draw--y { width: 1px; height: 60px; }

/* 棒グラフが伸びる（子に style="--m-h: .6" で高さの割合） */
.m-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 90px; }
.m-bars > * { display: block; width: 16px; height: calc(var(--m-h, 1) * 100%); background: var(--c-primary); transform-origin: bottom; transition: scale calc(.8s * var(--m-speed)) var(--m-ease); }
.m-js .m-bars:not(.m-is-in) > * { scale: 1 0; }
.m-bars.m-is-in > * { transition-delay: calc(var(--m-h, 1) * .6s * var(--m-speed)); }

/* ドーナツが描かれる（--m-value で割合。色分けしたいときは --m-donut-fill に conic-gradient を渡す） */
@property --m-sweep { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.m-donut {
  position: relative; display: grid; place-items: center; width: min(52%, 220px); aspect-ratio: 1; border-radius: 50%;
  background:
    conic-gradient(transparent var(--m-sweep), var(--c-bg-alt) 0),
    var(--m-donut-fill, conic-gradient(var(--c-accent) 0 var(--m-value, 75%), var(--c-line) 0));
  transition: --m-sweep calc(1.4s * var(--m-speed)) var(--m-ease);
}
.m-js .m-donut:not(.m-is-in) { --m-sweep: 0%; }
.m-donut > * { display: grid; place-items: center; align-content: center; width: 62%; aspect-ratio: 1; margin: 0; border-radius: 50%; background: var(--c-bg); color: var(--c-accent-deep); line-height: 1.3; }

/* スクロールに合わせて縦線が伸び、先に光の点（motion.js が --m-p を 0〜1 で入れる） */
.m-scroll-line { --m-p: 0; position: relative; width: 2px; height: 40vh; margin: 0 auto; }
.m-scroll-line::before { content: ""; position: absolute; inset: 0; border-radius: 1px; background: linear-gradient(var(--c-highlight-deep), var(--c-primary)); transform-origin: top; scale: 1 var(--m-p); }
.m-scroll-line::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--m-p) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--c-bg); box-shadow: 0 0 6px 2px var(--c-primary), 0 0 16px 6px color-mix(in srgb, var(--c-primary) 35%, transparent);
  opacity: min(1, calc(var(--m-p) * 8));
}

/* =========================================================
   2. 開いたときに1回（JS なしで動く。最初の画面＝FV 向け）
   ========================================================= */

/* にじみ出る（下から・ぼかしが取れながら）。遅らせるときは style="--m-delay: .4s" */
.m-rise { animation: m-rise calc(1.1s * var(--m-speed)) var(--m-ease) var(--m-delay, .2s) both; }
@keyframes m-rise { from { opacity: 0; translate: 0 calc(var(--m-distance) * .8); filter: blur(var(--m-blur)); } to { opacity: 1; translate: none; filter: none; } }

/* 写真がゆっくり寄りから引く（ケン・バーンズ）。外枠に overflow: hidden がある所で使う */
.m-zoom { animation: m-zoom calc(18s * var(--m-speed)) ease-out both; transform-origin: 30% 40%; }
@keyframes m-zoom { from { scale: calc(1 + .08 * var(--m-strength)); } to { scale: 1; } }

/* 帯が画面の外から入ってくる（右から）。--left で左から */
.m-slide-in { animation: m-slide-in calc(.9s * var(--m-speed)) var(--m-ease) var(--m-delay, .4s) both; }
.m-slide-in--left { animation-name: m-slide-in-left; }
@keyframes m-slide-in { from { translate: 105% 0; } to { translate: none; } }
@keyframes m-slide-in-left { from { translate: -105% 0; } to { translate: none; } }

/* =========================================================
   3. ずっと続く（読ませたい所だけ。README の決まりを守る）
   ========================================================= */

/* 文字に光が流れる（主役色のグラデーション文字） */
.m-shine {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--c-primary-deep) 0%, var(--c-primary) 35%, color-mix(in srgb, var(--c-primary) 40%, var(--c-bg)) 50%, var(--c-primary) 65%, var(--c-primary-deep) 100%);
  background-size: 250% 100%; animation: m-shine calc(5s * var(--m-speed)) ease-in-out infinite;
}
.m-shine--accent { background-image: linear-gradient(100deg, var(--c-accent-deep) 0%, var(--c-accent) 35%, color-mix(in srgb, var(--c-accent) 40%, var(--c-bg)) 50%, var(--c-accent) 65%, var(--c-accent-deep) 100%); }
@keyframes m-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }

/* ボタンの上を光が通り過ぎる */
.m-sweep { position: relative; overflow: hidden; isolation: isolate; }
.m-sweep::after {
  content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--c-bg) 70%, transparent), transparent);
  transform: skewX(-20deg); animation: m-sweep calc(3.2s * var(--m-speed)) ease-in-out infinite;
}
@keyframes m-sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* きらめく（どの要素にも）。形は m-star（4点の星）と組み合わせる */
.m-twinkle { animation: m-twinkle calc(2.8s * var(--m-speed)) ease-in-out var(--m-delay, 0s) infinite; }
@keyframes m-twinkle { 0%, 100% { opacity: .25; scale: calc(1 - .4 * var(--m-strength)); rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
.m-star { display: inline-block; width: 26px; height: 26px; background: var(--c-highlight-deep); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
/* 見出しの横で大小2つの星がきらめく。<span class="m-sparkle" aria-hidden="true"></span> を文字の前後に置く */
.m-sparkle { position: relative; display: inline-block; width: .9em; height: .9em; margin: 0 .2em; vertical-align: top; pointer-events: none; }
.m-sparkle::before, .m-sparkle::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--c-highlight-deep);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: m-twinkle calc(2.8s * var(--m-speed)) ease-in-out infinite;
}
.m-sparkle::after { width: 50%; height: 50%; left: 90%; top: -50%; animation-delay: calc(1.1s * var(--m-speed)); }

/* 脈打つ（申込ボタンがゆっくりふくらむ） */
.m-breathe { animation: m-breathe calc(2.6s * var(--m-speed)) ease-in-out infinite; }
@keyframes m-breathe { 0%, 100% { scale: 1; } 50% { scale: calc(1 + .035 * var(--m-strength)); } }

/* 明滅する（YES・今だけ など） */
.m-blink { animation: m-blink calc(1.6s * var(--m-speed)) ease-in-out infinite; }
@keyframes m-blink { 50% { opacity: calc(1 - .25 * var(--m-strength)); } }

/* ときどきぴょこっと跳ねる（気づかせたいボタン） */
.m-hop { animation: m-hop calc(2.4s * var(--m-speed)) ease-in-out infinite; }
@keyframes m-hop { 0%, 70%, 100% { translate: none; } 78% { translate: 0 calc(-4px * var(--m-strength)); } 86% { translate: none; } 92% { translate: 0 calc(-2px * var(--m-strength)); } }

/* ふわふわ上下する（下向き矢印）。--x で横（横にめくれる合図）。m-bob-group は中身が時間差で */
.m-bob { animation: m-bob calc(1.6s * var(--m-speed)) ease-in-out infinite; }
.m-bob--x { animation-name: m-bob-x; }
.m-bob-group > * { animation: m-bob calc(1.6s * var(--m-speed)) var(--m-ease) infinite; }
.m-bob-group > :nth-child(2) { animation-delay: .15s; }
.m-bob-group > :nth-child(3) { animation-delay: .3s; }
.m-bob-group > :nth-child(n+4) { animation-delay: .45s; }
@keyframes m-bob { 50% { translate: 0 calc(6px * var(--m-strength)); } }
@keyframes m-bob-x { 50% { translate: calc(5px * var(--m-strength)) 0; } }
/* 下向き矢印そのものが要るとき */
.m-chev { display: block; width: 22px; height: 22px; margin: 4px auto 0; border: solid var(--c-accent); border-width: 0 4px 4px 0; rotate: 45deg; }

/* 波紋が広がる（「今」の印・ライブの印） */
.m-ripple { border-radius: 50%; animation: m-ripple calc(2.4s * var(--m-speed)) ease-out infinite; }
@keyframes m-ripple { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 calc(22px * var(--m-strength)) transparent; } }

/* 横に流れ続ける（ロゴ・メディア掲載）。外枠 m-marquee、中に並び m-marquee__track。複製は motion.js */
.m-marquee { overflow: hidden; }
.m-marquee__track { display: flex; gap: 24px; width: max-content; padding: 0 12px; }
.m-marquee__track.m-is-moving { animation: m-marquee calc(28s * var(--m-speed)) linear infinite; }
.m-marquee:hover .m-is-moving { animation-play-state: paused; }
@keyframes m-marquee { to { translate: calc(-50% - 12px) 0; } }

/* =========================================================
   4. さわると動く
   ========================================================= */

/* 押し込めるボタン（下に厚みの影。乗せると沈む） */
.m-press {
  --m-depth: 5px;
  box-shadow: 0 var(--m-depth) 0 var(--m-press-shadow, var(--c-cta-deep)), 0 10px 20px color-mix(in srgb, var(--c-ink) 18%, transparent);
  transition: translate .15s var(--m-ease), box-shadow .15s var(--m-ease), filter .2s;
}
.m-press:hover { translate: 0 calc(var(--m-depth) * .5); box-shadow: 0 calc(var(--m-depth) * .5) 0 var(--m-press-shadow, var(--c-cta-deep)), 0 5px 10px color-mix(in srgb, var(--c-ink) 18%, transparent); filter: brightness(1.06); }
.m-press:active { translate: 0 var(--m-depth); box-shadow: 0 0 0 var(--m-press-shadow, var(--c-cta-deep)); }

/* 開け閉め（<details class="m-acc"><summary>…</summary>…</details>）。＋が×に回り、中身がふわっと出る */
.m-acc summary { position: relative; padding-right: 2em; cursor: pointer; list-style: none; }
.m-acc summary::-webkit-details-marker { display: none; }
.m-acc summary::after { content: "+"; position: absolute; right: .3em; top: 50%; translate: 0 -50%; font-size: 1.4em; line-height: 1; color: var(--c-primary); transition: rotate .3s var(--m-ease); }
.m-acc[open] summary::after { rotate: 45deg; }
.m-acc[open] > :not(summary) { animation: m-fade-up calc(.5s * var(--m-speed)) var(--m-ease); }

/* 中身が切り替わった・開いたときにふわっと（タブ・続きを読む・YES の後ろで motion.js が使う） */
.m-fade-in { animation: m-fade-up calc(.5s * var(--m-speed)) var(--m-ease); }
@keyframes m-fade-up { from { opacity: 0; translate: 0 calc(var(--m-distance) * .6); } to { opacity: 1; translate: none; } }

/* 続きを読む（data-m-more の本文）。閉じている間は下がにじんで消える */
.m-more { position: relative; overflow: hidden; transition: max-height calc(.7s * var(--m-speed)) var(--m-ease); }
.m-more[data-m-collapsed] { max-height: var(--m-more-height, 9.5em); }
.m-more[data-m-collapsed]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5em; background: linear-gradient(transparent, var(--m-more-fade, var(--c-bg))); }

/* スクロールしたら影がつく（data-m-scrolled を付けたヘッダー） */
.m-shade { transition: box-shadow .3s, background-color .3s; }
.m-shade.m-is-scrolled { box-shadow: 0 2px 12px color-mix(in srgb, var(--c-ink) 15%, transparent); }

/* 追従ボタン（data-m-follow）。位置は部品側で決める。出す・隠すだけをここで持つ */
.m-follow { transition: opacity calc(.4s * var(--m-speed)) var(--m-ease), translate calc(.4s * var(--m-speed)) var(--m-ease); }
.m-js .m-follow:not(.m-is-show) { opacity: 0; translate: 0 140%; pointer-events: none; }
.m-js .m-follow--side:not(.m-is-show) { translate: -16px 0; }
/* 下に付いてくるボタンの置き場が要るとき */
.m-follow--bottom { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50; width: min(calc(100% - 32px), 420px); margin-left: calc(min(calc(100% - 32px), 420px) / -2); }

/* YES の関門（data-m-gate）で隠している間 */
.m-is-gated { display: none !important; }

/* =========================================================
   動きを減らす設定の人には、全部止めて最初から見せる
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  [class^="m-"], [class*=" m-"], [class^="m-"]::before, [class*=" m-"]::before, [class^="m-"]::after, [class*=" m-"]::after,
  [class^="m-"] > *, [class*=" m-"] > * { animation: none !important; transition: none !important; }
  .m-js .m-reveal, .m-js .m-stagger > *, .m-js .m-pop, .m-js .m-draw, .m-js .m-bars > *, .m-js .m-follow.m-is-show {
    opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important;
  }
  .m-marker { background-size: 100% 100% !important; }
  .m-js .m-donut { --m-sweep: 100% !important; }
}