# 森の赤 — Style Reference
> 霧の針葉樹林に、ランタンの光だけが届く。赤い頭巾ひとつが唯一の彩度。

**Theme:** dark  **Series:** FABLE 001  **World:** 赤ずきん(グリム)。夜の針葉樹林にランタンを持って入る。狼の気配がある。

## Concept
ページ全体が夜の森。画面は黒に近い灰色の霧で満ち、カーソル(スマホでは指先)がランタンになる。照らした範囲だけ木立と文章が浮かぶ。下へスクロールすると森が深くなり(霧密度と木の密度が上がる)、最後に霧の奥で狼の目が二点光る。
主役はレイマーチングで描く霧とランタンの散乱光。文章はその光に照らされて読める、という関係にしてある。赤い頭巾は布シミュレーションでランタンの後ろにぶら下がり、画面上で唯一の彩度を持つ。

## Signature Technique
全画面 fragment shader(WebGL1、1枚の三角形)で霧+木立+地面をレイマーチする。
- 解像度: 表示サイズ × 0.5(PC) / × 0.42(スマホ)。CSSで拡大。霧が主体なのでぼけは目立たない。
- ステップ数: 52(PC) / 34(スマホ)。`dt = clamp(d*0.85, 0.035, 0.13 + t*0.085)`、透過率 `T < 0.02` か `t > 70` で打ち切り。
- 木立SDF: セルサイズ 2.7 の格子を 2×2 近傍で評価。セルごとに hash で有無(密度は z が奥に行くほど 0.42→0.97)・ジッタ・半径(0.22〜0.40、上に行くほど細い)を決める。`c.x == 0` の列は道として木を置かない。
- 霧密度: `base = mix(0.085, 0.25, scroll)` に樹皮テクスチャの G チャンネルを 3D ノイズ代わりに掛け(`p.xz*0.06 + time*0.011`)、地面に近いほど濃くする。
- ボリューメトリック: 各ステップで `a = 1 - exp(-sigma*dt)`、`col += T*a*(lantern + ambient)`、`T *= 1-a`。ambient は (0.030, 0.034, 0.044)、霧を抜けた先の地は (0.024, 0.027, 0.034)。奥のセクションでも画面が黒に沈まない最低輝度。ランタンは点光源 `LCOL * uInt/(0.55 + d²)` に Henyey-Greenstein 位相(g=0.38)を掛ける。
- 表面: 法線は中心差分。拡散 + ランタン方向へ7ステップのソフトシャドウ。樹皮テクスチャ(256px、data URI で埋め込み)を幹は円柱座標、地面は xz で参照。
- 狼の目: 目位置はカメラ基準 `(±0.12 + 0.95, 1.22, camZ - 8.5)`。scroll 0.72→0.88 で現れ、2.8〜6.3秒間隔で0.14秒閉じる。SDF の発光球 + 霧への赤い散乱を足す。
- ランタンの3D位置: スクリーン座標 → 視線ベクトル × 2.3。カメラは `(0, 1.5, -scroll*44)`。
- 布: 19×29(スマホ 15×22)の Verlet 格子、構造+せん断拘束、6反復。上辺をランタン直下にピン。風 = ランタン速度の逆方向(±0.9 px/frame にクランプ)+ 低周波の揺れ。2D canvas で四角形ごとに描画し、面積比(折れ)とランタンからの距離で明るさを決める。外周の格子点を中点経由の二次曲線で結んだ輪郭でクリップし、縁のギザギザを消す。輪郭に 1px の暗い縁取り。ランタンは鉄枠+ガラス+炎の形で描く。
- 文章: `.lit` 要素に `mask-image: radial-gradient(circle at --mx --my, #000 0, #000 150px, rgba(0,0,0,.3) 440px, rgba(0,0,0,.2))`。毎フレーム各ブロックの相対座標を CSS 変数に書く。
- 待機: ポインタが1.8秒止まる(またはタッチ無し)と、画面中央に最も近い文章ブロックへランタンが寄る。PC はブロック幅の 72%・高さの 40% の位置。幅 640px 未満はブロックの下 34px(画面下から 170px より上)に立たせ、布が見出しと本文を覆わないようにする。初回フレームから待機点に置く。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --ink | #07080A | ページ地、霧の背後 |
| --text | #E8E2D6 | 見出し・本文(ランタンに照らされた骨色) |
| --mute | #7A756D | ラベルとヒントとフッター |
| --line | rgba(232,226,214,.16) | ラベル前の短い罫、フッター罫 |
| --red | #B5121B | 赤い頭巾、CTA 塗り。画面で唯一の彩度 |
| --red-deep | #4A0409 | 頭巾の影側 |
| --lantern | #FFE7C2 | ランタン芯、focus ring |
| fog(シェーダー) | rgb(255,230,194)×散乱 | 霧のハロ。彩度は低く保つ |
| eyes(シェーダー) | (1.0,0.10,0.06) | 狼の目 |

