# 割れて開く — Style Reference
> 黒い倉庫の扉2枚に「開場」の二字が一字ずつ載り、スクロールで扉が左右に割れて、奥へ続くアーチの通路が琥珀色の光ごと近づいてくる。

**Theme:** dark  **Series:** PARTS 067  **World:** 古い倉庫を使った劇場の夜の部。入口の扉を開けると、客席まで続く通路がある。

## Concept
画面そのものを2枚の扉として扱い、割れ目を画面中央に置く。字は扉に載っているので、扉と一緒に左右へ離れていく。奥の通路は5層のアーチで組み、手前の層ほど大きく拡大して近づく(視差)。読み込み直後は進み具合 30% の位置に止め、扉が半分ほど開いて奥の光と見出しが見える状態を静止画にする。

## Signature Technique
DOM + CSS 3D transform + インライン SVG。スクロールで値を書き換えるだけで、常時ループはしない。

- **扉**: `.door.l` `.door.r` は幅 50.2%(継ぎ目の隙間防止)。開き具合 `o = easeInOutSine(p / 0.62)`。
  `left: translateX(-o×100%) rotateY(o×14deg)`、`right: translateX(o×100%) rotateY(-o×14deg)`。舞台に `perspective: 1200px` を置くので、開くほど扉が台形に見える。
