@layer components { /* * スクロール reveal（共有プリミティブ）。 * * 要素に .nc-fade を付けると「下からフェードイン」する。既定（no-JS / * reduced-motion）は可視のまま。JS 有効（ で html.nc-js を先付け）かつ * motion 許可時のみ初期非表示にし、reveal.js が交差時に .is-visible を付与して現す。 * html.nc-js を同期付与するため FOUC は起きない（reveal.js 失敗時は nc-ready 印が * 付かず head フォールバックが全要素を強制表示する）。 * * 以前は why-nexray.css に同居していたが、トップ（news-list）や /news/ 一覧など * 複数サーフェスで使うため共有コンポーネントへ切り出した（#160）。 * * .nc-band-wipe は DB（why-nexray のページ本文）に書かれたクラス名で、why-nexray の主見出し * 「守り続けてきたものを、未来へ。」だけが持つ。こちらは .nc-fade とは別挙動＝「左→右へ * ワイプして現れる」（下記）。reveal.js と nexray_print_anim_ready() のインライン JS は * 元から両クラスを監視しているので、JS 側は無変更で成立する。 */ @media (prefers-reduced-motion: no-preference) { html.nc-js .nc-fade { opacity: 0; transform: translateY(20px); transition: opacity 1.6s var(--nexray-ease-out), transform 1.6s var(--nexray-ease-out); } html.nc-js .nc-fade.is-visible { opacity: 1; transform: none; } /* * 左→右ワイプ（.nc-band-wipe＝why-nexray の主見出し専用）。 * * 移植元（静的サイト）は「白帯が文字を覆った状態から右へ畳んで露出する」GSAP 演出で、 * 見た目は文字が左から順に現れる動き。#260 で青箱ごと帯を撤去した際にフェードアップへ * 置換したが、先方FB「もともとついてた左から表示する動きに戻す」で復活させた（#269）。 * * 実装は白帯の擬似要素ではなく clip-path。狙いは背景色への非依存：帯方式は「見出しの * 背後が必ず白（nexray-sheet）」を前提にするが、clip-path なら要素自身を切るだけなので * 前提を持たない（#255 で撤去した装飾の復活とも読まれない）。 * * フェードアップ（opacity + translateY）は併用しない＝ワイプのみ。移植元も opacity を * 瞬時に 1 にして帯だけを動かしていた。併用すると上へ動きながら左から現れる二重の動きに * なり、clip 境界も同時に平行移動して輪郭がぶれる。後続本文（.nc-fade）との差別化にも * なる＝見出しだけ登場の質感が違う。 * * 尺 1.4s ＋ cubic-bezier(0.3, 0, 0.4, 1)。狙いは「出だしは走り出しつつ、全体はゆっくり * 見せる」＝前寄りに立ち上げてから長く減速させる非対称カーブ。 * * #269 の初版はここで既存トークン --nexray-ease-out（ease-out-expo）を流用していた * ——「新しい cubic-bezier をマジック値で増やさない」という判断だが、expo-out は経過 * 0.27s（尺 0.9s の 30%）でワイプ 87.5% を終える極端な前倒しカーブで、出だしが一瞬で * 走り抜けて見えた。まず移植元の GSAP power2.inOut（＝ease-in-out-cubic ／ CSS 等価 * cubic-bezier(0.65, 0, 0.35, 1)）へ差し戻したが、対称 inOut は出だちに溜めがあり * 「立ち上がりが鈍い」ため、ease-in 側を削って現在値に落ち着いた。 * * 尺と ease-in は絶対時間で逆向きに効く点に注意：尺を伸ばすと正規化上の前倒しが * 絶対 ms では相殺される（1.4s に 0.65,0,0.35,1 を乗せると 0.27s 時点 6% 台まで落ちる）。 * 現在値は 0.27s→14.5% / 0.94s→87.5% / 1.4s→100% で、0.9s 版（0.27s→11.4%）より * 立ち上がりが速く、かつ全体は長い。値を動かすときはこの2軸を一緒に見ること。 * * このカーブは .nc-band-wipe の 1 箇所専用なので tokens.css には載せず直書きする * （--nexray-ease-out は他 6 箇所で共有中＝触らない）。単発カーブの直書きは * blocks/site-nav/style.css のドロワーと同じ扱い。 * * no-JS / reduced-motion はこのブロックが効かず clip-path 無し＝即表示（.nc-fade と同じ * 安全弁）。reveal.js が失敗した場合も head フォールバックが .is-visible を付ける。 */ html.nc-js .nc-band-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.3, 0, 0.4, 1); } html.nc-js .nc-band-wipe.is-visible { clip-path: inset(0); } } }