/* スクロール連動アニメーションは、ブラウザサポート & アニメーション許可設定の両方を満たす場合のみ適用 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

/* ===========================
  heroセクション
=========================== */
    .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);
      }
    }


/* ===========================
  worksセクション
=========================== */
    /* セクションタイトルのアニメーション */
     /* both でアニメーション開始前も from の状態を適用 */
    /* .section-title__main {
      animation: scroll-fadeInFromX ease-out both;
      animation-timeline: view();
      animation-range: contain 0% contain 40%;
      animation-duration: auto;
    }

    .section-works::after {
      animation: scroll-fadeUpFromXY ease-out both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
      animation-duration: auto;
    }

    .section-works .description,
    .section-works .btn {
      animation: scroll-fadeInFromY ease-out both;
      animation-timeline: view();
      animation-range: contain 0% contain 40%;
      animation-duration: auto;
    } */

    .section-works .works-list {
      animation: moveClip linear both;
      animation-timeline: view();
      animation-range: cover -10% cover 30%;
      animation-duration: auto;
    }

    @keyframes scroll-fadeInFromX {
      0% {
        opacity: 0;
        translate: 4rem 0;
        letter-spacing: 0.2em;
      }
      100% {
        opacity: 1;
        translate: 0 0;
        letter-spacing: normal;
      }
    }

    @keyframes scroll-fadeInFromY {
      0% {
        opacity: 0;
        translate: 0 4rem;
        letter-spacing: 0.2em;
      }
      100% {
        opacity: 1;
        translate: 0 0;
        letter-spacing: normal;
      }
    }


    @keyframes scroll-fadeUpFromXY {
      0% {
        opacity: 0;
        translate: 4rem 6rem;
      }
      100% {
        opacity: 1;
        translate: 0 0;
      }
    }

    @keyframes scroll-fadeDownFromXY {
      0% {
        opacity: 0;
        translate: -4rem -6rem;

      }
      100% {
        opacity: 1;
                translate: 0 0;
      }
    }

    @keyframes moveClip {
      0% {
        clip-path: polygon(38% 20%, 70% 20%, 62% 80%, 30% 80%);
        translate: 0 5rem;
      }
      100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

        translate: 0 0;
      }
    }






  }
}