- **扉の面**: --door → --door2 の横グラデーションに、7vw 間隔の細い縦筋(白 1.8%)と上下端の影を重ねる。
- **割れ目の光漏れ**: 各扉の継ぎ目側に `::before`(幅 38%、琥珀 .55 → 18% で .12 → 0 の線形グラデーション)。不透明度 `--leak = min(o×6,1) × (1 - 0.6o)`。開き始めが一番明るい。継ぎ目には 2px のブロンズの縁 `::after`(中央だけ #e9b071 に明るくする)。
- **字の分割**: 同じ「開場」を両方の扉に `width:100vw` で置き、左扉は `left:0`、右扉は `right:0` で配置する。扉の `overflow:hidden` が字を継ぎ目で切る。
- **通路**: SVG 5枚(viewBox 1000×1000、`slice`)。各層は画面全体の矩形からアーチ形を `fill-rule="evenodd"` で抜いた面。奥ほど穴が小さく暗い色で塗り、最奥の放射グラデーション(#ffd79a → #e38c3c 22% → #5a2f12 52% → #160f0a 80%)が穴越しに見える。各アーチの縁に #ffcf8f の細線(奥ほど濃く太さは手前ほど太い)。
  層の拡大率 `scale = 1 + p × k`、k = 0.25 / 0.5 / 0.9 / 1.5 / 2.4(奥→手前)。`transform-origin: 50% 60%`(消失点)。
- **奥の見出し**: 不透明度 0.55 → 1(p 0.55〜0.85)、拡大 0.86 + 0.2p。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --void | #0d0b09 | ページ地 |
| --door | #1a1611 | 扉(外側) |
| --door2 | #231d16 | 扉(継ぎ目側) |
| --bronze | #b0773a | 継ぎ目の縁、レール |
| --amber | #ffb45e | 光漏れ、床の霞 |
| glow | #ffd79a | 通路の最奥(放射グラデーションの中心) |
| ember | #e38c3c / #5a2f12 | 放射グラデーションの中間 |
| hall-edge | #160f0a | 放射グラデーションの外周、扉の先の区画の地 |
| --glow | #ffe2b0 | 予備(CSS 変数のみ) |
| arch-1〜5 | #7a4019 / #56290f / #3a1c0b / #251208 / #150b06 | アーチ面(最奥→最手前) |
| arch-line | #ffcf8f | アーチの縁の細線 |
| seam | #e9b071 | 継ぎ目の縁の中央 |
| handle | #6d4520 / #d39a5c / #7a4d24 | 取っ手の金属グラデーション |
| --bone | #f4eee4 | 字、施設名 |
| word | #fbf3e6 → #c99a64 | 扉の字のグラデーション |
| inside | #fff6e8 / #ffe6c4 | 奥の見出し / 奥の施設名 |
| --mute | #9a8f80 | 注記と説明文とタグ |

## Typography
- 扉の字: Shippori Mincho B1 800、clamp(120px, 27vw, 400px)、字間 0.04em。#fbf3e6 → #c99a64 の縦グラデーションを `background-clip: text`。
- 奥の見出し: Shippori Mincho B1 800、clamp(26px, 3.4vw, 48px)、行間 1.3、字間 0.02em。明るい奥の光の上でも読めるよう、暗い茶の text-shadow を2重に。下の施設名は Zen Kaku Gothic New 500 14px、字間 0.08em。
- 施設名(扉の上): Zen Kaku Gothic New 12px、字間 0.12em(太字部分 500、0.06em)。760px 未満は 11px、0.06em。
- 説明文: 300 14px、行間 1.8、16em まで。タグ: 11px、字間 0.1em。英字ラベル: IBM Plex Mono 400。
- 扉の先の1行: Shippori Mincho B1 500、clamp(20px, 2.2vw, 30px)、行間 1.6。

## Spacing & Layout
- 左右余白 clamp(16px, 4vw, 56px)。扉の上下にレール(上 64px、下 78px、ブロンズ 50%)。施設名は上 22px、説明文は下 98px(いずれも +safe-area)。
- 扉の字は縦中央から −54% ずらして置く。
- 扉の先の区画: padding 上 clamp(90px, 16vh, 160px)・下 130px。
- 取っ手は継ぎ目から clamp(18px, 2.4vw, 36px)、高さ min(22vh, 180px)。
- 760px 未満: 扉の説明文を隠し、字と取っ手と施設名だけ残す。施設名は継ぎ目側(14px)へ寄せ、右扉は 6em で折り返す。「/ 夜の部」を隠し、奥の見出しを3行に組む。タグは縦積み。

## Motion
- スクロール連動のみ。区間 340vh、舞台は sticky。
- 扉: 0〜62% で easeInOutSine。通路: 全区間で線形に拡大。
- reduced-motion: 扉の傾きを 0 に、通路の拡大を 0.3 倍に抑える。開く動作は残す(スクロールに従うため)。

## Components
- **door**: レール2本と施設名、割れる字、説明文、取っ手を載せる。
- **hall**: 放射グラデーションの地 + アーチ SVG 5層 + 床の霞。
- **inside**: 奥の見出しと施設名。
- **after**: 扉の先の1行。
- **tag**: 操作説明と `VALE / PARTS 067 / 割れて開く`。

## Do / Don't
Do
- 割れ目を必ず画面中央に置き、字を割れ目で分ける。
- 開き始めの光漏れを一番明るくする。
- 奥の層は手前ほど速く近づける。

Don't
- 扉を単純な左右スライドだけにしない(奥行きの傾きで重さを出す)。
- 奥の見出しを暗い茶で書かない(光の上で沈む)。
- 扉にボタンやリンクを置かない。

## References
- **Mesh**: 黒い紙面の下から琥珀の光がにじむ配色と、細いブロンズの罫。扉のレールと継ぎ目の縁に使った。
- **Vana**: 暗い面の奥に電気的な青の地形を描く奥行きの考え方。青を琥珀に変え、星図をアーチの通路に置き換えた。

## Usage
1. HTML: `.scroller > .stage` に `.hall`(SVG 5枚)、`.inside`、`.haze`、`.door.l`、`.door.r` の順に置く。
2. CSS: `.stage{position:sticky;perspective:1200px}`、`.door` 一式、`.word` を移す。
3. JS: IIFE をそのまま移す。アーチの数や大きさは `arches.forEach` 内の `w` `h` `by` と `tones` で変える。拡大率は各 SVG の `data-k`。
4. パラメータ(`P`): `OPEN_END` 扉が開き切る進み具合 / `SWING` 扉の傾き(度) / `START` 読み込み時の進み具合 / `TEXT_IN` 奥の見出しが明るくなる区間。
5. 奥を写真にする場合は `.hall` の背景を画像にし、SVG の層は外してよい。