/* ヤマハ化工大阪：動き（motion.js と組で使う。再現サイト v1.2〜・WordPress のテーマでもそのまま使う）
   - どれも1回だけ・控えめ。既にある transform を壊さないよう、個別の translate / scale プロパティだけを使う
   - html.mo-on の時だけ隠す（JS が動かない時・「視差効果を減らす」の時は最初から全部見える） */

html.mo-on [data-mo] { transition-delay: var(--mo-delay, 0s); }

/* ふわっと（下から） */
html.mo-on [data-mo="fade"] { opacity: 0; translate: 0 24px; transition-property: opacity, translate; transition-duration: .8s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* 小さくふわっと（表の行・小さい部品） */
html.mo-on [data-mo="fade-s"] { opacity: 0; translate: 0 10px; transition-property: opacity, translate; transition-duration: .55s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* ゆっくり浮かぶ（大きな飾り文字） */
html.mo-on [data-mo="fade-slow"] { opacity: 0; transition: opacity 1.8s ease-out; transition-delay: var(--mo-delay, 0s); }
/* 外側から少し寄る（施工手順の左右の段） */
html.mo-on [data-mo="from-l"] { opacity: 0; translate: -28px 0; transition-property: opacity, translate; transition-duration: .9s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
html.mo-on [data-mo="from-r"] { opacity: 0; translate: 28px 0; transition-property: opacity, translate; transition-duration: .9s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* 丸がぽんと出る（施工手順の番号） */
html.mo-on [data-mo="pop"] { opacity: 0; scale: .4; transition-property: opacity, scale; transition-duration: .5s; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
/* 見出しの下の短い線が伸びる */
html.mo-on [data-mo="bar"] { scale: 0 1; transform-origin: left center; transition: scale .9s cubic-bezier(.7, 0, .2, 1); transition-delay: var(--mo-delay, 0s); }
html.mo-on [data-mo="bar"][data-mo-origin="center"] { transform-origin: center center; }
/* 幕が開く（写真）：箱を左（右）から開け、中の写真は少し寄った所から戻る */
html.mo-on [data-mo="wipe-l"] { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1); transition-delay: var(--mo-delay, 0s); }
html.mo-on [data-mo="wipe-r"] { clip-path: inset(0 0 0 100%); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1); transition-delay: var(--mo-delay, 0s); }
html.mo-on [data-mo^="wipe"] img { scale: 1.12; transition: scale 1.8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--mo-delay, 0s); }
/* 寄りから戻る（見出し帯・ヒーローの写真） */
html.mo-on [data-mo="settle"] { scale: 1.1; transition: scale 2.2s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--mo-delay, 0s); }
html.mo-on [data-mo="settle-top"] { scale: 1.12; transition: scale 3s cubic-bezier(.2, .7, .2, 1); }
/* ゆっくり寄る（写真の帯・見えている間に1回） */
html.mo-on [data-mo="drift"] { scale: 1; transition: scale 9s cubic-bezier(.3, .1, .3, 1); }
/* 施工手順の縦線が伸びる（どこまで伸びたかは JS が --mo-line に入れる） */
html.mo-on [data-mo="line"] { clip-path: inset(0 0 calc(100% - var(--mo-line, 0px)) 0); transition: clip-path .9s cubic-bezier(.4, 0, .2, 1); }
/* 数え上げ・開閉は JS だけで動かす（見た目の初期値なし） */

/* 入った後 */
html.mo-on [data-mo].mo-in { opacity: 1; translate: 0 0; scale: 1; clip-path: inset(0 0 0 0); }
html.mo-on [data-mo^="wipe"].mo-in img { scale: 1; }
html.mo-on [data-mo="drift"].mo-in { scale: 1.08; }
html.mo-on [data-mo="line"].mo-in { clip-path: inset(0 0 calc(100% - var(--mo-line, 0px)) 0); }

/* 写真を拡大する箱は外へはみ出させない（拡大で横スクロールが出ないように） */
.mo-clip { overflow: hidden; }
/* 左右から寄る段がある節は、動きの途中で横にはみ出さないように（スクロールの箱にはしない clip） */
.mo-clipx { overflow-x: clip; }

/* 切った節（確認パネルで「なし」）・止めた時は、すぐ最後の形に */
html.mo-on [data-mo].mo-skip { transition: none !important; opacity: 1; translate: 0 0; scale: 1; clip-path: none; }
html.mo-on [data-mo^="wipe"].mo-skip img { transition: none !important; scale: 1; }
html.mo-on [data-mo="drift"].mo-skip { scale: 1; }

/* ボタンの矢印が少し動く（マウスを乗せた時） */
html.mo-hover a .ri-arrow-right-line, html.mo-hover button .ri-arrow-right-line,
html.mo-hover a .ri-arrow-right-up-line { display: inline-block; transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
html.mo-hover a:hover .ri-arrow-right-line, html.mo-hover button:hover .ri-arrow-right-line { translate: 4px 0; }
html.mo-hover a:hover .ri-arrow-right-up-line { translate: 3px -3px; }

@media (prefers-reduced-motion: reduce) {
  html:not(.mo-force) [data-mo] { transition: none !important; }
}