/* ============================================================
   Auguri! ─ TOP「暮らしの品々｜The Auguri Selection」大判が応える（本番・2026-09-19 高野様ご確定）
   ------------------------------------------------------------
   デモ 30 番の **3 大判が応える** を採用（「3 で反映してください」）。

     ・右の 4 行（装う／整える／暮らす／味わう）にカーソルを置くと、
       左の大判（写真 19）が **その行の写真** に入れ替わり、カーソルに少しついてくる（±8px・1.06 倍）
     ・触れている行は、語（和文・英字）が 12px 右へ、行の写真の陰が 34% → 20% に
     ・キーボードで辿ったとき（フォーカス）も同じ

   決まりごと
     ・触れていないときは **ai と画素で一致**（大判の写しは不透明度 0・語は動かない）
     ・行の当たりは assets/js/selection-motion.js が .b-selection に data-slm-row="1〜4" を付ける
     ・大判の写し（<img class="slm-alt">）はビルド時に大判の中へ入れる（build/demo_selection_motion.inject_alts）
     ・ai 突き合わせ（.compare）・動きを減らす設定では入れ替えない
     ・デモ 30 番（body に data-slm が付く）では、この本番の効きは止める
   ============================================================ */
:root { --slm-ease: cubic-bezier(.22, 1, .36, 1); }

/* 大判の写し：ふだんは透明＝写真 19 のまま */
.sl__ph > img.slm-alt { opacity: 0; }

body:not([data-slm]) .sl__ph > img.slm-alt { transition: opacity .7s var(--slm-ease), transform .9s var(--slm-ease); }
body:not([data-slm]) .b-selection[data-slm-row="1"] .sl__ph > img.slm-alt[data-row="1"],
body:not([data-slm]) .b-selection[data-slm-row="2"] .sl__ph > img.slm-alt[data-row="2"],
body:not([data-slm]) .b-selection[data-slm-row="3"] .sl__ph > img.slm-alt[data-row="3"],
body:not([data-slm]) .b-selection[data-slm-row="4"] .sl__ph > img.slm-alt[data-row="4"] {
  opacity: 1;
  transform: scale(1.06) translate(calc(var(--slm-px, 0) * 8 * var(--s)), calc(var(--slm-py, 0) * 8 * var(--s)));
}

/* 触れている行：語が 12px 右へ、写真の陰が少し明るく */
body:not([data-slm]) .sl__table :is([class*="sl__jp"], [class*="sl__en"], [class*="sl__cap"]) { transition: transform .6s var(--slm-ease); }
body:not([data-slm]) .sl__table .ph.has-photo::after { transition: background-color .5s var(--slm-ease); }
body:not([data-slm]) .b-selection[data-slm-row="1"] :is(.sl__jp1, .sl__en1),
body:not([data-slm]) .b-selection[data-slm-row="2"] :is(.sl__jp2, .sl__en2),
body:not([data-slm]) .b-selection[data-slm-row="3"] :is(.sl__jp3, .sl__en3),
body:not([data-slm]) .b-selection[data-slm-row="4"] :is(.sl__jp4, .sl__en4) { transform: translateX(calc(12 * var(--s))); }
body:not([data-slm]) .b-selection[data-slm-row="1"] .sl__th1::after,
body:not([data-slm]) .b-selection[data-slm-row="2"] .sl__th2::after,
body:not([data-slm]) .b-selection[data-slm-row="3"] .sl__th3::after,
body:not([data-slm]) .b-selection[data-slm-row="4"] .sl__th4::after { background-color: rgba(0, 0, 0, .2); }

/* ── 触れている行の枠の中がほのかに光る（2026-09-19 高野様「カーソルを置いた時に枠内が少し発光するモーションを追加できますか？」）──
   行（上下の罫のあいだ・x 900〜1800・高さ 200）の中に、カーソルを中心にした柔らかな光（紙より少し明るい白の広がり）を置く。
   光の板 .slm-glow は JS が帯のいちばん奥（文字・罫・写真より下）に入れるので、文字や写真の色は変わらない（写真の上には出ない）。
   ふだんは不透明度 0＝ai と画素で一致。入るとき 0.6 秒、離れるとき 0.8 秒でふわっと。光の中心は --gx/--gy（行の中の位置・px）。 */
.slm-glow {
  position: absolute; left: calc(900 * var(--s)); width: calc(900 * var(--s)); height: calc(200 * var(--s));
  pointer-events: none; opacity: 0;
  background-color: transparent;
  background-image:
    radial-gradient(calc(420 * var(--s)) calc(220 * var(--s)) at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 253, 247, .55) 0%, rgba(255, 252, 244, .3) 38%, rgba(255, 251, 242, 0) 100%),
    linear-gradient(rgba(255, 253, 248, .1), rgba(255, 253, 248, .1));
  /* 2026-09-19 高野様「枠の発光はもう少し弱くして」：中心 .95→.55・中間 .55→.3・行全体の下地 .22→.10（およそ 6 割の強さ） */
}
.slm-glow[data-row="1"] { top: calc(128 * var(--s)); }
.slm-glow[data-row="2"] { top: calc(328 * var(--s)); }
.slm-glow[data-row="3"] { top: calc(528 * var(--s)); }
.slm-glow[data-row="4"] { top: calc(728 * var(--s)); }
body:not([data-slm]) .slm-glow { transition: opacity .8s var(--slm-ease); }
body:not([data-slm]) .b-selection[data-slm-row="1"] .slm-glow[data-row="1"],
body:not([data-slm]) .b-selection[data-slm-row="2"] .slm-glow[data-row="2"],
body:not([data-slm]) .b-selection[data-slm-row="3"] .slm-glow[data-row="3"],
body:not([data-slm]) .b-selection[data-slm-row="4"] .slm-glow[data-row="4"] { opacity: 1; transition-duration: .6s; }
.compare .slm-glow { display: none; }
@media (prefers-reduced-motion: reduce) { .slm-glow { transition: none !important; } }

/* ai 突き合わせでは出さない／動きを減らす設定では入れ替えない */
.compare .sl__ph > img.slm-alt { display: none; }
@media (prefers-reduced-motion: reduce) {
  body:not([data-slm]) .sl__ph > img.slm-alt { transition: none; opacity: 0 !important; }
  body:not([data-slm]) .sl__table :is([class*="sl__jp"], [class*="sl__en"], [class*="sl__cap"]) { transition: none; transform: none !important; }
}