/* ==========================================================
   motion.css — I.D.Works トップ モーション刷新（P125・2026-10-02 ディレクター承認）
   ・home.html だけが読み込む。既存の home-anim.css／ページ内<style>より後に置く。
   ・すべて html.mx-on 配下でのみ効く＝ ?mx=0 で旧モーションへ完全に戻る（見比べ用スイッチ）。
     mx-on は <head> の1行スクリプトが付与（?mx=0 / ?motion=0 のときは付けない）。
   ・個別機能は <html data-mx-*="off"> で1つずつ止められる（motion.js 冒頭の FLAGS 参照）。
   ・設計の根拠: design/motion-modernization-proposal_261002-01.md §3
     値の基準 = bright-avenue.jp 実測（reveal 1.3s expo-out／fade 1.6s power3-out）
   ========================================================== */
:root{
  --mx-ease-out:cubic-bezier(.16,1,.3,1);      /* expo.out 相当＝文字・画像の着地 */
  --mx-ease-fade:cubic-bezier(.215,.61,.355,1);/* power3.out 相当＝フェード */
  --mx-ease-io:cubic-bezier(.87,0,.13,1);      /* expo.inOut 相当＝罫線など */
  --mx-dur:1.3s;
  --mx-dur-fade:1.6s;
  --mx-stagger:.09s;
}

/* ---------- 0) 旧リビール系の無効化（新システムに一本化。二重に動かさない） ----------
   新システムが担当する要素には motion.js が data-mx を付ける。旧ルールは data-mx の無い要素だけ止め、
   新ルールは [data-mx] で詳細度を上げて旧の .is-in／.is-shown より必ず優先させる。 */
html.mx-on:not([data-mx-hints="off"]).wf-reveal .reveal:not([data-mx]),
html.mx-on:not([data-mx-hints="off"]).fx-on .fx-img:not([data-mx]),
html.mx-on[data-mx-hints="off"].wf-reveal .reveal:not([data-mx]):not(.life-hints .reveal),
html.mx-on[data-mx-hints="off"].fx-on .fx-img:not([data-mx]):not(.life-hints__ph),
html.mx-on.fx-on .fx-up:not([data-mx]){opacity:1;transform:none;transition:none;}
/* ↑ data-mx-hints="off" のときは「暮らしの断片」だけ旧リビール＋旧パララックスのまま動かす */

/* Lenis（慣性スクロール）。スクロールアンカリングは Lenis と競合するので切る（旧 A-9 逆行の一因） */
html.lenis,html.lenis body{height:auto;}
html.lenis{overflow-anchor:none;}
.lenis.lenis-smooth iframe{pointer-events:none;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}

