/* トップの段階 0〜6 を「左の図を固定し、1 つの扉が連続して変わる」形で見せる版（固定の版）の CSS。 TASK-135 の試作（依頼者の決定 D-2026-11-10-3。spec#47。元の希望は spec#38）を、依頼者の回答 r6-01（2026-11-10。TOP-6）で公開ビルドの既定にした（TASK-136・#2109）。 `--top-mode pinned`（既定。pages.rs の PUBLIC_TOP_MODE）の版のトップだけが site.css・header-menu.css の後に読む（pages.rs の layout）。 `--top-mode stacked`（縦並びの比較用）はこのファイルを書き出さず、読み込まない。 作り: - HTML は現行の段階の節 7 つ（図 7 枚・見出し 7）をそのまま持ち、`.story > .story-text` で包む。左の列の `.story-fig` に合成図（figures.rs の story_door。aria-hidden の視覚専用の複製）を 1 つ足す。 - 合成図を見せるのは、動きが出る環境だけ（下の 1 つのゲートの内側）。ゲートの外では合成図は display: none で、7 節がそのまま縦に並ぶ（TOP-5 の 7／7。D-2026-11-10-3 (2)）。 ゲート = animation-timeline と timeline-scope の対応・画面のメディア（印刷は外れる）・動きを減らす設定なし・JS 有効・画面の高さが下限以上。 - ゲートの内側では 7 枚の図を視覚的にだけ隠し（.sr と同じ切り抜き）、アクセシビリティツリーには残す（TOP-1・A11Y-5 の img 7・region 7 を変えない）。 - 部品（data-pin）は右の文の節（section.stage）の view-timeline（--s0〜--s6）で進む。共通の祖先 .story の timeline-scope で合成図から参照する。時間では再生しない（MOTION-3）。 - スクロールの速度・位置を書き換えない（MOTION-9）。固定は position: sticky だけ。JS は使わない（PERF-4）。 構造の検査は src/main.rs の top_pinned_css_problems（cargo test）、描画の点検は check/top-pinned.mjs。 値の扱い: 位置・角度・基準点・視差の倍率は figures.rs が inline の CSS 変数（--pin-from・--pin-tilt・--pin-origin と視差の量）で渡す（SHAPE-8。ここに図形の数値を書かない）。 動きの keyframes は site.css のもの（fade・grow・extend・rise・door-l・door-r・tone・beam・par）を参照し、足りない 6 つ（pin-*）だけをここで定義する。 決まっていない値（節の高さ・狭い幅の図の高さ・縦並びに落ちる画面の高さ）は制作側の【提案】で spec の値ではない。下の :root と @media の 1 か所ずつで差し替える。 高さと間隔は px で持つ（r6-01「100dvh などではなく、指定の px」）。画面の高さ（svh）は、px の大きさの箱と文の窓を画面の中央に置く位置の計算にだけ使う。 */ :root { /* 右の文の節 1 つの最小の高さ＝右の要素（段階の文）の間隔とスクロールの量。図が 1 段階ぶん変わる間に送る量で、短いと変化が速くなる。 r6-01（2026-11-10 の依頼者の回答「右の要素の間隔が広いので、もう少し狭めて」「指定の px で」）で 80svh（幅 1280×800 で 640px）から狭めた。【提案】 */ --pin-stage-min-h: 480px; /* 文の窓（段階の節の view-timeline の窓）の高さ。節の高さの 1.2 倍の px（画面の高さによらない）。 cover の百分率の分母は「節の高さ＋窓の高さ」で、窓が節の 1.5 倍を超えると、ある段階の節が窓の中央にあるうちに次の段階の部品が引き始める（cover 10%）。 1.2 倍なら中央のとき次の節は cover 約 4.5% で、引き始めの前。倍率は節の高さに従わせる構造の値で、差し替えるのは --pin-stage-min-h の方 */ --pin-window-h: calc(var(--pin-stage-min-h) * 1.2); /* 広い幅で、文の窓と図の箱を画面の中央へ寄せるときの、ヘッダーの下からの下げ幅の上限。背の高い画面で窓が下がりすぎると、 ページの先頭（段階 0 の節が上にある位置）で段階 1 の動きが始まってしまう（2560×1440 で実測）。【提案】 */ --pin-window-top-max: 120px; /* 幅 760 px 以下で上に固定する図の目標の高さ。文の窓の広さと引き換え。幅 390×844 で今の図の高さ（283px。幅の上限 340px で決まる）とほぼ同じ px にした。【提案】 */ --pin-fig-h-narrow: 280px; /* 幅 760 px 以下の図の幅の上限。site.css の同じ幅の .fig の max-width（段階の静止図と同じ大きさ）と同じ値（一致の検査は main.rs の top_pinned_css_keeps_gate_and_scroll_only） */ --pin-fig-max-w-narrow: 340px; } /* ゲートの外（既定）: 合成図は出さない。縦並びの形は現行と同じ（.story・.story-text は箱を足すだけで見た目を変えない） */ .story-fig { display: none; } /* ゲート。画面の高さの下限 560px は【提案】（A11Y-4 の 640×400 相当〔ズーム 200%〕で縦並びに落とすための値。@media は var() を使えないため、ここで直接書く）。 timeline-scope の @supports は構文の対応しか見ない。動作は check/top-pinned.mjs が Chromium・WebKit で実測する（関門の結果は docs/records/task-135-pinned-door.md） */ @supports (animation-timeline: view()) and (timeline-scope: --x) { @media screen and (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-height: 560px) { /* 2 列: 左が固定の図、右が文。比と間隔は site.css の .stage と同じ値を参照する（.stage の 2 列をこの入れ物に移す） */ html[data-top-mode="pinned"][data-motion="a"] .story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-section); timeline-scope: --s0, --s1, --s2, --s3, --s4, --s5, --s6, --p0, --p6; } /* 文の窓の上端（--pin-window-top）。ヘッダーの下（--scroll-pad-top。NAV-3）から、画面の残りと窓の px の高さの差の半分だけ下げて中央へ寄せる（上限 --pin-window-top-max）。 画面の高さ（svh）を使うのは窓の位置と、画面が窓より低いときに窓を画面の残りへ縮める計算だけで、窓・節・図の箱の高さは px（r6-01） */ html[data-top-mode="pinned"] { --pin-window-top: calc(var(--scroll-pad-top) + clamp(0px, (100svh - var(--scroll-pad-top) - var(--pin-window-h)) / 2, var(--pin-window-top-max))); /* 段階の節の view-timeline-inset（上 下）。窓は上端から --pin-window-h。下の幅 760 px 以下の @media が帯の下の窓に差し替える */ --pin-inset: var(--pin-window-top) max(0px, 100svh - var(--pin-window-top) - var(--pin-window-h)); } /* align-self: start がないと grid の既定（stretch）で箱が列の高さいっぱいになり、sticky が効かない。 箱は文の窓と同じ px の高さ（画面の残りより高ければ残りまで）で、窓と同じ上端（--pin-window-top）に固定し、図を箱の縦の中央に置く（窓の中央に来た段階の文と図の中央が揃う） */ html[data-top-mode="pinned"][data-motion="a"] .story-fig { display: grid; align-content: center; align-self: start; position: sticky; top: var(--pin-window-top); min-height: min(var(--pin-window-h), 100svh - var(--scroll-pad-top)); } /* 文の節: 1 列にし、図の列を空けない。節の高さの下限でスクロールの量を確保する */ html[data-top-mode="pinned"][data-motion="a"] .story .stage { position: relative; grid-template-columns: minmax(0, 1fr); min-height: var(--pin-stage-min-h); align-content: center; } /* 7 枚の図は視覚的にだけ隠す（site.css の .sr と同じ切り抜き）。display: none・visibility: hidden にしない（名前付きの図をツリーに残す。TOP-1・A11Y-5） */ html[data-top-mode="pinned"][data-motion="a"] .story .stage-fig { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 文の節ごとの timeline。--sN は物語の変化で、窓は上の文の窓（--pin-inset。高さ --pin-window-h の px で、画面の高さで段階の切り替わる位置が変わらない）。 --pN は視差（inset 0。site.css の --fig-par と同じ。MOTION-10 の注記）。view-timeline の一括指定は inset を auto に戻すので、inset は同じ規則に書く */ html[data-top-mode="pinned"] #stage-0 { view-timeline: --s0 block, --p0 block; view-timeline-inset: var(--pin-inset), 0; } html[data-top-mode="pinned"] #stage-1 { view-timeline: --s1 block; view-timeline-inset: var(--pin-inset); } html[data-top-mode="pinned"] #stage-2 { view-timeline: --s2 block; view-timeline-inset: var(--pin-inset); } html[data-top-mode="pinned"] #stage-3 { view-timeline: --s3 block; view-timeline-inset: var(--pin-inset); } html[data-top-mode="pinned"] #stage-4 { view-timeline: --s4 block; view-timeline-inset: var(--pin-inset); } html[data-top-mode="pinned"] #stage-5 { view-timeline: --s5 block; view-timeline-inset: var(--pin-inset); } html[data-top-mode="pinned"] #stage-6 { view-timeline: --s6 block, --p6 block; view-timeline-inset: var(--pin-inset), 0; } /* 部品の共通の設定。速さ曲線は site.css の物語の動きと同じ */ html[data-top-mode="pinned"] .story-door [data-pin] { animation-timing-function: cubic-bezier(.2, .7, .2, 1); animation-fill-mode: both; } /* 現れる部品の基準の姿は「見えない」。WebKit は読み込み直後の 1 フレームだけ timeline が未解決で基準の姿を描くため、そのとき段階 0 以外の部品を出さない（関門の実測） */ html[data-top-mode="pinned"] .story-door :is([data-pin$="-in"], [data-pin="s1-draw"], [data-pin="s2-line"], [data-pin="s2-face"], [data-pin="s2-ring"], [data-pin="s2-shaft"], [data-pin="s3-roads"], [data-pin="s3-grin"], [data-pin="s4-stone"], [data-pin="s4-shadow"]) { opacity: 0; } /* 進み方の範囲（すべての段階で同じ形。【提案】）: 段階 N の節の上端が文の窓の下から上がってくる間に、前の段階の部品が引き（cover 10%〜30%）、 新しい部品が現れ（cover 15%〜40%）、遅れて現れる部品（cover 22〜25%〜45%）は節が窓の中央（cover 50%）に来る前に出そろう。 1 つの範囲は cover の 20% 以上にする（TASK-136 で節を px で短くしたため。幅 1280 で 1 つの動きに送る量が、節が 80svh だったときの 15% の範囲と同じ約 200px になる。 check/top-pinned.mjs の P5〔1 歩 24px で不透明度の差 0.5 以下〕を満たす）。 cover の百分率の分母は節の高さ＋文の窓の高さ（どちらも px）。--pin-stage-min-h を替えたら check/top-pinned.mjs で中央の姿を測り直す */ /* 0 → 1: 靄が引き、鍵穴が薄くなり、点から 2 本の線が伸びる */ html[data-top-mode="pinned"] .story-door [data-pin="s1-out"] { animation-name: pin-out; animation-timeline: --s1; animation-range: cover 10% cover 30%; } html[data-top-mode="pinned"] .story-door [data-pin="s1-faint"] { animation-name: pin-out-half; animation-timeline: --s1; animation-range: cover 10% cover 30%; } html[data-top-mode="pinned"] .story-door [data-pin="s1-in"] { animation-name: fade; animation-timeline: --s1; animation-range: cover 15% cover 35%; } html[data-top-mode="pinned"] .story-door [data-pin="s1-draw"] { animation-name: grow; animation-timeline: --s1; animation-range: cover 20% cover 45%; transform-origin: var(--pin-origin); } /* 1 → 2: 2 本の線が閉じてアーチの線になり、面に替わる。鍵が生まれる（変化 (i)・(ii)） */ html[data-top-mode="pinned"] .story-door [data-pin="s2-out"] { animation-name: pin-out; animation-timeline: --s2; animation-range: cover 10% cover 30%; } html[data-top-mode="pinned"] .story-door [data-pin="s2-line"] { animation-name: pin-pass; animation-timeline: --s2; animation-range: cover 10% cover 40%; } html[data-top-mode="pinned"] .story-door [data-pin="s2-face"] { animation-name: fade; animation-timeline: --s2; animation-range: cover 20% cover 40%; } html[data-top-mode="pinned"] .story-door [data-pin="s2-in"] { animation-name: fade; animation-timeline: --s2; animation-range: cover 20% cover 40%; } html[data-top-mode="pinned"] .story-door [data-pin="s2-ring"] { animation-name: grow; animation-timeline: --s2; animation-range: cover 22% cover 42%; transform-box: fill-box; transform-origin: center; } html[data-top-mode="pinned"] .story-door [data-pin="s2-shaft"] { animation-name: extend; animation-timeline: --s2; animation-range: cover 25% cover 45%; transform-box: fill-box; transform-origin: left center; } /* 2 → 3: 鍵が鍵穴へ寄り、傾いたまま合わない（変化 (iii)）。遅れて図の中の 3 つの道と三日月が現れる */ html[data-top-mode="pinned"] .story-door [data-pin="s3-move"] { animation-name: pin-shift; animation-timeline: --s3; animation-range: cover 10% cover 35%; } html[data-top-mode="pinned"] .story-door [data-pin="s3-tilt"] { animation-name: pin-tilt; animation-timeline: --s3; animation-range: cover 15% cover 38%; transform-origin: var(--pin-origin); } html[data-top-mode="pinned"] .story-door [data-pin="s3-roads"] { animation-name: rise; animation-timeline: --s3; animation-range: cover 25% cover 45%; } html[data-top-mode="pinned"] .story-door [data-pin="s3-grin"] { animation-name: fade; animation-timeline: --s3; animation-range: cover 25% cover 45%; } /* 3 → 4: 道と三日月が引き、鍵が回って合い、光る塗りと左下の影が付く（変化 (iv)） */ html[data-top-mode="pinned"] .story-door [data-pin="s4-out"] { animation-name: pin-out; animation-timeline: --s4; animation-range: cover 10% cover 30%; } html[data-top-mode="pinned"] .story-door [data-pin="s4-move"] { animation-name: pin-shift; animation-timeline: --s4; animation-range: cover 10% cover 35%; } html[data-top-mode="pinned"] .story-door [data-pin="s4-turn"] { animation-name: pin-untilt; animation-timeline: --s4; animation-range: cover 15% cover 40%; transform-origin: var(--pin-origin); } html[data-top-mode="pinned"] .story-door [data-pin="s4-stone"] { animation-name: fade; animation-timeline: --s4; animation-range: cover 22% cover 42%; } html[data-top-mode="pinned"] .story-door [data-pin="s4-shadow"] { animation-name: fade; animation-timeline: --s4; animation-range: cover 25% cover 45%; } /* 4 → 5: 鍵・鍵穴・地面が引き、板が蝶番を軸に開き（変化 (v)。site.css の door-l・door-r・tone・beam）、空・床・光が現れる */ html[data-top-mode="pinned"] .story-door [data-pin="s5-out"] { animation-name: pin-out; animation-timeline: --s5; animation-range: cover 10% cover 30%; } html[data-top-mode="pinned"] .story-door [data-pin="s5-in"] { animation-name: fade; animation-timeline: --s5; animation-range: cover 15% cover 40%; } html[data-top-mode="pinned"] .story-door [data-pin="s5-door-l"] { animation-name: door-l; animation-timeline: --s5; animation-range: cover 15% cover 45%; animation-timing-function: linear; } html[data-top-mode="pinned"] .story-door [data-pin="s5-door-r"] { animation-name: door-r; animation-timeline: --s5; animation-range: cover 15% cover 45%; animation-timing-function: linear; } html[data-top-mode="pinned"] .story-door [data-pin="s5-tone"] { animation-name: tone; animation-timeline: --s5; animation-range: cover 15% cover 45%; animation-timing-function: linear; } html[data-top-mode="pinned"] .story-door [data-pin="beam"] { animation-name: beam; animation-timeline: --s5; animation-range: cover 15% cover 45%; animation-timing-function: linear; transform-origin: var(--pin-origin); } /* 5 → 6: 靄が引き、庭が見える。ブランドカラー（庭の光る円）はここで初めて灯る（TOP-9） */ html[data-top-mode="pinned"] .story-door [data-pin="s6-out"] { animation-name: pin-out; animation-timeline: --s6; animation-range: cover 10% cover 30%; } html[data-top-mode="pinned"] .story-door [data-pin="s6-in"] { animation-name: fade; animation-timeline: --s6; animation-range: cover 15% cover 40%; } /* 視差（MOTION-5・MOTION-6）: transform の縦移動だけ。量は site.css の --par と空の倍率（figures.rs が inline の視差の量の変数で渡す。この変数の宣言は site.css だけ。figures.rs の sky_scale_declared_once）。 段階 0 の靄は段階 0 の節、空と庭は段階 6 の節が画面を通り過ぎる間に動き、節が画面の中央にあるとき 0（MOTION-10 の読み替え。記録に書く） */ html[data-top-mode="pinned"]:not([data-parallax="none"]) .story-door [data-pin="par-s0"] { animation-name: par; animation-timing-function: linear; animation-timeline: --p0; animation-range: cover 0% cover 100%; } html[data-top-mode="pinned"]:not([data-parallax="none"]) .story-door [data-pin="par-s6"] { animation-name: par; animation-timing-function: linear; animation-timeline: --p6; animation-range: cover 0% cover 100%; } /* 幅 760 px 以下: 図を上に固定し、文を下にスクロールする。図の箱は不透明な白（ガラスは GLASS-1 の 4 部品だけなので使わない）で、文は図の下へ潜る */ @media (max-width: 760px) { /* 固定する図の実際の高さ（--pin-fig-h）と、図の帯（図＋上下の余白）の高さ（--pin-band-h）。帯の下だけが文の窓になる。 図の高さは「目標の高さ」「幅の上限 340px の高さ」「列の幅の高さ」の小さい方。100cqi は .story（下の container）の幅で、var() は使う要素（.story の中）で解決する。 帯の高さを目標の高さのまま数えると、幅の上限や列の幅で図が低いとき、timeline の上端とラジオの上の余白が実際の帯より下になる（390×844 で 20.5px・320×800 で 48px。実測） */ html[data-top-mode="pinned"] { --pin-fig-h: min(var(--pin-fig-h-narrow), var(--pin-fig-max-w-narrow) * 200 / 240, 100cqi * 200 / 240); --pin-band-h: calc(var(--pin-fig-h) + 2 * var(--sp-bound)); } html[data-top-mode="pinned"][data-motion="a"] .story { grid-template-columns: minmax(0, 1fr); gap: 0; container-type: inline-size; } /* 物語の timeline の上端を帯の下へずらす。図が変わる位置（cover の百分率）を、画面全体ではなく帯の下の文の窓で数える。 ずらさないと、新しい段階の見出しが帯の下に隠れている間に図が変わる（実測）。窓の高さは広い幅と同じ --pin-window-h（px）を上限にし、 帯の下の残りがそれより高い画面では窓を帯の直下に置いて下を空ける（下端の余りの計算にだけ svh を使う）。視差の --p0・--p6 は 0 のまま */ html[data-top-mode="pinned"] { --pin-text-top: calc(var(--header-h) + var(--header-text-grow) + var(--pin-band-h)); --pin-inset: var(--pin-text-top) max(0px, 100svh - var(--pin-text-top) - var(--pin-window-h)); } html[data-top-mode="pinned"][data-motion="a"] .story-fig { top: calc(var(--header-h) + var(--header-text-grow)); min-height: 0; z-index: 1; background: var(--bg); padding-block: var(--sp-bound); } /* 図の幅は --pin-fig-h から決める（上限は式の中にあるので site.css の .fig の max-width は外す）。240 / 200 は合成図の viewBox の比（site.css の .fig3d の aspect-ratio と同じ。検査は main.rs） */ html[data-top-mode="pinned"][data-motion="a"] .story-door { width: calc(var(--pin-fig-h) * 240 / 200); max-width: none; margin-inline: auto; } /* Tab で止まった操作部品（段階 3 の道のラジオ）が固定の図に隠れないよう、帯の高さぶんを上の余白に足す（html の scroll-padding-top〔固定ヘッダーの分〕に足し合わさる。A11Y-4・WCAG 2.4.11。効き方は check/top-pinned.mjs が測る） */ html[data-top-mode="pinned"][data-motion="a"] .story-text :is(input, a, button) { scroll-margin-top: calc(var(--pin-band-h) + var(--sp-near)); } } } } /* 試作の版だけが使う keyframes（site.css に無い 6 つ）。 pin-out: 見えている部品が消える。pin-out-half: 段階 1 で鍵穴が薄くなる（不透明度で出す。【提案】）。 pin-pass: 一度濃く出て消える（段階 2 のアーチの線）。pin-shift: inline の --pin-from の位置から元の位置へ寄る。 pin-tilt・pin-untilt: inline の --pin-tilt だけ傾け、次の段階で戻す（入れ子の g で足し合わせる。figures.rs の story_door） */ @keyframes pin-out { to { opacity: 0; } } @keyframes pin-out-half { to { opacity: .5; } } @keyframes pin-pass { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } @keyframes pin-shift { from { transform: var(--pin-from); } to { transform: none; } } @keyframes pin-tilt { from { transform: rotate(0deg); } to { transform: rotate(var(--pin-tilt)); } } @keyframes pin-untilt { from { transform: rotate(0deg); } to { transform: rotate(calc(-1 * var(--pin-tilt))); } }