/* ds-motion — 動きの部品集（design-os）
 * 正本: ds/components/motion.css。単独で写して使える（HP の site/lp/public/assets/ へそのまま）。
 * 値は ds/core/tokens.css の --motion-* を使い、無いときは同じ値の既定に戻る（var の第 2 引数）。
 * 北極星: D-MOTION（既定は MO-none／MO-subtle。MO-rich は FV だけ。本文・フォーム・料金は動かさない）。
 *         F-5（カウントアップは確かめられる数字だけ）。
 * 守ること:
 *   1. 動かすのは transform と opacity だけ（レイアウトを動かさない＝CLS 0）。
 *   2. 隠すのは html.ds-motion のときだけ。JS が無い・失敗したときは、最初から全部見える。
 *   3. prefers-reduced-motion: reduce では、動きを 0 にして中身をすぐ見せる。
 *   4. 無限に動く部品（marquee）は、停止ボタンを必ず付ける（WCAG 2.2.2）。
 */

:root {
  --ds-m-dur: var(--motion-duration-slow, 600ms);
  --ds-m-dur-fast: var(--motion-duration-fast, 200ms);
  --ds-m-dur-base: var(--motion-duration-base, 400ms);
  --ds-m-dur-em: var(--motion-duration-emphasis, 800ms);
  --ds-m-ease: var(--motion-easing-out, cubic-bezier(0.22, 1, 0.36, 1));
  --ds-m-ease-std: var(--motion-easing-standard, cubic-bezier(0.25, 0.1, 0.25, 1));
  --ds-m-ease-em: var(--motion-easing-emphasis, cubic-bezier(0.16, 1, 0.3, 1));
  --ds-m-dist: var(--motion-distance-small, 8px);
  --ds-m-stagger: var(--motion-stagger, 80ms);
  --ds-m-hover-scale: var(--motion-hover-scale, 1.03);
}
/* 動きの型（MO-xx）。html の data-ds-motion-level で切り替える。既定は subtle。 */
[data-ds-motion-level="standard"] { --ds-m-dist: var(--motion-distance-medium, 24px); --ds-m-stagger: 100ms; }
[data-ds-motion-level="rich"] { --ds-m-dist: var(--motion-distance-medium, 24px); --ds-m-stagger: 100ms; }

/* 1. スクロールでの出現 [data-ds-reveal]（""=上へ／"fade"=不透明度だけ） */
.ds-motion [data-ds-reveal]:not(.ds-in) { opacity: 0; transform: translate3d(0, var(--ds-m-dist), 0); }
.ds-motion [data-ds-reveal="fade"]:not(.ds-in) { transform: none; }
.ds-motion [data-ds-reveal] {
  transition: opacity var(--ds-m-dur) var(--ds-m-ease), transform var(--ds-m-dur) var(--ds-m-ease);
  transition-delay: calc(var(--ds-i, 0) * var(--ds-m-stagger));
}

/* 2. 子要素の順番の出現 [data-ds-stagger]（JS が子に --ds-i を付ける。上限を超えた子は最後と同時） */
.ds-motion [data-ds-stagger] > *:not(.ds-in) { opacity: 0; transform: translate3d(0, var(--ds-m-dist), 0); }
.ds-motion [data-ds-stagger] > * {
  transition: opacity var(--ds-m-dur) var(--ds-m-ease), transform var(--ds-m-dur) var(--ds-m-ease);
  transition-delay: calc(var(--ds-i, 0) * var(--ds-m-stagger));
}

/* 3. 見出しの行ごとの出現 [data-ds-lines] > .ds-line（行は書き手が区切る。JS が中に .ds-line__in を入れる）
 *    .ds-line の表示は JS の有無で変えない（行の箱は常に block）→ レイアウトがずれない */
[data-ds-lines] .ds-line { display: block; overflow: hidden; padding-block-end: 0.12em; margin-block-end: -0.12em; }
.ds-line__in { display: inline-block; }
.ds-motion [data-ds-lines]:not(.ds-in) .ds-line__in { transform: translate3d(0, 110%, 0); }
.ds-motion [data-ds-lines] .ds-line__in {
  transition: transform var(--ds-m-dur-em) var(--ds-m-ease-em);
  transition-delay: calc(var(--ds-i, 0) * var(--ds-m-stagger));
}

/* 4. 数字のカウントアップ [data-ds-count]（F-5：data-ds-source が無いと JS は動かさない）
 *    幅は JS の有無で同じ（inline-block＋等幅数字）。JS は動かす前に最終値の幅で固定する */
