/* 動き（DESIGN.md §7）。上限3。transform / opacity だけで動かす。
   非表示の初期状態は html.motion のときだけ作る（boot.js）。JS 無効・reduced-motion・停止中は、内容が最初から全て見える。
   base.css の prefers-reduced-motion 規則は transition / animation を無効にする（併用）。 */

/* ---------- ヘッダーの状態変化（スクロールすると影が付く） ---------- */
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.site-header { transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.site-header.is-scrolled { background: var(--c-bg); border-bottom-color: transparent; box-shadow: 0 10px 24px -16px rgb(60 60 67 / .5); }  /* 不透明にして、下の面の文字が透けないようにする */

/* ---------- 出現: 見出しは rise、カード・行は pop（同じ並びの中で順に） ---------- */
.motion [data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.motion [data-reveal="rise"] { transform: translateY(14px); }
.motion [data-reveal="pop"]  { transform: translateY(8px) scale(.985); }
.motion [data-reveal].is-in  { opacity: 1; transform: none; }
.motion [data-reveal][data-d="1"] { transition-delay: .06s; }
.motion [data-reveal][data-d="2"] { transition-delay: .12s; }
.motion [data-reveal][data-d="3"] { transition-delay: .18s; }
.motion [data-reveal][data-d="4"] { transition-delay: .24s; }

/* ---------- hover: 要素ごとに挙動を変える（一律の浮き上がりにしない） ---------- */
/* 本文中のリンク: 薄い色が敷かれる（ボタンはずらし影、カードは持ち上がり） */
.prose a:not(.btn):not(.more) { transition: background-color var(--dur-fast), text-decoration-color var(--dur-fast); }
.prose a:not(.btn):not(.more):hover { background: color-mix(in srgb, var(--c-main) 9%, transparent); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) a:not(.btn):hover { background: rgb(255 255 255 / .14); }
/* よくある質問: 質問の文字が主色に */
.qa__q { transition: color var(--dur-fast); }
.qa__q:hover { color: var(--c-main); }
/* フッターのリンク: 主色に */
.site-footer a { transition: color var(--dur-fast); }
.site-footer a:hover { color: var(--c-main); }

/* ---------- 動きの停止ボタン（ゲート G7）。JS が出すまで hidden ---------- */
.motion-toggle {
  margin-left: var(--sp-4); padding: var(--sp-1) var(--sp-3);
  font: inherit; font-size: var(--fs-caption); color: var(--c-text-sub);
  background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-s); cursor: pointer;
}
.motion-toggle:hover { color: var(--c-main); border-color: var(--c-main); }
.motion-toggle[hidden] { display: none; }