# 傾くカード — Style Reference
> 黒い舞台に浮いた一枚の会員証。カーソルに合わせて 3D に傾き、ハイライトと虹の細い反射が面の上を走る。

**Theme:** dark  **Series:** PARTS 056  **World:** 都内の映画館を束ねる会員制。一枚の黒いカードが入場券。

## Concept
カードを置く区画のパーツ。主役は `perspective` + `rotateX/Y` で傾くカードと、傾きに連動して位置が変わる白いハイライトと虹の細い反射と影。
カードは CSS だけで描き(ブラシ加工の面・チップ・等幅の番号)、JS は傾きと光の位置を更新するだけ。無操作が 2 秒続くと自動でゆっくり傾き、静止画でも立体に見える。

## Signature Technique
CSS 3D transform + CSS 変数。外部ライブラリなし。

- 入力: カーソル位置をカード中心に対して -1〜1 に正規化(`(cx - cx0) / (width·.8)`、カードの外でも緩く反応)。`st.x/y` は lerp .1 で追従。
- 傾き: `rotateX(-y·MAX) rotateY(x·MAX) scale(1 + (SCALE-1)·hover)`、MAX 18deg、SCALE 1.03、`perspective: 900px` は親(.stage)に置く。
- ハイライト(::before): `radial-gradient(42% 60% at --gx --gy, white .26 → .05 at 45% → 0 at 72%)`、`--gx = 50 + 40x %`、`--gy = 50 + 40y %`、`mix-blend-mode: screen`。
- 虹の反射(::after): 角度 `--sa = 110 + 30x - 20y deg` の linear-gradient、透明 43% → 薄紅 (255,128,150,.48) 46% → 淡金 (255,214,150,.42) 48.5% → 薄緑 (130,240,205,.46) 50.5% → 薄青 (120,165,255,.5) 53% → 透明 57%。原色の RGB を避け、真珠の干渉色に寄せる。`background-size 200%`、位置 `--sp = 50 + 60x + 30y %`、`blur(4px)`、不透明度 `--sheen = .3 + .6·|(x,y)|`。
- 影: `box-shadow: (-26x)px (28 - 16y)px 70px -24px rgba(0,0,0,.9)` に内側 1px の白 6%。傾きと逆に動く。
- 面: `repeating-linear-gradient(100deg, 白 3.5% 0 1px, 透明 1px 3px)`(ブラシ目)+ `linear-gradient(115deg, #2C2E33, #17181B 45%, #25272C)`。角丸 18px、比率 1.586(ISO 7810)。
- 自動: `idle > 2s` で `x = .85·sin(.6t)`、`y = .68·sin(.42t + 1.1)`。hover の目標は内側 1 / 外側 .35 / 自動 .6。
- カードの `rect` はリサイズと再開時に取り直す。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --void | #0F1012 | 地 |
| card-light | #2C2E33 | カードの明部 |
| card-dark | #17181B | カードの暗部 |
| chip | #D9D4C7→#8F8A7D | チップ |
| num | #D7D9DE | 番号 |
| --bone | #FFFDF9 | 見出し・ロゴ・CTA 枠 |
| lead | #C9CBD0 | 本文 |
| --fog | #8A8D94 | ラベル・フッター |
| --signal | #DA291C | カードの赤い点とフォーカスリングだけ |
| prism | 薄紅 (255,128,150) / 淡金 (255,214,150) / 薄緑 (130,240,205) / 薄青 (120,165,255) alpha .42〜.5 | 虹の反射(真珠の干渉色) |

## Typography
- 見出し: Noto Sans JP 300、`clamp(34px, 4.8vw, 68px)`、line-height 1.22、letter-spacing .02em、`<br>` で2行固定。
- 本文: Noto Sans JP 300、`clamp(14px, 1.1vw, 17px)`、line-height 1.9、最大 30em。
- ラベル・ボタン(.mono): IBM Plex Mono 400/500、12px(mobile 11px)、letter-spacing .12〜.14em、大文字。
- カード: ロゴ 500 / letter-spacing .3em、番号 IBM Plex Mono `clamp(13px, 2.6vw, 17px)` / .18em、年 11px / .14em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。中段は 2 カラム(本文 / カード)、gap `clamp(24px, 5vw, 80px)`。
- カード幅 `min(100%, 460px)`(mobile 380px)。本文は最大幅 560px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- breakpoint 860px: 1 カラムでカードを上に。640px: 見出し `clamp(28px, 7.8vw, 38px)`、フッター2行積み。

## Motion
- 追従 lerp .1(約 0.3 秒で収まる)。hover の拡大は lerp .08。
- 自動の傾きは 10 秒前後で一巡。操作すると即止まり、2 秒後に再開。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: (x,y) = (.45,-.3) で傾いた静止状態を1回だけ適用。
- WebGL を使わないためフォールバック不要。

## Components
- hero: 全画面。上に社名と分類、左に eyebrow / h1 / lead / CTA、右にカード。
- card(.card): 比率 1.586、角丸 18px、ブラシ面、左上ロゴ、右上の赤い点、中央左のチップ、下段に番号と年。
- button(.cta): 高さ46px、角丸なし、骨色の 1px 枠に透明の地、等幅の大文字。hover で骨色の地に黒文字。focus-visible は赤のリング。
- footer(.bot): 等幅、左に操作説明、右に `VALE / PARTS 056 / 傾くカード`。

## Do / Don't
- Do: 虹の反射は細く(帯幅 14%)。広いとホログラムのおもちゃに見える。
- Do: 影を傾きと逆に動かす。これで浮いて見える。
- Do: perspective は親に置く。カード自身に置くと歪みが変わる。
- Don't: 傾きを 20deg 以上にしない。カードが薄い板に見えなくなる。
- Don't: 赤を増やさない。点1つとフォーカスだけ。
- Don't: カードに写真を貼らない。CSS の面だけで質感を出す。

## References
- Vivid+Co: 黒曜石の面を通る RGB 分光という表現を抽象化。分光をカード上の細い反射に縮め、文字は骨色1色の軽いウェイトに。
- Ferrari: 黒の面に白の大文字トラッキング、赤1点、角のない四角いボタンという構成を抽象化。写真は使わずカードそのものを置いた。

## Usage
1. `.stage` と `.card`(中の `.face` ごと)、`<script>` ブロックを切り出す。CSS の `.stage` `.card` とその疑似要素も一緒に。
2. `.stage` に `perspective` があること。カードを複数置くなら `card` を配列にして `rect` を各自で持つ。
3. パラメータは JS 冒頭の `P`:
   - `MAX` 最大の傾き(deg)、`SCALE` hover の拡大
   - `LERP` 追従の滑らかさ
   - `AUTO_IDLE` 自動で傾き始めるまでの秒数、`AUTO_AMP` 自動の大きさ
   - `GLARE` ハイライトの動く量
4. 色は `.card` の `background` の2つの gradient、虹は `::after` の4色。
5. 内容(ロゴ・番号)は `.face` の HTML を差し替える。`transform: translateZ(1px)` は残す(光の疑似要素より手前に出すため)。