/* visual-asset — VISUAL ASSETS（写真予定箇所の統一プレースホルダ ＝ 最終画像と同じ枠・同じ動きを持つ Design Element）
   出典: Master Prompt §25〜§30（2026-10-17）。地ほぼ黒 / Asset の面は Dark Charcoal / 枠なし / 角丸ほぼ 0 /
         ラベル「VISUAL ASSETS」は uppercase・小・広い字送り・低コントラスト・中央。山アイコン・×印・チェッカーは置かない。
   動きの値: Master Prompt §22（scale 1.03〜1.06 → 1、1000〜1600ms）、§18（stagger 40〜120ms → 150ms は写真用に少し長く）。
   使い方: _util.js の visualAsset()。src を渡すだけで写真に置き換わる（Layout と Motion は作り直さない）。
   値: 面 --cds-va-bg（既定 --cds-bg-soft）、ラベル --cds-va-label（既定 --cds-text-secondary）。スタイルセット / brand.json の extraCss で上書きする */
.va { position: relative; display: block; margin: 0; width: 100%; aspect-ratio: var(--va-ratio, 16 / 9); overflow: hidden; background: transparent; }
.va--fill { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.va__in { position: absolute; inset: 0; display: grid; place-items: center; background: var(--cds-va-bg, var(--cds-bg-soft)); }
.va__in img, .va__in video, .va__in picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.va__in img, .va__in video { object-fit: cover; }
/* ラベル（§26: uppercase / small / wide letter spacing / low contrast / center。text-indent で字送りぶんの右寄りを戻す） */
.va__label { position: relative; font-family: var(--cds-font-label, var(--cds-font-en)); font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.24em; text-indent: 0.24em; text-transform: uppercase; color: var(--cds-va-label, var(--cds-text-secondary)); white-space: nowrap; user-select: none; }

/* mask: 下から開く枠（1.4s）＋ 中身 1.06 → 1（1.6s）。--i は親の [data-stagger] か呼び出し側が振る（1 枚 150ms） */
.is-js .va--mask { clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--cds-ease) calc(var(--i, 0) * 0.05s); }
.is-js .va--mask.is-inview { clip-path: inset(0 0 0 0); }
.is-js .va--mask .va__in { transform: scale(1.06); transition: transform 0.9s var(--cds-ease) calc(var(--i, 0) * 0.05s); }
/* hover（リンクの中の面だけ）: 1.03 へ 1.4s、戻りも 1.4s。入りと戻りを同じ長さにして「戻りで跳ねる」のを避ける */
@media (hover: hover) { a .va.is-inview .va__in, a:hover .va.is-inview .va__in { transition: transform 1.4s var(--cds-ease); } a:hover .va.is-inview .va__in { transform: scale(1.03); } }
.is-js .va--mask.is-inview .va__in { transform: none; }

/* fade: 透明度（0.9s）＋ 中身 1.03 → 1（1.2s） */
.is-js .va--fade { opacity: 0; transition: opacity 0.5s var(--cds-ease) calc(var(--i, 0) * 0.05s); }
.is-js .va--fade.is-inview { opacity: 1; }
.is-js .va--fade .va__in { transform: scale(1.03); transition: transform 0.7s var(--cds-ease) calc(var(--i, 0) * 0.05s); }
.is-js .va--fade.is-inview .va__in { transform: none; }

/* 保険（motion.js の 8s 静的化）と reduced-motion は最終状態 */
.is-static .va--mask, .is-static .va--fade { clip-path: none; opacity: 1; }
.is-static .va--mask .va__in, .is-static .va--fade .va__in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .is-js .va--mask, .is-js .va--fade { clip-path: none; opacity: 1; }
  .is-js .va--mask .va__in, .is-js .va--fade .va__in { transform: none; }
}

/* 単体確認用の並び（visual-asset パーツの render。他のパーツは使わない） */
.va-grid { display: grid; gap: var(--cds-g); }
.va-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.va-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .va-grid--3, .va-grid--2 { grid-template-columns: 1fr; } }