/* =========================================================
   inadog motion picks（ぞろ屋式 特典カタログから選んで書き直したもの）
   - 外部ライブラリなし。style.css のあとに読み込む
   - 色は style.css の :root トークン（--ink --paper --accent など）だけを使う
   - 動かすのは transform / opacity / clip-path / background-size だけ（スマホでも軽い）
   - 「隠す」初期状態は html.m-armed のときだけ。head の1行スクリプトが付ける
     → JSが動かない・読み込めないときは最初から全部見えている
   - prefers-reduced-motion: reduce なら一番下で全部止める
   ========================================================= */

/* ---------- 0. 共通の動きの速さ ---------- */
:root{
  --m-ease:cubic-bezier(.22,.8,.24,1);      /* すっと出て、静かに止まる */
  --m-ease-io:cubic-bezier(.65,0,.35,1);    /* 線・幕用 */
  --m-ease-pop:cubic-bezier(.3,1.35,.5,1);  /* 番号の丸だけ、ほんの少し弾む */
}

/* =========================================================
   1. 開いた瞬間（splash）— 元：splash-catalog sp-05 Blink
   トップだけ。1回の訪問（同じタブ）で1度だけ。全体0.95秒
   ========================================================= */
.m-splash{display:none}
html.m-splashing .m-splash{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  position:fixed;inset:0;z-index:100;background:var(--paper);
  transition:opacity .3s ease;
}
.m-splash__mark{
  font-family:var(--font-en);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.03em;color:var(--ink);
  opacity:0;transform:scale(.7);transition:opacity .2s ease,transform .36s var(--m-ease-pop);
}
.m-splash__mark i{font-style:normal;color:var(--accent)}
.m-splash__line{
  width:88px;height:3px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .34s var(--m-ease-io) .14s;
}
.m-splash.is-play .m-splash__mark{opacity:1;transform:none}
.m-splash.is-play .m-splash__line{transform:none}
.m-splash.is-out{opacity:0;pointer-events:none}
.m-splash.is-done{display:none!important}

/* =========================================================
   2. トップFV（m-fv-wipe / m-fv-rise / m-fv-outline を section.fv に付ける）
   開始の合図は html.m-go（splash が引くとき、または読み込み直後）
   ========================================================= */

/* 2-A 【推し】m-fv-wipe — 元：fv-catalog fv-02 Wipe
   藍の面が右から幕のように開く → 人物が下からせり上がる → 大きなA.I.が浮かぶ */
.m-fv-wipe .fv__plane{background:transparent}
.m-fv-wipe .fv__plane::before{
  content:"";position:absolute;inset:0;background:var(--ink);z-index:0;
  transform-origin:100% 50%;
}
.m-armed .m-fv-wipe .fv__plane::before{transform:scaleX(0)}
.m-armed .m-fv-wipe .fv__photo{opacity:0;translate:0 7%}
.m-armed .m-fv-wipe .fv__plane .ghost{opacity:0;translate:5% 0}
.m-armed .m-fv-wipe .fv__sign{opacity:0}
.m-go .m-fv-wipe .fv__plane::before{transform:none;transition:transform .85s var(--m-ease-io) .05s}
.m-go .m-fv-wipe .fv__photo{opacity:1;translate:0 0;transition:opacity .7s ease .5s,translate 1s var(--m-ease) .5s}
.m-go .m-fv-wipe .fv__plane .ghost{opacity:1;translate:0 0;transition:opacity 1.2s ease .75s,translate 1.6s var(--m-ease) .75s}
.m-go .m-fv-wipe .fv__sign{opacity:1;transition:opacity .6s ease 1.2s}

/* 2-B m-fv-rise — 元：fv-catalog fv-23 Stagger（活版スラムの「落ちて叩く」は外し、順にせり上がる所だけ）
   左の文字が上から順に、70msずつずらして浮き上がる。HTMLの書き換えは不要（.fv__copy の子の順番で決まる）
   順番：添え書き(0) → 見出し1行目(1) → 2行目(2) → 説明(3) → ボタン(4) → 無料(5) → 約束(6) → 数字(7) → 代表(8) */
