/* motion-base — 必ず入れる4つの状態変化（density-and-motion.md の契約）
   デザインが何であれ、このCSSとmotion.jsを入れて目印(data属性)を付ければ契約を満たす。
   色・影の強さは案件のトークンに合わせて上書きしてよい。動きの有無を消してはいけない。 */

:root {
  --mb-ease: cubic-bezier(.16, 1, .3, 1);
  --mb-dur: .32s;
}

/* ---- 1. スクロールで変わるヘッダー ---------------------------------- */
[data-motion="scroll-header"] {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color var(--mb-dur), box-shadow var(--mb-dur),
              padding var(--mb-dur), backdrop-filter var(--mb-dur);
}
[data-motion="scroll-header"].is-scrolled {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 16px rgba(0, 0, 0, .08);
  padding-block: .5rem;
}

/* ---- 2. 押せるものが反応する ---------------------------------------- */
[data-interactive] {
  transition: transform var(--mb-dur) var(--mb-ease), box-shadow var(--mb-dur),
              background-color var(--mb-dur), color var(--mb-dur), border-color var(--mb-dur);
}
[data-interactive] img { transition: transform .7s var(--mb-ease); }
[data-interactive]:has(img) { overflow: hidden; }

@media (hover: hover) {
  [data-interactive="primary-cta"]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
  [data-interactive="card"]:hover        { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .10); }
  [data-interactive="card"]:hover img    { transform: scale(1.05); }
  [data-interactive="link"]:hover        { background-size: 100% 1px; }
}

/* リンクの下線が左から引かれる（linkは下線をbackgroundで描く） */
[data-interactive="link"] {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  transition: background-size .4s var(--mb-ease);
}

/* 指で押した瞬間・キーボードで選んだとき（スマホではこの2つが hover の代わり） */
[data-interactive]:active { transform: translateY(0) scale(.99); }
[data-interactive]:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---- 3. 内容が一度だけ現れる（かたまり単位） ------------------------- */
[data-motion="reveal"] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s var(--mb-ease), transform .42s var(--mb-ease);
}
[data-motion="reveal"].is-in > * { opacity: 1; transform: none; }
[data-motion="reveal"].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-motion="reveal"].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-motion="reveal"].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-motion="reveal"].is-in > *:nth-child(n+5) { transition-delay: .3s; }

/* ---- 4. スマホメニュー（開いた結果が見える） ------------------------- */
[data-motion="drawer"] {
  transition: opacity var(--mb-dur), visibility var(--mb-dur), transform var(--mb-dur) var(--mb-ease);
}
[data-motion="drawer"][hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; }
[data-motion="drawer"]:not([hidden]) { opacity: 1; visibility: visible; }
body.is-nav-open { overflow: hidden; }  /* 背面が動かないように */

/* ---- 動きを減らす設定の人にも、内容は最初から全部見せる -------------- */
@media (prefers-reduced-motion: reduce) {
  [data-motion="reveal"] > * { opacity: 1; transform: none; transition: none; }
  [data-motion="marquee"] > * { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ---- 見せ場（使うときだけ。1ページに0〜1個） ------------------------- */
/* (a) 流れる帯 */
[data-motion="marquee"] { overflow: hidden; white-space: nowrap; }
[data-motion="marquee"] > * {
  display: inline-flex; gap: 3rem; padding-right: 3rem;
  animation: mb-marquee 28s linear infinite;
}
@keyframes mb-marquee { to { transform: translateX(-100%); } }

/* (b) 写真がマスクで開く */
[data-motion="mask"] { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--mb-ease); }
[data-motion="mask"].is-in { clip-path: inset(0 0 0 0); }

/* (c) 数字が伸びる下線つきで出る（数値の実績用。カウントアップはJS側） */
[data-motion="count"] { font-variant-numeric: tabular-nums; }