/* ==========================================================
   site-motion.css — 下層コンテンツページのディテールアニメーション（2026-10-03）
   JS＝assets/site-motion.js（html.sm-on のときだけ効く。?mx=0 で全停止）
   値の基準はトップ（motion.css）と共通：着地 expo-out／線は expo-inOut。
   ========================================================== */
:root{
  --sm-ease-out:cubic-bezier(.16,1,.3,1);
  --sm-ease-io:cubic-bezier(.87,0,.13,1);
  --sm-ease-fade:cubic-bezier(.215,.61,.355,1);
}

/* ---------- 1) 罫線・箱の描画（border は JS が透明にし、同じ色の線を background で描く） ---------- */
html.sm-on .sm-line{
  background-image:var(--sm-line-img);
  background-repeat:no-repeat;
  background-origin:border-box;
  background-position:var(--sm-line-pos);
  background-size:var(--sm-line-from);
  transition:background-size 1.4s var(--sm-ease-io);
  transition-delay:calc(var(--sm-d,0s) + .1s);
}
html.sm-on .sm-line.sm-in{background-size:var(--sm-line-to);}
/* 表のセル＝1本の線として左→右に走る（セルごとの時間差は JS。各セルは等速に近いカーブで短く） */
html.sm-on .sm-line--cell{transition:background-size .6s cubic-bezier(.45,.05,.55,.95);transition-delay:calc(var(--sm-d,0s) + .1s);}

/* ---------- 2) 画像：フェード＋ズーム収束（scale/translate は独立プロパティ＝既存のホバー transform と干渉しない） ---------- */
html.sm-on .sm-img{transition:opacity 1.2s var(--sm-ease-fade),translate 1.4s var(--sm-ease-out);}
html.sm-on .sm-img:not(.sm-in){opacity:0;}
html.sm-on [data-sm-img="clip"] > img{
  scale:1.08;translate:0 var(--sm-py,0px);
  transition:scale 1.9s var(--sm-ease-out);
}
/* 2026-10-13 ディレクター指示「施工事例ホバーを滑らかに」：上の transition が design-system.css / link-anim.css の
   ホバーズーム（transform）の transition を上書きし、ズームが瞬時に切り替わっていた。transform を併記して戻す
   （値は link-anim.css の画像ズームと同じ .65s・ease-out）。backface-visibility で拡大中のちらつきも抑える */
html.sm-on [data-sm-img="clip"] > img{
  transition:scale 1.9s var(--sm-ease-out),transform .65s cubic-bezier(.22,.61,.36,1);
  backface-visibility:hidden;
}
html.sm-on [data-sm-img="clip"]:not(.sm-in) > img{scale:1.18;}
/* スマホ：左右交互に 18px 寄りながら入る（縦積みの単調さを崩す） */
@media(max-width:767px){
  html.sm-on .sm-img:not(.sm-in){translate:calc(var(--sm-side,1) * 18px) 0;}
  /* [20261026p] 右へ寄せた待機中の写真が画面外へ出て、ページ全体が横に約7px広がっていた（about・house・design・works ほか）。
     main の横はみ出しだけ切り取る。clip はスクロール領域を作らない＝position:sticky や縦スクロールに影響しない（hidden は使わない）。 */
  html.sm-on main{overflow-x:clip;}
}

/* ---------- 3) 見出し：行ごとにマスクの中をせり上がる／赤い英字ラベルは字間が締まる ---------- */
html.sm-on .sm-l{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
html.sm-on .sm-li{display:block;translate:0 108%;transition:translate 1.3s var(--sm-ease-out);transition-delay:calc(var(--i,0) * .09s + .1s);}
html.sm-on .sm-lines.sm-in .sm-li{translate:0 0;}
/* 既存リビール（.c1-label.reveal → .is-in）に合わせて、英字だけ字間が締まる */
html.sm-on.wf-reveal .c1-label.reveal .c1-label__en{transition:letter-spacing 2s var(--sm-ease-out);}
html.sm-on.wf-reveal .c1-label.reveal:not(.is-in) .c1-label__en{letter-spacing:.6em;}
/* 見出し下の短い罫線（.section__title::after）は中央から描く */
html.sm-on.wf-reveal .section__title.reveal::after{transition:transform 1.4s var(--sm-ease-io) .35s;transform-origin:50% 50%;}
html.sm-on.wf-reveal .section__title.reveal:not(.is-in)::after{transform:scaleX(0);}

/* ---------- 4) ボタンのアイコン＝線で描かれる ---------- */
html.sm-on .sm-draw :is(path,rect,line,polyline,circle){stroke-dasharray:1;transition:stroke-dashoffset .9s var(--sm-ease-out);transition-delay:calc(var(--k,0) * .12s + .3s);}
html.sm-on .sm-draw:not(.sm-in) :is(path,rect,line,polyline,circle){stroke-dashoffset:1;}
html.sm-on .sm-draw.sm-in :is(path,rect,line,polyline,circle){stroke-dashoffset:0;}

@media(prefers-reduced-motion:reduce){
  html.sm-on:not(.wf-force-motion) *{transition-duration:0s!important;}
}