.m-armed .m-fv-rise .fv__copy>:not(h1),
.m-armed .m-fv-rise .fv__copy h1 .ln{opacity:0;translate:0 16px}
.m-go .m-fv-rise .fv__copy>:not(h1),
.m-go .m-fv-rise .fv__copy h1 .ln{
  opacity:1;translate:0 0;
  transition:opacity .7s ease,translate .8s var(--m-ease);
  transition-delay:calc(var(--m-i,0) * 70ms + 120ms);
}
.m-fv-rise .fv__copy h1 .ln:nth-child(1){--m-i:1}
.m-fv-rise .fv__copy h1 .ln:nth-child(2){--m-i:2}
.m-fv-rise .fv__copy>:nth-child(3){--m-i:3}
.m-fv-rise .fv__copy>:nth-child(4){--m-i:4}
.m-fv-rise .fv__copy>:nth-child(5){--m-i:5}
.m-fv-rise .fv__copy>:nth-child(6){--m-i:6}
.m-fv-rise .fv__copy>:nth-child(7){--m-i:7}
.m-fv-rise .fv__copy>:nth-child(8){--m-i:8}
.m-fv-rise .fv__copy>:nth-child(n+9){--m-i:9}

/* 2-C m-fv-outline — 元：fv-catalog fv-46 OutlineFill（写真の窓は外し、輪郭→塗りの所だけ）
   後ろの「A.I.」が輪郭線で現れ、塗りに変わって今の淡い色に落ち着く */
.m-armed .m-fv-outline .fv__plane .ghost{color:transparent;-webkit-text-stroke:1.5px rgba(247,244,238,.45)}
.m-armed .m-fv-outline .fv__plane .ghost i{color:transparent;-webkit-text-stroke:1.5px rgba(232,137,43,.8)}
.m-go .m-fv-outline .fv__plane .ghost{animation:m-outline-fill 2.2s ease .3s both}
.m-go .m-fv-outline .fv__plane .ghost i{animation:m-outline-fill-i 2.2s ease .3s both}
@keyframes m-outline-fill{
  0%{color:transparent;-webkit-text-stroke-color:rgba(247,244,238,0)}
  35%{color:transparent;-webkit-text-stroke-color:rgba(247,244,238,.45)}
  100%{color:rgba(247,244,238,.07);-webkit-text-stroke-color:rgba(247,244,238,0)}
}
@keyframes m-outline-fill-i{
  0%{color:transparent;-webkit-text-stroke-color:rgba(232,137,43,0)}
  35%{color:transparent;-webkit-text-stroke-color:rgba(232,137,43,.8)}
  100%{color:rgba(232,137,43,.35);-webkit-text-stroke-color:rgba(232,137,43,0)}
}

/* =========================================================
   3. 4段の流れ（ol.flow に m-flow）— 元：section-catalog sec-process-01 ステップ・ラインドロー
   琥珀の線が左から伸び、線が届いたところで丸い番号01〜04が順に現れる。
   スクロール量に連動（scrub）はさせず、画面に入ったら1回だけ流れる
   ========================================================= */
.m-armed .m-flow::before{transform:scaleX(0);transform-origin:0 50%}
.m-armed .m-flow .n{opacity:0;transform:scale(.4)}
.m-armed .m-flow li>div{opacity:0;translate:0 12px}
.m-flow.is-on::before{transform:none;transition:transform 1.5s var(--m-ease-io)}
.m-flow.is-on .n{opacity:1;transform:none;transition:opacity .3s ease,transform .55s var(--m-ease-pop)}
.m-flow.is-on li>div{opacity:1;translate:0 0;transition:opacity .6s ease,translate .7s var(--m-ease)}
.m-flow.is-on li:nth-child(1) .n{transition-delay:.05s}
.m-flow.is-on li:nth-child(2) .n{transition-delay:.45s}
.m-flow.is-on li:nth-child(3) .n{transition-delay:.85s}
.m-flow.is-on li:nth-child(4) .n{transition-delay:1.25s}
.m-flow.is-on li:nth-child(1)>div{transition-delay:.2s}
.m-flow.is-on li:nth-child(2)>div{transition-delay:.6s}
.m-flow.is-on li:nth-child(3)>div{transition-delay:1s}
.m-flow.is-on li:nth-child(4)>div{transition-delay:1.4s}
@media (max-width:768px){
  /* スマホは縦の線なので、上から下へ伸ばす */
  .m-armed .m-flow::before{transform:scaleY(0);transform-origin:50% 0}
  .m-flow.is-on::before{transform:none}
}

/* =========================================================
   4. 数字のカウントアップ（.num / .proof b に m-count）— 元：fv-catalog fv-45 CountUp
   数字の桁幅をそろえて、数えている間に横へガタつかないようにする
   ========================================================= */
.m-count{font-variant-numeric:tabular-nums}