/* ---------- 1) 文字：行ごとにマスクの中をせり上がる ---------- */
html.mx-on .mx-l{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
html.mx-on .mx-li{
  display:block;transform:translate3d(0,108%,0);
  transition:transform var(--mx-dur) var(--mx-ease-out);
  transition-delay:calc(var(--i,0) * var(--mx-stagger) + var(--d,0s));
}
html.mx-on .is-mx-in .mx-li{transform:none;}
html.mx-on .mx-lines[data-mx]{opacity:1!important;transform:none!important;transition:none!important;}

/* 見出しブロック（英字ラベル付きなど、行に割らないもの）＝少し上がりながらフェード */
html.mx-on .mx-up[data-mx]{
  transition:opacity 1.1s var(--mx-ease-fade),transform var(--mx-dur) var(--mx-ease-out);
  transition-delay:var(--d,0s);
}
html.mx-on .mx-up[data-mx]:not(.is-mx-in){opacity:0;transform:translate3d(0,26px,0);}
html.mx-on .mx-up[data-mx].is-mx-in{opacity:1;transform:none;}

/* 本文・小要素＝フェード主体（ごく僅かに上がる） */
html.mx-on .mx-fade[data-mx]{
  transition:opacity var(--mx-dur-fade) var(--mx-ease-fade),transform var(--mx-dur-fade) var(--mx-ease-out);
  transition-delay:var(--d,0s);
}
html.mx-on .mx-fade[data-mx]:not(.is-mx-in){opacity:0;transform:translate3d(0,12px,0);}
html.mx-on .mx-fade[data-mx].is-mx-in{opacity:1;transform:none;}

/* ---------- 2) 写真：フェードしながら中の写真が 1.12→1 へ収まる ----------
   （clip-path のワイプは過去3回不採用＝docs/22 §3-1 のため、フェード＋ズーム収束を既定にした。
     data-mx-img="clip" にすると上から開く方式＝bright avenue 型に切り替わる） */
html.mx-on .mx-img[data-mx]{transition:opacity 1.2s var(--mx-ease-fade);transition-delay:var(--d,0s);transform:none;}
html.mx-on .mx-img[data-mx]:not(.is-mx-in){opacity:0;}
html.mx-on .mx-img[data-mx].is-mx-in{opacity:1;}
html.mx-on .mx-img[data-mx]:not(.is-mx-done) img{transition:transform 1.9s var(--mx-ease-out)!important;transition-delay:var(--d,0s)!important;}  /* 着地後（is-mx-done）は既存のホバー用トランジションへ戻る */
html.mx-on .mx-img[data-mx]:not(.is-mx-in) img{transform:scale(1.12);}
html.mx-on[data-mx-img="clip"] .mx-img[data-mx]{opacity:1!important;transition:clip-path var(--mx-dur) var(--mx-ease-out);}
html.mx-on[data-mx-img="clip"] .mx-img[data-mx]:not(.is-mx-in){clip-path:inset(0 0 100% 0);}

/* ---------- 3) FV：模型写真をゆっくり左右にパン（スケッチ層も同じ動き＝線と写真がずれない） ---------- */
@keyframes mx-pan{
  from{transform:scale(1.07) translate3d(2.2%,0,0);}
  to  {transform:scale(1.07) translate3d(-1.8%,0,0);}
}
html.mx-on[data-mx-pan="on"] .fv2__model,
html.mx-on[data-mx-pan="on"] .fv2__sketch{transform:scale(1.07) translate3d(2.2%,0,0);will-change:transform;}
html.mx-on[data-mx-pan="on"] body:not(.is-gated) .fv2__model,
html.mx-on[data-mx-pan="on"] body:not(.is-gated) .fv2__sketch{animation:mx-pan 10s cubic-bezier(.33,0,.25,1) .2s both;}

/* 描き終わり→実写：光が横切るように左から右へ写真が現れる（初回のみ。以降のループは従来のクロスフェード） */
html.mx-on .fv2__slide.mx-wipe{
  -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--mx-wipe,0) * 150% - 50%),transparent calc(var(--mx-wipe,0) * 150%));
          mask-image:linear-gradient(100deg,#000 calc(var(--mx-wipe,0) * 150% - 50%),transparent calc(var(--mx-wipe,0) * 150%));
}

/* ---------- 4) FV → ブランドメッセージの連続シークエンス（PC） ----------
   ピンが外れた瞬間から、FVの画面（.mx-fly）が縮みながらブランドメッセージの写真枠へ収まる。
   コピーは既存の dock 機構でドックへ着地するので、FVの構図がそのまま次の構図になる。 */
.mx-fly{
  position:fixed;left:0;top:0;width:0;height:0;z-index:89;
  overflow:hidden;pointer-events:none;display:none;background:#ddd;
  contain:strict;
}
.mx-fly.is-on{display:block;}
.mx-fly img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:50% 50%;will-change:transform,opacity;
}
html.mx-fly-active .fv2__frame{visibility:hidden;}
/* sticky のピンは独自の重なり層を作る＝中のコピー（z-index:90）は外の .mx-fly より上に出られない。
   縮小中だけピンの層を持ち上げ、白地を透明にして下の .mx-fly を見せる（コピーは常に写真より手前） */
