/* ========================================
   Scroll Reveal Animation
   ======================================== */

/* --- 初期状態（非表示） --- */

/* フェードアップ＋ブラー：霧の中から浮かび上がる */
.js-reveal {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

/* 左から霧が晴れるように */
.js-reveal--left {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(8px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 右から霧が晴れるように */
.js-reveal--right {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(8px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ズームインしながら透けて出てくる */
.js-reveal--scale {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(10px);
  transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 見出し：すっと現れる軽めのエフェクト */
.js-reveal--heading {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- アクティブ状態（表示） --- */
.js-reveal.is-visible,
.js-reveal--left.is-visible,
.js-reveal--right.is-visible,
.js-reveal--scale.is-visible,
.js-reveal--heading.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

/* --- ディレイ用ユーティリティ --- */
.js-delay-1 { transition-delay: 0.1s !important; }
.js-delay-2 { transition-delay: 0.2s !important; }
.js-delay-3 { transition-delay: 0.3s !important; }
.js-delay-4 { transition-delay: 0.4s !important; }
.js-delay-5 { transition-delay: 0.5s !important; }
.js-delay-6 { transition-delay: 0.6s !important; }

/* --- Instagram ランダム表示 --- */
.js-insta-item {
  opacity: 0;
  transform: scale(0.88) translateY(12px);
  filter: blur(8px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-insta-item.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0px);
}

/* モーション軽減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-reveal--left,
  .js-reveal--right,
  .js-reveal--scale,
  .js-reveal--heading,
  .js-insta-item {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}