/* ==========================================================================
   link-anim.css — サイト共通「リンクのホバーアニメーション」統一レイヤー
   2026-08-10 ディレクター指示（リリースタグ 20260810h）
   --------------------------------------------------------------------------
   指示原文（要旨）:
     「interview一覧のアーカイブカード＝画像サムネとタイトルがリンクと視覚的に
       わからない。トップページのアニメーションと同様、画像はロールオーバーで
       ズーム、タイトル文字はロールオーバーで下から回転してアンダーバー表示に。
       他コンテンツページでも、画像リンクと、ボタン以外のテキストリンクは同様の
       アニメーションで統一。bizサイトも同様」

   構成:
     (a) 画像リンクズーム   .la-zoom（クリップ枠）＋ .la-zoom__img（拡大対象）
     (b) 文字ロール＋下線   .la-roll > .la-roll__w > .la-roll__t[data-text]
     (c) 多行フォールバック .la-roll--flat（ロール不可＝下線のみ）
     (d) ダーシ連結         .dash-run（「——」のletter-spacing由来スペース除去）
   いずれもDOM生成は link-anim.js（実行時のみ・静的HTMLは不変）。

   参照実装（＝「トップページと同様」の正）:
     - 文字ロール : design-system.css .btn .btnroll / global-nav.css .gnav-roll
     - 画像ズーム : home-anim.css a.card:hover .card__photo img（scale 1.06）

   住宅（design/pages/）と biz（design/pages/biz/）で共用する1組。
   bizからは ../assets/link-anim.css で参照する。
   既存共有CSS（c1-theme / design-system / global-nav / biz-c1-dark / biz-nav）は
   一切編集せず、本ファイルに閉じる。
   ========================================================================== */

:root{
  /* (a) 画像ズーム。ディレクター指示値＝scale 1.06 / .8s ease。
     参考: 既存 home-anim.css は .65s cubic-bezier(.22,.61,.36,1)。
     完全一致させたい場合はこの2行を差し替えるだけでサイト全体に効く。 */
  --la-zoom-scale:1.06;
  --la-zoom-dur:.65s;
  --la-zoom-ease:cubic-bezier(.22,.61,.36,1);
  /* (b) 文字ロール＝.btn / .gnav-roll と同値（意匠を揃えるため変更しない） */
  --la-roll-dur:.42s;
  --la-roll-ease:cubic-bezier(.19,1,.22,1);
  /* (b) アンダーバー＝左→右に伸びる1px罫（無彩色＝currentColor） */
  --la-uline-dur:.42s;
  --la-uline-ease:cubic-bezier(.19,1,.22,1);
  --la-uline-w:1px;
  --la-uline-gap:0px;   /* 下線とテキストの間隔（行ボックス下端からの持ち上げ量） */
}

/* --------------------------------------------------------------------------
   (a) 画像リンク＝ロールオーバーでゆったりズーム
   .la-zoom  … imgの直接親（クリップ枠）。JSがoverflow:hiddenを付与する役
   .la-zoom__img … 拡大する img 本体
   ※既にズーム実装のある画像（.is-photo img / .card__photo img / .cs-slide img /
     .work-card .ph--photo>img / .wslide img 等＝transition:transform 済み）は
     JS側で「transitionPropertyにtransformを含む」判定により除外＝二重適用しない。
   -------------------------------------------------------------------------- */
.la-zoom{overflow:hidden;}
.la-zoom__img{
  transition:transform var(--la-zoom-dur) var(--la-zoom-ease);
  backface-visibility:hidden;   /* 拡大時のエッジのちらつき抑制 */
}
@media (hover:hover) and (pointer:fine){
  .la-hover:hover .la-zoom__img,
  .la-hover:focus-visible .la-zoom__img{transform:scale(var(--la-zoom-scale));}
}

/* 既存ズーム実装のうち「拡大率だけ」が外れ値になっている箇所を統一（2026-08-10）。
   biz施工事例一覧のカードのみ scale 1.03（他は 1.05〜1.06）で、並べると弱く見えるため
   新レイヤーと同値へ合わせる。transform 以外（duration / timing / opacity遷移）は
   既存実装に触れない＝クロスフェード等の副作用を出さない。
   ※ biz-works-img.css は body 側で後読みされるためクラス2連記で詳細度を上げている。
   ※ 元に戻す場合はこのブロックを削除するだけでよい（既存CSSは無改変）。 */
@media (hover:hover) and (pointer:fine){
  .work-card.work-card:hover .ph--photo > img{transform:scale(var(--la-zoom-scale));}
}
@media (prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .work-card.work-card:hover .ph--photo > img{transform:none;}
}

/* --------------------------------------------------------------------------
   (b) テキスト＝ロールオーバーで文字が下から回転して入れ替わり、下線が左→右に伸びる
   DOM: <el class="la-roll">
          <span class="la-roll__w">            ← クリップ枠＋下線の描画面
            <span class="la-roll__t" data-text="…">…</span>   ← 送られる本体
          </span>
        </el>
   .la-roll__t::after が data-text の複製＝下から入ってくる文字（.btnroll と同方式）
   -------------------------------------------------------------------------- */
