/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   空飛ぶいちご東京のトップ (#604)
   スクロールに合わせた小さな動き。見た目は Tailwind のクラスで書き、ここには動きだけを置く。
   スクロール連動のアニメーション (animation-timeline) に対応しないブラウザでは動かず、そのまま見える。
   動きを減らす設定の人には動かさない。動かすのは transform と opacity だけ (並びはずれない)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 文: 画面の下から入ってくるあいだに、少し下から浮かび上がる */
    .ft-reveal {
      animation: ft-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes ft-reveal {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* 写真: 枠の中で少し大きいところから、画面の真ん中に来るまでに落ち着く (枠は動かない) */
    .ft-zoom {
      animation: ft-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    @keyframes ft-zoom {
      from {
        transform: scale(1.12);
      }
      to {
        transform: none;
      }
    }
  }
}