## Typography
- 見出し: Shippori Mincho 500。h1 `clamp(84px,16vw,220px)` 行間1 字間.04em。h2 `clamp(34px,5vw,64px)` 行間1.25。
- 本文: Zen Kaku Gothic New 300。`clamp(16px,1.4vw,20px)` 行間1.9、最大34字。
- ラベル: JetBrains Mono 400 11px、字間.14em、英数は大文字。日本語ラベルは字間.12em で大文字化しない。
- スマホ: h1 `clamp(72px,24vw,120px)`、h2 `clamp(30px,8.6vw,40px)`、本文 15px。

## Spacing & Layout
- 各セクション `min-height:100svh`。縦中央揃えで左寄せ。内側余白 `12vh 7vw`(スマホ `14vh 20px 10vh`)。
- 文章ブロック最大幅 760px。1画面に見出し1本+短文1文。
- ヘッダー/フッター/ヒントは 28px(スマホ 20px)の固定余白。
- breakpoints: 640px 以下でスマホ値。ランタンのマスク半径 150/440px → 96/280px。

## Motion
- RAF 1本。霧の時間、ランタンの追従(ポインタ中 0.18、待機 0.09 の線形補間)、布、マスク座標を同じフレームで更新。
- タブ非表示で停止、復帰で再開。リサイズで両 canvas を取り直す。
- スクロールは霧密度・カメラ前進・木の密度・狼の目に連動。スクロール演出はこれだけ。
- `prefers-reduced-motion`: 霧の時間を固定、瞬きを止め、ランタンは即座に文章へ寄る。描画はスクロールかランタン移動があった時だけ。布はカーソルを動かした時だけ動く。
- WebGL 不可: canvas を隠し、暗い放射グラデーション地にして文章のマスクを外す。左下に一行で案内。

## Components
- hero: ラベル(赤ずきん — 夜の針葉樹林)+ h1「森の赤」+ 一文。ランタンは待機時に「赤」の字の上に止まる。
- section: 番号ラベル(01 — 入口 … 05 — 選ぶ)+ h2 + 一文。締めの h2 は「森に入るかどうかは、/ここで決める。」と読点で改行を固定。すべて `.lit` でランタンに照らされる。
- button: 赤塗り、角丸 2px、`16px 26px`、白文字 14px 字間.14em、右に 22px の罫。hover で少し明るく 1px 浮く。focus-visible はランタン色 2px の outline。マスクの外に置き、常に見える。
- footer: 上罫1本、`VALE / FABLE 001` と `Red Riding Hood — Grimm` を両端に。
- hint: 左下に操作説明一行。カーソルが動くか 8% スクロールしたら消える。タッチ端末は「指先がランタン」。

## Do / Don't
Do
- 彩度は赤い頭巾と CTA だけに限る。ランタンの光は温かいが彩度を上げない。
- 文章はランタンの外では 20〜30% の濃さに落とし、照らされて読める関係を守る。
- 霧は静かにゆっくり。速度は `time*0.011` 程度。
- 怖さは狼の目二点と文章の示唆だけで出す。
Don't
- 紫や青のグラデーション、浮遊する図形、グリッド線を足さない。
- 木や狼の絵を画像で置かない。木立はSDF、目は発光球。
- 文章を増やさない。1画面に見出し1本+一文。
- ランタンを複数置かない。光源は1つ。

## References
- Foundry: 黒地に巨大な表示文字を1つ置き、UIはモノスペースの小さなラベルと細い罫だけ、という骨格を抽象化した。オレンジ1色のアクセントは赤1色に置き換え、表示文字は欧文グロテスクから Shippori Mincho の漢字3文字にした。
- Dollar Shave Club: 暗い地に単一の行動色を塗りボタンだけに使う、という配色の役割分担を抽象化した。紺地と遊びのある装飾形は捨て、地を霧のレイマーチに、行動色を赤に置き換えた。