html.mx-fly-active .fv2__pin{z-index:95;}
html.mx-fly-active .fv2__stage{background:transparent;}
html.mx-fly-active .brand-message__photo{visibility:hidden;}

/* ---------- 5) 暮らしの断片＝「脳裏に浮かぶ、理想の暮らしのイメージ」（2026-10-03 再設計・JS は motion.js D） ---------- */
html.mx-on .life-hints.mx-hints .life-hints__fig,
html.mx-on .life-hints.mx-hints .life-hints__cap,
html.mx-on .life-hints.mx-hints .life-hints__body{will-change:transform,opacity;}
html.mx-on .life-hints.mx-hints .life-hints__ph{will-change:mask-image;}
html.mx-on .life-hints.mx-hints .life-hints__ph img{transform-origin:50% 54%;}
/* 短文（縦書き）は1文字ずつ、ぼかしから浮かぶ */
html.mx-on .life-hints.mx-hints .life-hints__cap .mx-c{
  display:inline-block;opacity:0;filter:blur(6px);transform:translate3d(0,.35em,0);
  transition:opacity 1s var(--mx-ease-fade),filter 1.2s var(--mx-ease-out),transform 1.2s var(--mx-ease-out);
  transition-delay:calc(var(--k,0) * .055s);   /* 2026-10-03 再調整: 出始めを早く（遅延0.15s→0・刻み0.085→0.055s・全体で約1.8s→約1.0s） */
}
html.mx-on .life-hints.mx-hints .life-hints__cap.is-mx-in .mx-c{opacity:1;filter:none;transform:none;}
/* PC：短文を対応する写真のすぐ脇へ（写真の上端にそろえ、写真と12pxの間合い）＝関係が離れて見えない */
@media(min-width:768px){
  html.mx-on .life-hints.mx-hints .life-hints__cap{top:auto;bottom:auto;left:auto;right:auto;}
  html.mx-on .life-hints.mx-hints .life-hints__cap--shoku {right:calc(100% - 50.51% + 14px);top:.95%;}    /* 食卓（右上）＝写真の左脇 */
  html.mx-on .life-hints.mx-hints .life-hints__cap--asa   {left:calc(31.59% + 14px);top:16.05%;}          /* 朝の光（左中）＝写真の右脇 */
  html.mx-on .life-hints.mx-hints .life-hints__cap--ibasho{right:calc(100% - 64.14% + 14px);top:40.77%;}   /* 居場所（右下）＝写真の左脇 */
  html.mx-on .life-hints.mx-hints .life-hints__cap--kehai {left:calc(50.21% + 14px);top:55.28%;}          /* 気配（左下）＝写真の右脇 */
}

/* ---------- 6) 帯の背景：窓の向こうで写真がゆっくり動く（背景位置のパララックス） ---------- */
html.mx-on[data-mx-band="on"] .tagline-band--1::before{background-position:center var(--mx-by,50%);}
html.mx-on[data-mx-band="on"] .housing-band{background-position:center var(--mx-by,50%);}
html.mx-on[data-mx-band="on"] .entry-pair__item::before{background-position:center var(--mx-by,50%);}

