/* スクロール連動アニメーションは、ブラウザサポート & アニメーション許可設定の両方を満たす場合のみ適用 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* インジケーター（プログレスバー）のスタイル */
    .progress-bar__gauge {
      animation: scroll-progress linear;
      animation-timeline: scroll();
    }
    @keyframes scroll-progress {
      to {
        width: 100%;
      }
    }

    /* ヒーローエリア */
    .hero {
      view-timeline: --hero-view; /* 親要素でビュータイムラインを定義 */
    }
    .fixed-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      animation: hero-fadeblur linear;
      animation-timeline: --hero-view; /* 親のタイムラインを参照 */
      animation-range: exit; /* スクロールで画面外に出ていく時に動作 */
    }
    .hero__content {
      animation: hero-fadeOut linear;
      animation-timeline: --hero-view; /* 親のタイムラインを参照 */
      animation-range: exit; /* スクロールで画面外に出ていく時に動作 */
    }
    @keyframes hero-fadeOut {
      to {
        scale: 0.5;
        opacity: 0;
        filter: blur(16px);
      }
    }
    @keyframes hero-fadeblur {
      to {
        backdrop-filter: blur(24px) grayscale(1) sepia(0.5) brightness(0.8);
      }
    }

    .scroll-hint-wrapper {
      animation: scroll-fadeOut linear;
      animation-timeline: --hero-view; /* 親のタイムラインを参照 */
      animation-range: exit; /* スクロールで画面外に出ていく時に動作 */
    }
    @keyframes scroll-fadeOut {
      to {
        translate: 0 -10svh;
        opacity: 0;
      }
    }

    /* セクションタイトルのアニメーション */
    .section-title__main {
      animation: scroll-fadeInFromX ease-out both; /* both でアニメーション開始前も from の状態を適用 */
      animation-timeline: view();
      animation-range: cover 0% cover 40%;
    }
    .section-title__sub {
      animation: scroll-fadeInFromTop ease-out both;
      animation-timeline: view();
      animation-range: cover 0% cover 40%;
    }
    .section-content {
      animation: scroll-fadeInFromBottom ease-out both;
      animation-timeline: view();
      animation-range: cover 0% cover 40%;
    }
    @keyframes scroll-fadeInFromTop {
      0% {
        opacity: 0;
        translate: 0 -4rem;
      }
      100% {
        opacity: 1;
        translate: 0 0;
      }
    }
    @keyframes scroll-fadeInFromBottom {
      0% {
        opacity: 0;
        translate: 0 4rem;
      }
      100% {
        opacity: 1;
        translate: 0 0;
      }
    }
    @keyframes scroll-fadeInFromX {
      0% {
        opacity: 0;
        translate: 4rem 0;
        letter-spacing: 0.2em;
      }
      100% {
        opacity: 1;
        translate: 0 0;
        letter-spacing: normal;
      }
    }

    /* 画像のパララックス */
    .has-parallax {
      overflow: hidden; /* パララックス用に子要素のはみ出しを隠す */
      view-timeline: --media-parallax; /* 親要素でビュータイムラインを定義 */
    }
    .has-parallax > img {
      height: 140%; /* 動く分の余白を確保 */
      margin-top: -20%; /* 中央に配置 */
      animation: parallax-y linear both;
      animation-timeline: --media-parallax; /* 親のタイムラインを参照 */
      animation-range: cover 0% cover 100%;
    }

    @keyframes parallax-y {
      0% {
        translate: 0 -20%; /* 上方向に20%ずらした状態から */
      }
      100% {
        translate: 0 20%; /* 下方向に20%ずらして終了 */
      }
    }

    /* アイテムカードアニメーション */
    .item__media {
      animation: moveClip linear both;
      animation-timeline: view();
      animation-range: cover -10% cover 30%;
    }
    @keyframes moveClip {
      0% {
        clip-path: polygon(38% 20%, 70% 20%, 62% 80%, 30% 80%);
        translate: 0 5rem;
      }
      100% {
        clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
        translate: 0 0;
      }
    }
    .item:nth-child(2) > .item__media {
      animation-range: cover -5% cover 35%;
    }
    .item:nth-child(3) > .item__media {
      animation-range: cover 0% cover 40%;
    }
  }
}
