パララックスParallax

「パララックス（Parallax）」を実装してください。

## これは何か
スクロールに合わせて、背景と前景を違う速さで動かす演出。奥行きがあるように見せる。

## 使いどころ
- ブランドサイトなど、印象を残すことが目的のとき
- 長い1枚もののページで、区切りに変化を付けたいとき

## 実装の要件
- transform: translateY を animation-timeline: view() で動かし、JavaScript でスクロールを監視しない（Chrome・Edge は 115 から、Safari は 26 から。Firefox は安定版では既定で無効）
- animation と animation-timeline はどちらも @supports (animation-timeline: view()) の中に書き、animation-timeline は animation の一括指定より後に置く（一括指定が animation-timeline を auto に戻す）。未対応のブラウザでは動かさない
- はみ出しを切る祖先は overflow: clip にする。hidden だとその要素がスクロールの基準になって動かない。html と body の両方に overflow-x: hidden があると body が基準になる
- @media (prefers-reduced-motion: reduce) で無効にする
- 読む速度を邪魔する。文章が主役のページでは使わない
- 動きに酔う人がいる。prefers-reduced-motion のときは止める
- JavaScript でスクロールを監視して動かすと、スクロールのたびに処理が走り、古い端末では重い

## アクセシビリティの要件
- prefers-reduced-motion: reduce のときは動きを止める。これは必須
- 動きに情報を載せない。止めたときに内容が欠けないようにする
- 文字の上を背景が流れる形にしない。読んでいる最中にコントラストが変わる

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-parallax">
  <div class="x-parallax__back" aria-hidden="true"></div>
  <div class="x-parallax__front">前景は普通に流れる</div>
  <p class="x-parallax__n">背景だけがゆっくり動く</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-parallax,
.x-parallax *:not([class*="fa-"]),
.x-parallax *:not([class*="fa-"])::before,
.x-parallax *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-parallax {
  position: relative;
  width: 214px;
  height: 108px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  overflow: clip;
}
.x-parallax__back {
  position: absolute;
  inset: -12px 0 auto 0;
  height: 74px;
  background: #1b2028;
}
.x-parallax__front {
  position: absolute;
  top: 26px;
  left: 14px;
  right: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff;
  font-size: 11.5px;
}
.x-parallax__n {
  position: absolute;
  bottom: 9px;
  left: 14px;
  margin: 0;
  font-size: 10.5px;
  color: #606a7b;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。