/* =============================================
   高級感のある「ふわっと」スクロールリビール
   opacity + translateY + subtle blur、ゆったりした
   expo-out イージング。サイト全体で使用可。
   ============================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(42px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 控えめなバリエーション（テーブルなど大きな要素向け） */
[data-reveal="soft"] {
  transform: translateY(24px);
  filter: blur(3px);
}

/* 位置を動かさず透明度＋ぼかしだけ（重なり要素・隙間を出したくない箇所向け） */
[data-reveal="fade"] {
  transform: none;
  filter: blur(6px);
}
[data-reveal="fade"].is-visible {
  transform: none;
  filter: blur(0);
}

/* ちいさなスケール感を足すバリエーション（カード・画像向け） */
[data-reveal="rise"] {
  transform: translateY(48px) scale(0.985);
}
[data-reveal="rise"].is-visible {
  transform: translateY(0) scale(1);
}

/* 子要素を順番にふわっと出すコンテナ（stagger） */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(5px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* アクセシビリティ: モーション低減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}