スクロールに連動して動かす

/* スクロール量そのものをアニメの時間軸にする（JSなし）*/

/* ① ページ全体のスクロール進捗バー */
.progress {
  transform-origin: 0 50%;
  animation: grow linear both;
  animation-timeline: scroll(nearest);   /* ← 時間ではなくスクロール位置で進む */
}
@keyframes grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ② 要素が画面に出入りする間だけ動かす（パララックス）*/
.hero img {
  animation: rise linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 60%;
}
@keyframes rise {
  from { transform: scale(1.12) translateY(10px) }
  to   { transform: scale(1)     translateY(0)   }
}

/* 未対応ブラウザ（2026-08時点の Firefox）では上のブロックごと無視される。
   「動かないだけで壊れない」形に保つのがコツ。明示するならこう書く： */
@supports not (animation-timeline: scroll()) {
  .progress { transform: scaleX(1) }   /* 静止した見た目を用意しておく */
}

@media (prefers-reduced-motion: reduce) {
  .progress, .hero img { animation: none }
}