/* ============================================================
   @kit-component scroll-fade (styles)
   @status     stable
   @since      0.1.0
   @source     大地アート / 髙笠 の fade-in（opacity + translateY）を汎用化
   @requires   tokens/tokens.css（--transition 系を参照）

   .fade-in     … 初期状態（下に40px・透明）
   .fade-in.visible … 表示状態（JSが付与）
   .d1〜.d4     … 段階遅延（同一行の要素を順に出すとき）
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 段階遅延（カード横並びなどで使用） */
.fade-in.d1 { transition-delay: 0.1s; }
.fade-in.d2 { transition-delay: 0.2s; }
.fade-in.d3 { transition-delay: 0.3s; }
.fade-in.d4 { transition-delay: 0.4s; }

/* reduced-motion：アニメ無効（JS側でも visible を即付与） */
@media (prefers-reduced-motion: reduce) {
  .fade-in { transition: none; opacity: 1; transform: none; }
}