/* ==========================================================
   home-anim.css  —  I.D.Works トップ 統合モーション（ディレクター指示 2026-07-20）
   ・このファイルは home.html だけが読み込む＝他ページへ波及しない（デザイン方針の隔離）。
   ・<style>群・global-nav.css より後に読み込む＝上書き可。
   ・グレースケール厳守／太字禁止（新規に font-weight:bold を足さない）。
   ・reduced-motion killswitch 維持: 動きは html.fx-on（=モーション有効時にJSが付与）配下だけ初期非表示。
     JS無効・?motion=0（reduced想定）では fx-on が付かず全要素は最初から可視＝レイアウト不変。
   ・URLはこのCSSの位置（assets/）基準。画像は img-figma/ 直下。
   ========================================================== */

/* 慣性スクロールを自前lerpで駆動するため、ネイティブのsmoothは無効化（毎フレームの
   scrollTop更新がsmoothと二重化するのを防ぐ）。ページ内リンクのスムースはJSが担当。 */
html{scroll-behavior:auto;}

/* ==========================================================
   全体共通① 画像リビール＝AITOHUS風「フェードイン主体」（2026-07-20 修正1）
   ・旧clip-path inset開き（左上→右下ワイプ）は“スライドイン”に見えたため撤去。
   ・AITOHUS実機観察＝figure(overflow:hidden)内のimgを opacity:0→1 でフェードのみ（clip/mask/変形なし）。
   ・本サイトは「左上→右下の方向性は保つ」指示のため、フェード主役（opacity 1.05s ease-out）に
     ごく僅かな対角ドリフト translate(-12px,-12px)→0 を添える＝ワイプ感なし・フェードが主。
   （aitohus Model House型。全画像共通・スクロール到達時に1回） --- 指示 全体共通1／修正1
   ========================================================== */
