@charset "utf-8";

/* =========================================================
 * スクロール連動フェードイン（汎用ユーティリティ）
 *
 * 使い方:
 *   <div class="js-fadein">…</div>
 *   <div class="js-fadein js-fadein--up">下から上へ</div>
 *   <div class="js-fadein js-fadein--left" data-fadein-delay="200">左から</div>
 *   <div class="js-fadein" data-fadein-duration="1200">ゆっくり</div>
 *
 *   親に .js-fadein-stagger を付けると、子の .js-fadein が
 *   100ms ずつ自動で遅れて表示されます（data-fadein-step で変更可）。
 *
 *   <ul class="js-fadein-stagger" data-fadein-step="120">
 *     <li class="js-fadein js-fadein--up">…</li>
 *     <li class="js-fadein js-fadein--up">…</li>
 *   </ul>
 *
 * 仕様:
 * - 初期状態は opacity:0 + 軽い transform。
 * - 画面内に入ったら JS が `.is-visible` を付与して表示。
 * - 一度表示されたら戻らない（観察を解除）。
 * ========================================================= */

:root {
  --fadein-duration: 1400ms;
  --fadein-delay: 0ms;
  --fadein-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --fadein-distance: 32px;
}

.js-fadein {
  opacity: 0;
  transform: translate3d(0, var(--fadein-distance), 0);
  transition:
    opacity var(--fadein-duration) var(--fadein-easing) var(--fadein-delay),
    transform var(--fadein-duration) var(--fadein-easing) var(--fadein-delay);
  will-change: opacity, transform;
}

/* 方向バリエーション（指定がなければ up と同じ動き） */
.js-fadein--up {
  transform: translate3d(0, var(--fadein-distance), 0);
}

.js-fadein--down {
  transform: translate3d(0, calc(var(--fadein-distance) * -1), 0);
}

.js-fadein--left {
  transform: translate3d(calc(var(--fadein-distance) * -1), 0, 0);
}

.js-fadein--right {
  transform: translate3d(var(--fadein-distance), 0, 0);
}

.js-fadein--zoom {
  transform: scale(0.92);
}

.js-fadein--none {
  transform: none;
}

/* 表示後 */
.js-fadein.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* JS 無効環境向けフォールバック（html.no-js が付いている時のみ）*/
.no-js .js-fadein {
  opacity: 1;
  transform: none;
}

/* モーション抑制設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  .js-fadein {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}