[data-ds-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* 5. 画像のゆっくりしたズーム [data-ds-zoom]・マスクでの出現 [data-ds-mask]
 *    箱（overflow: hidden）は常に同じ。動くのは中の画像と覆い（::after）の transform だけ */
[data-ds-zoom], [data-ds-mask] { overflow: hidden; position: relative; }
[data-ds-zoom] > img, [data-ds-zoom] > picture, [data-ds-zoom] > video { display: block; inline-size: 100%; }
.ds-motion [data-ds-zoom] > * { transform: scale(1.08); transition: transform 10s var(--ds-m-ease-std); }
.ds-motion [data-ds-zoom].ds-in > * { transform: scale(1); }
.ds-motion [data-ds-mask]::after {
  content: ""; position: absolute; inset: 0; background: var(--ds-mask-color, var(--color-base, #fff));
  transform-origin: 100% 50%; transition: transform var(--ds-m-dur-em) var(--ds-m-ease-em);
  pointer-events: none;
}
.ds-motion [data-ds-mask].ds-in::after { transform: scaleX(0); }

/* 6. スクロールに連動した軽い視差 [data-ds-parallax]（写真の層だけ。移動は画面の高さの 10% 以内）
 *    はみ出しを見せないため、親に overflow: hidden と、上下に余りのある画像を置く */
[data-ds-parallax] { will-change: transform; }

/* 7. 横に流れる帯 .ds-marquee（無限の動き＝停止ボタン必須。WCAG 2.2.2）
 *    構造: .ds-marquee > .ds-marquee__track > 項目…。JS が複製（aria-hidden）と停止ボタンを足す */
.ds-marquee { position: relative; overflow: hidden; }
.ds-marquee__track { display: flex; gap: var(--spacing-scale-5, 2rem); inline-size: max-content; }
.ds-marquee__track > * { flex: none; }
.ds-motion .ds-marquee__track { animation: ds-marquee var(--ds-marquee-duration, 40s) linear infinite; }
.ds-marquee:hover .ds-marquee__track,
.ds-marquee:focus-within .ds-marquee__track,
.ds-marquee.ds-paused .ds-marquee__track { animation-play-state: paused; }
@keyframes ds-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - var(--spacing-scale-5, 2rem) / 2), 0, 0); } }
.ds-marquee__toggle {
  position: absolute; inset-block-start: 50%; inset-inline-end: var(--spacing-scale-2, 0.5rem); transform: translateY(-50%);
  z-index: 1; min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--spacing-scale-2, 0.5rem);
  font: inherit; font-size: var(--typography-size-caption, 0.875rem); color: var(--color-text, #111);
  background: var(--color-base, #fff); border: 1px solid currentColor; border-radius: var(--radius-control, 4px); cursor: pointer;
}
.ds-marquee__toggle:focus-visible { outline: 2px solid var(--color-accent, #0057d9); outline-offset: 2px; }

/* 8. ボタン・カードの hover・press の手ざわり .ds-tactile（.ds-tactile--card はカード） */
.ds-tactile { transition: transform var(--ds-m-dur-fast) var(--ds-m-ease); }
.ds-tactile:active { transform: scale(0.98); transition-duration: var(--motion-duration-instant, 100ms); }
.ds-tactile--card { transition: transform var(--ds-m-dur-base) var(--ds-m-ease); }
.ds-tactile--card .ds-tactile__media { overflow: hidden; }
.ds-tactile--card .ds-tactile__media > * { display: block; transition: transform var(--ds-m-dur-base) var(--ds-m-ease); }
@media (hover: hover) {
  .ds-tactile--card:hover { transform: translate3d(0, 2px, 0); } /* 沈める（PR#12 spec.md §5・§6） */
  .ds-tactile--card:hover .ds-tactile__media > * { transform: scale(var(--ds-m-hover-scale)); }
}
.ds-tactile--card:active { transform: scale(0.99); }

/* 9. ページの読み込みの順序 [data-ds-intro]（FV だけ。MO-rich の emphasis。値は順番 1〜5） */
.ds-motion [data-ds-intro] {
  transition: opacity var(--ds-m-dur-em) var(--ds-m-ease-em), transform var(--ds-m-dur-em) var(--ds-m-ease-em);
  transition-delay: calc(var(--ds-i, 0) * 120ms);
}
.ds-motion:not(.ds-loaded) [data-ds-intro] { opacity: 0; transform: translate3d(0, var(--ds-m-dist), 0); }

/* 10. sticky の CTA の出し入れ .ds-sticky-cta（隠すときは visibility も切る＝フォーカスに入らない） */
.ds-sticky-cta {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  transition: transform var(--ds-m-dur-base) var(--ds-m-ease), opacity var(--ds-m-dur-base) var(--ds-m-ease), visibility 0s linear 0s;
}
.ds-motion .ds-sticky-cta:not(.ds-shown) {
  transform: translate3d(0, 100%, 0); opacity: 0; visibility: hidden;
  transition: transform var(--ds-m-dur-base) var(--ds-m-ease), opacity var(--ds-m-dur-base) var(--ds-m-ease), visibility 0s linear var(--ds-m-dur-base);
}

/* 動かさない場所（北極星 D-MOTION）：フォーム・料金・本文の長文と、[data-ds-still] の中。
 * JS も付けないが、書き間違えても CSS で見えるようにする */
.ds-motion form [data-ds-reveal], .ds-motion form [data-ds-stagger] > *,
.ds-motion .ds-plan [data-ds-reveal], .ds-motion [data-ds-still] [data-ds-reveal],
.ds-motion [data-ds-still] [data-ds-stagger] > *, .ds-motion [data-ds-reveal].ds-plan,
.ds-motion form[data-ds-reveal] { opacity: 1; transform: none; transition: none; }

/* 動きを減らす設定・印刷：すぐ見せる、動かさない */
@media (prefers-reduced-motion: reduce) {
  .ds-motion [data-ds-reveal], .ds-motion [data-ds-stagger] > *, .ds-motion [data-ds-lines] .ds-line__in,
  .ds-motion [data-ds-intro], .ds-motion [data-ds-zoom] > *, .ds-motion [data-ds-parallax],
  .ds-tactile, .ds-tactile--card, .ds-tactile--card .ds-tactile__media > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .ds-motion [data-ds-mask]::after { display: none; }
  .ds-marquee__track { animation: none !important; flex-wrap: wrap; inline-size: auto; }
  .ds-marquee__track > [aria-hidden="true"], .ds-marquee__toggle { display: none; }
  .ds-sticky-cta { transition: none !important; }
}
@media print {
  .ds-motion [data-ds-reveal], .ds-motion [data-ds-stagger] > *, .ds-motion [data-ds-lines] .ds-line__in,
  .ds-motion [data-ds-intro] { opacity: 1 !important; transform: none !important; }
  .ds-motion [data-ds-mask]::after { display: none; }
}