html.fx-on .fx-img{
  opacity:0;
  transform:translate3d(-12px,-12px,0);      /* 左上へ僅かにずらした位置から… */
  transition:opacity 1.05s ease-out,
             transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
html.fx-on .fx-img.is-shown{
  opacity:1;
  transform:none;                            /* …右下（定位置）へ収まりながらフェードイン */
}

/* ==========================================================
   全体共通② クリック可能な画像＝ロールオーバーでクローズアップ（ズーム）
   （コンテナは overflow:hidden 済みの is-photo / card__photo / event-card__photo） --- 指示 全体共通1
   ========================================================== */
.card__photo img,.event-card__photo img,.cs-slide img,.is-photo img{
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
}
@media(hover:hover) and (pointer:fine){
  a.card:hover .cs-slide img,
  a.card:hover .card__photo img,
  a.event-card:hover .event-card__photo img{transform:scale(1.06);}
}

/* ==========================================================
   全体共通③ ボタン＝ロールオーバーで文字が下から入れ替わる
   2026-07-28 A-3: .btn のロール／反転アニメCSSは全ページ共通化のため
   assets/design-system.css（29ページ）と home.html のページ内<style>（home）へ移設。
   home-anim.css は home 専用の .split__more 系のみを担当する。
   ========================================================== */

/* News/Event の「一覧へ」リンク＝ボタンと同じ動き（文字ロール＋横線スライド） --- 指示 News/Event */
.split__more .btnroll{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.6;}
.split__more .btnroll__t{position:relative;display:inline-block;transition:transform .38s cubic-bezier(.19,1,.22,1);}
.split__more .btnroll__t::after{content:attr(data-text);position:absolute;left:0;top:100%;white-space:nowrap;}
@media(hover:hover) and (pointer:fine){
  .split__more:hover .btnroll__t{transform:translateY(-100%);}
  .split__more:hover::after{animation:btn-bar .55s cubic-bezier(.4,0,.2,1);} /* 横線＝btn-bar流用 */
}

/* ==========================================================
   全体共通⑥ 背景画像セクションはスクロール到達でフェードイン（タグライン帯／Design・Performance）
   ========================================================== */

/* ==========================================================
   文字＝下から上フェードイン（見出し・リード等。既存 .reveal と別系統＝ .fx-up をJSで付与） --- 指示 全体共通2
   ========================================================== */
html.fx-on .fx-up{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
html.fx-on .fx-up.is-shown{opacity:1;transform:none;}
@media(max-width:767px){ html.fx-on .fx-up{transform:translateY(18px);} } /* SP=控えめ */

/* ==========================================================
   セクション別：暮らしの断片（ドリフト量はJS側 DRIFT 配列で調整＝home.html内スクリプト）
   ここではレイアウト不変（写真同士の非重複はJS担保・CSS変更なし）
   ========================================================== */

/* ==========================================================
   セクション別：Case Study / OB ＝ 各3枚スライドショー（自動・左上→右下フェード切替）
   スライド枠は home-anim.js が構築（既存imgを.cs-slideでラップ＋2枚追加）
   ========================================================== */
/* 修正2（2026-07-20）：切替時に「左上へ縮小」する逆再生を撤去。
   ・旧スライド(.is-on)は一切動かさない＝トランジションを持たせない（クリップ逆再生も透明化もしない）。
   ・新スライド(.is-in)だけを上(z-index上位)に重ね、修正1と同じフェード＋対角ドリフトで登場。
   ・登場完了後、JSが新を.is-onへ昇格＋旧の.is-onを外す＝旧は“瞬時に”非表示（動かず消える）。 */
.cs-photo{position:relative;overflow:hidden;} /* card__photo に付与 */
.cs-slide{position:absolute;inset:0;opacity:0;z-index:0;}          /* 既定＝非表示・トランジションなし */
.cs-slide.is-on{opacity:1;z-index:1;}                              /* 現在表示中＝静止（動かさない） */
.cs-slide.is-in{                                                   /* 新スライド＝上に重ねてフェードイン */
  z-index:2;
  transition:opacity 1.05s ease-out,
             transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.cs-slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* 物件タイトルリンク＝ロールオーバーで透明度変化 --- 指示 Case/OB */
.card__title{transition:opacity .35s ease;}
@media(hover:hover) and (pointer:fine){ a.card:hover .card__title{opacity:.55;} }

/* ==========================================================
   セクション別：Model House ＝ 3:2・PC 70vw上限910px（WF正）を明示。右→左自動・ホバー減速は既存keyframe維持。
   ※現状も実測3:2/910だが、崩れ再発防止に明示（floor 490を除去し 70vw上限910へ統一）
   ========================================================== */
@media(min-width:768px){
  .modelhouse__item{width:min(70vw,910px);}   /* PC=70vw上限910px（WF正） */
}
.modelhouse__ph,.modelhouse__ph.is-photo{aspect-ratio:3/2;height:auto;}
/* 2026-07-27 ディレクター指示：マーキー各アイテムを<a>リンク化し、ホバーで【画像は変わらず】その画像が
   ゆったり拡大（scale 1.0→1.06・overflow:hidden＝.is-photo内でクリップ）。流れ自体の減速はJSの速度変数が担当。 */
.modelhouse .is-photo img{transition:transform .7s cubic-bezier(.22,.61,.36,1);}
@media(hover:hover) and (pointer:fine){
  a.modelhouse__item:hover .is-photo img{transform:scale(1.06);}
}

/* ==========================================================
   セクション別：News リスト項目＝ホバーで薄いグレー背景が下から上にフェードイン --- 指示 News
   ========================================================== */
.news-list__link{position:relative;z-index:0;isolation:isolate;}
.news-list__link::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#f2f2f2;
  transform:scaleY(0);transform-origin:bottom;opacity:0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s ease;
}
@media(hover:hover) and (pointer:fine){
  .news-list__link:hover::before{transform:scaleY(1);opacity:1;}
}

/* ==========================================================
   セクション別：Event ＝ 2.5枚見せ・右端はみ出し・左右スクロールで最大9件＋10件目「過去の…」リンクカード
   （はみ出しはこのスクロールコンテナ内で完結＝ページ自体は横スクロールしない） --- 指示 Event
   ========================================================== */
.event-scroller{position:relative;min-width:0;} /* grid item のmin-width:auto暴走を抑止＝内部スクロールで完結（横スク防止） */
.event-cards{
  display:flex;flex-wrap:nowrap;gap:16px;min-width:0;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding-bottom:14px;
  /* 横スクロールバー非表示（機能は維持・ディレクター指示 2026-07-27） */
  scrollbar-width:none;-ms-overflow-style:none;
}
.event-cards::-webkit-scrollbar{display:none;width:0;height:0;}
.event-cards>.event-card,.event-cards>.event-more{flex:0 0 78vw;scroll-snap-align:start;}

/* 左右の山形（＜ ＞）送りボタン＝コンテンツに重ねる。細線グレー・端でフェード(disabled)。 */
.event-nav{
  position:absolute;top:var(--enav-top,30%);transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;padding:0;
  border:1px solid var(--c-line-dark);background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  z-index:3;transition:opacity .3s ease,background .3s ease;
}
.event-nav--prev{left:6px;}
.event-nav--next{right:6px;}
.event-nav svg{width:16px;height:16px;fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.event-nav[disabled]{opacity:0;pointer-events:none;}
@media(hover:hover) and (pointer:fine){ .event-nav:hover{background:#fff;} }
@media(max-width:767px){ .event-nav{width:34px;height:34px;} .event-nav svg{width:13px;height:13px;} }
@media(min-width:768px){
  .event-cards{gap:24px;}
  /* 2.5枚見せ＝コンテナ幅を2.5分割（gap込み）。3枚目が半分見えて右端がはみ出す */
  .event-cards>.event-card,.event-cards>.event-more{
    flex:0 0 calc((100% - 2*24px)/2.5 - 8px);
  }
}
/* 10件目：過去の見学会・イベントへ誘導するテキストリンクカード */
.event-more{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--c-line);color:var(--c-text);text-decoration:none;
  font-size:var(--fs-body-sm,14px);letter-spacing:.06em;line-height:1.9;
  aspect-ratio:auto;min-height:120px;transition:background .35s ease;
}
.event-more span{position:relative;}
.event-more span::after{content:"";display:inline-block;width:28px;height:1px;background:var(--c-line-dark);vertical-align:middle;margin-left:12px;}
@media(hover:hover) and (pointer:fine){ .event-more:hover{background:#f6f6f6;} }

/* ==========================================================
   セクション別：こだわり（横流れ）＝スタート時、左端に0.5枚分のマージン --- 指示 こだわり
   （extra()はscrollWidth基準で自動再計算されるため最終カードは従来どおり全表示）
   ========================================================== */
@media(min-width:768px){
  .lp-frag.is-pin .lp-frag__track>.lp-frag__item:first-child{
    margin-left:clamp(180px,15vw,220px);   /* カード幅 clamp(360,30vw,440) の約0.5枚 */
  }
}

/* ==========================================================
   セクション別：Design / Performance ＝ 画像全体クリック範囲・ホバーでズーム＋グレーフィルターを薄く（明るく）
   ボタンは横幅を他セクションと統一（min-width:360＝.btn基本）。 --- 指示 DESIGN/PERFORMANCE
   （HTML側で item=<a>・btn--small→btn・内側btnは<span>化）
   ========================================================== */
.entry-pair__item{cursor:pointer;text-decoration:none;}
.entry-pair__item::before{transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity 1s ease;}
.entry-pair__item::after{transition:background .5s ease;}
@media(hover:hover) and (pointer:fine){
  .entry-pair__item:hover::before{transform:scale(1.06);}
  .entry-pair__item:hover::after{background:rgba(26,26,26,.3);} /* グレー幕を薄く＝少し明るく */
}
.entry-pair__item .btn{cursor:pointer;}

/* ==========================================================
   背景画像フェードイン：タグライン帯（画像→時差テキスト）／Design・Performance（背景画像） --- 指示 全体共通6・インサート
   ========================================================== */
/* --- タグライン帯：背景画像を ::before に移し、到達でフェード → その後テキストが下から上に（時差） --- */
.tagline-band{background-image:none!important;}
.tagline-band::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:1;transition:opacity 1.1s ease;
}
.tagline-band--1::before{background-image:url(img/tagline-01.webp?v=20260727i);} /* 正式支給版（文字なし・IDW2604-5155-2・2400×900）2026-07-27 */
/* 帯#2（刷新 2026-07-27）: 背景画像を廃止＝::before自体を出さない（tagline-02の画像リクエストを止める）。 */
.tagline-band--2::before{display:none!important;content:none!important;background-image:none!important;}
html.fx-on .tagline-band--1:not(.is-shown)::before{opacity:0;}
html.fx-on .tagline-band--1.is-shown::before{opacity:1;}

/* 帯#2 per-char: 一文字ずつ 下(0.6em)→0 スライド＋opacity 0→1。stagger遅延はJSが各charに付与。
   fx-on（=モーション有効時にJSが付与）配下のみ初期非表示＝reduced/JS無効では静的表示。 */
html.fx-on .tagline-band--2 .tagline-band__char{
  opacity:0;transform:translateY(.6em);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
html.fx-on .tagline-band--2.is-charin .tagline-band__char{opacity:1;transform:none;}
/* テキスト「in design your identity」＝SR用spanを可視化し、画像フェードの"後"に下から上へ（時差） */
.tagline-band__sr{
  position:absolute;left:0;right:0;top:50%;z-index:1;
  width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;
  transform:translateY(-50%);text-align:center;color:#fff;
  font-family:var(--ff-en);font-weight:var(--fw-thin,200);text-transform:lowercase;
  letter-spacing:.3em;font-size:clamp(15px,2vw,26px);
  transition:opacity .8s ease .55s, transform .9s cubic-bezier(.22,.61,.36,1) .55s; /* .55s=画像フェード後の時差 */
  pointer-events:none;
}
html.fx-on .tagline-band:not(.is-shown) .tagline-band__sr{opacity:0;transform:translateY(calc(-50% + 26px));}
html.fx-on .tagline-band.is-shown .tagline-band__sr{opacity:1;transform:translateY(-50%);}

/* --- Design/Performance：背景（::before）を到達でフェードイン（ホバーのズームtransformとは別プロパティで共存） --- */
html.fx-on .entry-pair__item:not(.is-shown)::before{opacity:0;}
html.fx-on .entry-pair__item.is-shown::before{opacity:1;}

/* ==========================================================
   reduced-motion killswitch（force-on未適用時）＝動きを無効化・静的化
   ========================================================== */
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .split__more .btnroll__t{transition:none;}
  html:not(.wf-force-motion) .split__more:hover .btnroll__t{transform:none;}
  html:not(.wf-force-motion) .cs-slide.is-in{transition:opacity .3s ease;transform:none;}
  html:not(.wf-force-motion) .news-list__link::before{transition:none;}
  html:not(.wf-force-motion) .card__photo img,
  html:not(.wf-force-motion) .event-card__photo img,
  html:not(.wf-force-motion) .cs-slide img,
  html:not(.wf-force-motion) .entry-pair__item::before{transition:none;}
}