@charset "UTF-8"; /* ============================================================ THE MONOLITH — モーション層（PR-N-1 / motion-b2 正本準拠） ------------------------------------------------------------ 発火条件: 。ds-motion.js が同フラグを見て起動。 Session B は「design-system.css / ds-motion.css / ds-motion.js の 3リンク + body[data-ds-motion]」を足すだけで同じ演出を再利用できる。哲学: 光は装飾ではなく「応答」。鼓動（脈動）は控えめ・低頻度。 prefers-reduced-motion / 停止ボタンで完全停止（reveal は即時表示に降格）。 ============================================================ */ /* ===== reveal（スクロールで浮かび上がる） ===== */ [data-ds-motion] .mo { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); } /* mo-in 後は transform:none に戻し、コンポジットレイヤーを残さない（will-change を常設するとヘッドレス fullPage 等でレイヤーが黒く残る） */ [data-ds-motion] .mo.mo-in { opacity: 1; transform: none; } /* ===== 胞子（生命の気配・canvas） ===== */ [data-ds-motion] #ds-spores { position: fixed; inset: 0; z-index: 1; pointer-events: none; } /* ===== 信号のトレース（cold 面を走る一条の光） ===== ★ PR-MB-4: keyframe 名を ds-trace-run → ds-trace-sweep へ改名した。 @keyframes は **グローバル名前空間** で、style.css:3286 が同名・別内容の `ds-trace-run`（mission の信号光・往復＋glow）を定義していたため、 mission に本ファイルを足した瞬間に「後に読まれた方がページ全体で勝つ」衝突が起きていた（実測: mission 側の信号光が無言で片道・opacity .85 に化ける）。 ds- 接頭辞があっても同名衝突は防げない。keyframe を足す時は全 CSS 横断で同名 grep すること。 ★ 見た目は「画面ごとに上書き可」。本ブロックは既定値であり、 mission は body.ds-mission .ds-trace（0,2,1 > 0,2,0）で自分の art direction を当てている。 */ [data-ds-motion] .ds-trace { position: absolute; top: -1px; left: -64px; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--cold-bracket), transparent); pointer-events: none; animation: ds-trace-sweep 6s linear infinite; } @keyframes ds-trace-sweep { 0% { left: -64px; opacity: 0; } 10% { opacity: .85; } 90% { opacity: .85; } 100% { left: 100%; opacity: 0; } } /* ===== 鼓動（heartbeat）: S達成級の稀な脈動を全体で控えめに ===== */ [data-ds-motion].beat .ds-cold, [data-ds-motion].beat .ds-hero { box-shadow: 0 0 22px rgba(94, 234, 212, .10); border-color: rgba(94, 234, 212, .38); transition: box-shadow .6s ease, border-color .6s ease; } /* ===== 停止ボタン（右下・常設トグル） ===== */ #ds-mo-stop { position: fixed; right: 14px; bottom: 14px; z-index: var(--z-float, 200); font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .16em; padding: 7px 12px; color: var(--color-text-low, var(--color-text-low)); background: rgba(6, 9, 11, .82); border: 1px solid var(--color-line-strong, rgba(255,255,255,.16)); border-radius: 2px; cursor: pointer; opacity: .5; transition: opacity .25s ease, color .25s ease, border-color .25s ease; } #ds-mo-stop:hover { opacity: 1; color: var(--color-monolith-mint, var(--color-monolith-mint)); border-color: rgba(94,234,212,.5); } /* ===== reduced-motion: システム設定が優先。JS も二重ガードするが CSS でも停止 ===== */ @media (prefers-reduced-motion: reduce) { [data-ds-motion] .mo { opacity: 1; transform: none; transition: none; } [data-ds-motion] .ds-trace { animation: none; display: none; } [data-ds-motion].beat .ds-cold, [data-ds-motion].beat .ds-hero { box-shadow: none; } }