/* =========================================================
   5. イメージ写真の現れ方（写真の器に m-photo）— 元：section-catalog sec-features-01 左右ワイプ
   角丸の窓が左から右へ開き、中の写真が少し大きい所から等倍へ落ち着く
   ========================================================= */
.m-armed .m-photo{clip-path:inset(0 100% 0 0 round 28px)}
.m-armed .m-photo img{scale:1.06}
.m-photo.is-on{clip-path:inset(0 0 0 0 round 28px);transition:clip-path 1.1s var(--m-ease-io)}
.m-photo.is-on img{scale:1;transition:scale 1.6s var(--m-ease)}
.m-photo.is-done{clip-path:none}
.m-armed .m-photo--rev{clip-path:inset(0 0 0 100% round 28px)}  /* 右から開く版（左右交互の段で使う） */
.m-photo--rev.m-photo.is-on{clip-path:inset(0 0 0 0 round 28px)}
.m-photo--rev.m-photo.is-done{clip-path:none}

/* =========================================================
   6. そのほか
   ========================================================= */

/* 6-a マーカーが引かれる（.mk に m-mark）— 元：section-catalog sec-intro-05 コピー塗りつぶしワイプ
   生成りの上＝琥珀の蛍光ペン。藍の写真帯の上は m-mark--line（琥珀の下線） */
/* サイトの .fv h1 .mk は background の一括指定なので、クラスを重ねて強さで上回る */
.m-mark.m-mark{
  background-image:linear-gradient(transparent 66%,rgba(232,137,43,.45) 66%);
  background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;
}
.m-mark--line.m-mark{background-image:linear-gradient(var(--accent),var(--accent));background-position:0 100%;background-size:100% 4px;padding-bottom:2px}
.m-armed .m-mark.m-mark{background-size:0% 100%;background-repeat:no-repeat;background-position:0 0}
.m-armed .m-mark--line.m-mark{background-size:0% 4px;background-position:0 100%}
.m-mark.is-on{transition:background-size .9s var(--m-ease-io) .2s}
.m-armed .m-mark.is-on{background-size:100% 100%}
.m-armed .m-mark--line.is-on{background-size:100% 4px}
.m-go .m-fv-rise .m-mark,.m-go .m-fv-wipe .m-mark{transition-delay:1s}  /* FVの中は文字が出そろってから */

/* 6-b 大きな「A.I.」がゆっくり流れる（.ghost に m-drift）— 元：sec-intro-05 の背景図形パララックス
   スクロールに合わせて最大±36pxだけ縦にずれる。translate だけなので既存の位置指定は崩れない */
.m-drift{will-change:translate}

/* 6-c 下へ読むときはヘッダーが引っ込み、少し上へ戻すと出る（.site-header に m-autohide）
   元：parts-catalog header-18 スクロールアップ再表示 */
.m-autohide{transition:transform .32s var(--m-ease),box-shadow .3s ease}
.m-autohide.is-hidden{transform:translateY(-100%)}
.m-autohide.is-scrolled{box-shadow:0 6px 18px rgba(12,22,48,.08)}

/* =========================================================
   動きを減らす設定の人には、最初から全部見せて何も動かさない
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html.m-splashing .m-splash{display:none!important}
  .m-fv-wipe .fv__plane{background:var(--ink)}
  .m-fv-wipe .fv__plane::before{display:none}
  .m-armed .m-fv-wipe .fv__photo,.m-armed .m-fv-wipe .fv__plane .ghost,.m-armed .m-fv-wipe .fv__sign,
  .m-armed .m-fv-rise .fv__copy>:not(h1),.m-armed .m-fv-rise .fv__copy h1 .ln,.m-armed .m-flow li>div{opacity:1!important;translate:none!important;transition:none!important}
  .m-armed .m-fv-outline .fv__plane .ghost{color:rgba(247,244,238,.07)!important;-webkit-text-stroke:0!important;animation:none!important}
  .m-armed .m-fv-outline .fv__plane .ghost i{color:rgba(232,137,43,.35)!important;-webkit-text-stroke:0!important;animation:none!important}
  .m-armed .m-flow::before,.m-armed .m-flow .n{opacity:1!important;transform:none!important;transition:none!important}
  .m-armed .m-photo{clip-path:none!important}
  .m-armed .m-photo img{scale:1!important;transition:none!important}
  .m-armed .m-mark{background-size:100% 100%!important;transition:none!important}
  .m-armed .m-mark--line{background-size:100% 4px!important}
  .m-drift{translate:none!important}
  .m-autohide{transition:none!important}
}