.la-roll__w{
  display:inline-block;position:relative;vertical-align:top;max-width:100%;
  overflow:hidden;                     /* 複製文字（top:100%）を隠すクリップ枠 */
}
.la-roll__t{
  position:relative;display:inline-block;
  transition:transform var(--la-roll-dur) var(--la-roll-ease);
}
.la-roll__t::after{
  content:attr(data-text);
  position:absolute;left:0;top:100%;white-space:nowrap;
}
/* 下線＝クリップ枠の下端に敷く（文字が送られても下線は動かない） */
.la-roll__w::after{
  content:"";position:absolute;left:0;bottom:var(--la-uline-gap);
  width:0;height:var(--la-uline-w);background:currentColor;
  transition:width var(--la-uline-dur) var(--la-uline-ease);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .la-hover:hover  .la-roll__t,
  .la-hover:focus-visible .la-roll__t{transform:translateY(-100%);}
  .la-hover:hover  .la-roll__w::after,
  .la-hover:focus-visible .la-roll__w::after{width:100%;}
}

/* (c) 多行フォールバック＝ロール不可（複製の着地位置が1行分しかないため）。
   下線アニメのみ有効にする。判定は link-anim.js が実測（行数）で行い、
   リサイズでも再判定する。 */
.la-roll--flat > .la-roll__w{overflow:visible;}
.la-roll--flat .la-roll__t{transition:none;}
.la-roll--flat .la-roll__t::after{content:none;}
@media (hover:hover) and (pointer:fine){
  .la-hover:hover .la-roll--flat .la-roll__t,
  .la-hover:focus-visible .la-roll--flat .la-roll__t{transform:none;}
  .la-roll--flat.la-hover:hover .la-roll__t,
  .la-roll--flat.la-hover:focus-visible .la-roll__t{transform:none;}
}

/* 既に静的な下線（border-bottom）を持つリンクは二重線になるので下線アニメを出さない
   （文字ロールのみ適用）。JSが .la-roll--underlined を付与する。 */
.la-roll--underlined > .la-roll__w::after{content:none;}

/* --------------------------------------------------------------------------
   (d) ダーシ連結（2026-08-10 追加指示）
   「——」（EM DASH / HORIZONTAL BAR の連続）に letter-spacing が入るとグリフ間に
   隙間が出るため、連続部分だけ letter-spacing を殺して繋げる。
   ・テキストは保持（読み上げ・コピペ・検索に影響しない）＝ボーダー置換より安全
   ・font-feature/kerning由来の微小な隙間も潰すため font-kerning:none を併用

   【実測（2026-08-10・headless Chrome 300px拡大レンダーで目視）】
     A 現状（--ff-jp＝Jost先頭・letter-spacing .96px）  … 明確な隙間あり
     B letter-spacing:0 のみ                            … **隙間が残る**（不採用）
     C letter-spacing:0 ＋ Jost除外（Noto Sans JP系）    … **完全に連結**（採用）
     D ボーダー置換                                      … 連結するが線が細く位置もずれる（予備）
   隙間の主因は letter-spacing ではなく **Jost の EM DASH グリフのサイドベアリング**。
   よって「和文フォントのダーシを使う」＝ C を採用する。フォントスタックは --ff-jp から
   先頭の Jost だけを外したもの（以降は --ff-jp と同一・欧文が混じっても崩れない）。
   -------------------------------------------------------------------------- */
.dash-run{
  letter-spacing:0;
  font-family:"YakuHanJP","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",
              "Yu Gothic",YuGothic,Meiryo,sans-serif;   /* ← --ff-jp から Jost を除いたもの */
  font-kerning:none;
  font-feature-settings:"palt" 0,"kern" 0;
  white-space:nowrap;              /* ダーシ列の途中で改行させない */
}
/* 予備: ボーダー表現（テキストは透明にして残し、1本の罫線として描く） */
html.la-dash-border .dash-run{
  position:relative;color:transparent;
}
html.la-dash-border .dash-run::after{
  content:"";position:absolute;left:0;right:0;top:.56em;
  border-top:1px solid currentColor;
}

/* --------------------------------------------------------------------------
   reduced-motion（site慣例: html.wf-force-motion が付いていない場合に有効）
   全アニメーションを止め、ホバー時は下線を即時表示するだけにする。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .la-zoom__img,
  html:not(.wf-force-motion) .la-roll__t,
  html:not(.wf-force-motion) .la-roll__w::after{transition:none;}
  html:not(.wf-force-motion) .la-hover:hover .la-zoom__img,
  html:not(.wf-force-motion) .la-hover:focus-visible .la-zoom__img{transform:none;}
  html:not(.wf-force-motion) .la-hover:hover .la-roll__t,
  html:not(.wf-force-motion) .la-hover:focus-visible .la-roll__t{transform:none;}
  html:not(.wf-force-motion) .la-hover:hover .la-roll__w::after,
  html:not(.wf-force-motion) .la-hover:focus-visible .la-roll__w::after{width:100%;}
}