/* ========================================
   Scroll Reveal — CSS Scroll-Driven Animations（サイト共通）
   ========================================
   スクロールに応じてコンテンツを下・左・右から出現させる。
   方式: animation-timeline: view()（JS 不要・合成スレッド駆動・CLS なし）
   対応: Chrome/Edge 115+, Safari 26+。Firefox は Interop 2026 対象（フラグ内）
   → 非対応ブラウザは @supports で静的表示にフォールバック（Progressive Enhancement）
   参考: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
         https://webstatus.dev/features/scroll-driven-animations
   注意: keyframes の to では transform を指定しない（基底値へ補間させることで
   Tailwind の hover:-translate-y-1 等の transform をアニメ終了後に奪わないため） */

@supports (animation-timeline: view()) {
  /* 横方向 reveal の出現途中のはみ出しを遮断（clip はスクロールコンテナを作らない） */
  html {
    overflow-x: clip;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    animation-timeline: view();
    /* 要素が下端に触れてからビューポートの 40% を覆うまで連動（要素サイズ非依存で
       スクロール追従の体感が安定する推奨パターン。2026-08 リサーチ:
       css-scroll-driven.com / sikora.software / shopiflame.com） */
    animation-range: entry 0% cover 40%;
  }

  .reveal-up {
    animation-name: reveal-up-in;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }

  .reveal-left {
    animation-name: reveal-left-in;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }

  .reveal-right {
    animation-name: reveal-right-in;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }

  .reveal-scale {
    animation-name: reveal-scale-in;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }

  @keyframes reveal-up-in {
    from {
      opacity: 0;
      transform: translateY(48px);
    }

    to {
      opacity: 1;
    }
  }

  @keyframes reveal-left-in {
    from {
      opacity: 0;
      transform: translateX(-64px);
    }

    to {
      opacity: 1;
    }
  }

  @keyframes reveal-right-in {
    from {
      opacity: 0;
      transform: translateX(64px);
    }

    to {
      opacity: 1;
    }
  }

  @keyframes reveal-scale-in {
    from {
      opacity: 0;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
    }
  }
}

/* prefers-reduced-motion 分岐を置かない:
   Windows の「アニメーション効果」OFF 環境では Chrome が reduce を報告し、
   全エフェクトが常時表示化する実害を実測（2026-08-30・SPI_GETCLIENTAREAANIMATION=False）。
   cerahd.jp top-init.ts H11（2026-08-30）と同判断 */