/* site-motion.css — AIアドバイザーLP v6 の個別実装（motion-core.css の後に読む）
   1) ヒーロー見出しの行マスク（017 ラインマスクを土台）
   2) 表の棒が「いま」の長さから「頼んだあと」へ縮む
   3) 6か月の線が先頭から伸び、点が順に付く（141 工程図ステップを土台）
   初期状態の差し替えはすべて html.js と、JS が付けるクラスでゲートする。文字は隠さない（隠すのは見出しの1か所だけ） */

/* ---------- 1) ヒーロー見出し  .h1 > span ---------- */
/* <head> のインラインスクリプトが html に js を付けた時点で隠す。site-motion.js が読めなかったときは、2秒後にそのまま表示する */
.js .h1 > span{opacity:0;animation:sm-failsafe 1ms linear 2s forwards}
@keyframes sm-failsafe{to{opacity:1}}
.js .h1.sm-h1 > span{opacity:1;animation:none;overflow:hidden}
@supports (overflow:clip){.js .h1.sm-h1 > span{overflow-x:visible;overflow-y:clip}}
.js .h1.sm-h1 .sm-line{display:block;transform:translateY(106%)}
.js .h1.sm-h1.is-in .sm-line{transform:none;
  transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--sm-i,0) * 160ms)}
.js .h1.sm-h1.is-done > span{overflow:visible}
.js .h1.sm-h1.is-done .sm-line{transition:none}

/* ---------- 2) 表の棒  .ba__l--af .ba__bar i ---------- */
/* JS が行（.chg__row と合計の .tot）に sm-row を付けたら「いま」と同じ長さ（100%）で待ち、行が見えたら is-on で --w まで縮める */
.js .sm-row .ba__l--af .ba__bar i{width:100%}
.js .sm-row.is-on .ba__l--af .ba__bar i{width:var(--w,100%);transition:width 1.2s cubic-bezier(.16,1,.3,1) .15s}

/* ---------- 3) 6か月の線  .trk__row ---------- */
/* 線は切り抜きの範囲を広げて伸ばす（スマホは上から下、768px 以上は左から右） */
.js .trk__row.sm-trk::after{clip-path:inset(0 0 100% 0)}
.js .trk__row.sm-trk>li::before{background:var(--gray)}
@media(min-width:768px){.js .trk__row.sm-trk::after{clip-path:inset(0 100% 0 0)}}
.js .trk__row.sm-trk.is-on::after{clip-path:inset(0);transition:clip-path 1.5s cubic-bezier(.4,0,.2,1)}
.js .trk__row.sm-trk.is-on>li::before{background:var(--blue);transition:background-color .3s linear calc(var(--sm-i,0) * 480ms + 80ms)}

/* ---------- 動きを減らす設定・印刷では即表示 ---------- */
@media (prefers-reduced-motion:reduce),print{
  .js .h1 > span{opacity:1!important;animation:none!important;transition:none!important}
  .js .h1 .sm-line{transform:none!important;transition:none!important}
  .js .ba__l--af .ba__bar i{width:var(--w,100%)!important;transition:none!important}
  .js .trk__row::after{clip-path:none!important;transition:none!important}
  .js .trk__row>li::before{background:var(--blue)!important;transition:none!important}
}