/* =========================================================================== モーション（スクロール連動のフェードアップ）— 2026-08-27 オーナー指示 --------------------------------------------------------------------------- LP本体（index.html / index-b.html）だけが読み込む。下層ページは静的のまま。 【検査を壊さないための設計 — ここが要】 すべての「隠す」指定を `@media (prefers-reduced-motion: no-preference)` の中に置く。 `tools/lib/browser-env.js` の stabilizePage は **`emulateMedia({ reducedMotion: 'reduce' })` で描画する**ので、 visual-diff / stack-check / check-offset / check-attrs の実行時は このブロックが丸ごと適用されず、**要素は最初から見えている＝検証済みの描画は1pxも動かない。** （transition を止めるだけの対策では `opacity: 0` の初期値が残ってしまい、 画面外のセクションが真っ白で撮られて全滅する。媒体クエリで切るのが正解） 同じ理由で、動きを減らす設定の利用者にはアニメーション自体が存在しない。 components.css の CTA ホバーと同じ方針。 【JS が無い / 落ちた場合】 隠す指定は `html.has-anim` が付いているときだけ効く。このクラスは `` のインラインスクリプトが付けるので、**JS が無効なら何も隠れない。** （body のパース前に付くので「一瞬見えてから消える」チラつきも出ない） =========================================================================== */ @media (prefers-reduced-motion: no-preference) { .has-anim .anim { opacity: 0; /* **transform ではなく translate プロパティを使う。** * この LP は絶対配置の部品が `transform: translate(-50%, -50%)` 等で * 自己センタリングしているものが多く、transform を上書きすると位置が壊れる。 * translate は独立したプロパティなので、既存の transform と合成される。 */ translate: 0 20px; transition: opacity 0.6s ease, translate 0.6s ease; /* 同じ親に並ぶ .anim には js/motion.js が 0,1,2… を入れる（カード列が順に出る） */ transition-delay: calc(var(--anim-i, 0) * 60ms); } .has-anim .anim.is-shown { opacity: 1; translate: 0 0; } /* カードのホバー。**動かさず影だけ強める。** * `translate` で浮かせると `.has-anim .anim.is-shown`（クラス3つ）に * `.card:hover`（クラス2つ）が詳細度で負けて効かないため、 * 打ち消し合わないプロパティで表現する。影は既存トークンの持ち替えだけで新規追加なし。 */ @media (hover: hover) { .card, .check-card, .section7__card, .flow-step { transition: box-shadow 0.3s ease; } .card:hover, .check-card:hover { box-shadow: var(--shadow-card-lg); } .section7__card:hover, .flow-step:hover { box-shadow: var(--shadow-cta); } } }