/* ---------- 7) ディテール（2026-10-03 ディレクター発案） ---------- */
/* 見出しの短い罫線＝中央から左右へ描かれる（見出しが上がった直後に） */
html.mx-on .section__title[data-mx]::after,
html.mx-on .about-intro__title[data-mx]::after,
html.mx-on .entry-pair__title[data-mx]::after{transition:transform 1.4s var(--mx-ease-io) .35s;transform-origin:50% 50%;}
html.mx-on .section__title[data-mx]:not(.is-mx-in)::after,
html.mx-on .about-intro__title[data-mx]:not(.is-mx-in)::after,
html.mx-on .entry-pair__title[data-mx]:not(.is-mx-in)::after{transform:scaleX(0);}
/* 英字ラベル＝字間がゆっくり締まって定位置へ */
html.mx-on .section__title[data-en][data-mx]::before,
html.mx-on .entry-pair__title[data-en][data-mx]::before{transition:letter-spacing 2s var(--mx-ease-out);}
html.mx-on .section__title[data-en][data-mx]:not(.is-mx-in)::before,
html.mx-on .entry-pair__title[data-en][data-mx]:not(.is-mx-in)::before{letter-spacing:calc(var(--ls-h2, .1em) + .45em);}
/* 電話番号＝1文字ずつせり上がる */
html.mx-on .mx-chs{display:inline-flex;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;}
html.mx-on .mx-ch{display:inline-block;transform:translate3d(0,110%,0);transition:transform 1.1s var(--mx-ease-out);transition-delay:calc(var(--k,0) * .035s + .25s);}
html.mx-on .is-mx-in .mx-ch{transform:none;}
/* ボタンのアイコン＝線で描かれる */
html.mx-on .mx-draw[data-mx] :is(path,rect,line,polyline,circle){stroke-dasharray:1;transition:stroke-dashoffset .9s var(--mx-ease-out);transition-delay:calc(var(--k,0) * .12s + var(--d,0s));}
html.mx-on .mx-draw[data-mx]:not(.is-mx-in) :is(path,rect,line,polyline,circle){stroke-dashoffset:1;}
html.mx-on .mx-draw[data-mx].is-mx-in :is(path,rect,line,polyline,circle){stroke-dashoffset:0;}
/* タグライン帯の英字＝フェードと同時に字間がほどける */
html.mx-on .tagline-band--1 .tagline-band__sr{transition:opacity .8s ease .55s, transform .9s cubic-bezier(.22,.61,.36,1) .55s, letter-spacing 2.4s var(--mx-ease-out) .4s;}
html.mx-on.fx-on .tagline-band--1:not(.is-shown) .tagline-band__sr{letter-spacing:.9em;}
/* CTA写真3連の背景もパララックス（位置のみ） */
html.mx-on[data-mx-band="on"] .cta-photo{background-position:center var(--mx-by,50%);}

/* ---------- 8) 横スクロールの並び（見学会・イベント／こだわり）＝塊ごと右から「ニュルッ」と入る（2026-10-03 訂正） ----------
   transform は横スクロール（こだわりの --frag-x）が使うので、独立プロパティ translate で動かす＝干渉しない。
   イージングは終わり際にわずかに行き過ぎて戻る（y>1）＝「ニュルッ」。 */
html.mx-on .mx-nyuru[data-mx]{transition:translate 1.8s cubic-bezier(.2,1.12,.32,1),opacity 1s var(--mx-ease-fade);}
html.mx-on .mx-nyuru[data-mx]:not(.is-mx-in){translate:55vw 0;opacity:0;}
html.mx-on .mx-nyuru[data-mx].is-mx-in{translate:0 0;opacity:1;}

/* ---------- 9) タグライン帯：大きな英字が左右にゆっくり流れ、文字の中に写真が透ける（2026-10-03 ディレクター指示） ---------- */
html.mx-on .tagline-band--1.has-mx-rail{isolation:isolate;}
html.mx-on .tagline-band--1.has-mx-rail .tagline-band__sr{opacity:0!important;}   /* 小さな英字は大きなレールに置き換え（読み上げは section の aria-label） */
html.mx-on .mx-rail{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;
  mix-blend-mode:overlay;opacity:0;transition:opacity 1.6s var(--mx-ease-fade) .2s;
}
html.mx-on .tagline-band--1.is-shown .mx-rail,
html.mx-on:not(.fx-on) .mx-rail{opacity:1;}
html.mx-on .mx-rail__inner{display:flex;white-space:nowrap;will-change:transform;}
html.mx-on .mx-rail__t{
  font-family:var(--ff-en);font-weight:400;text-transform:lowercase;
  font-size:clamp(150px,21vw,380px);line-height:1;letter-spacing:-.015em;color:#fff;
  padding-right:.4em;transform:translateY(-.06em);
}