@charset "UTF-8";

/* ==========================================================================
   スクロールアニメーション (Transition版)
   ========================================================================== */

/* アニメーションの基本設定（画面外の状態） */
.scroll-animation {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, transform 0.8s ease, filter 1.2s ease;
}

/* 画面内に入った時のスタイル (.is-visibleはJSが付与) */
.scroll-animation.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none; /* transformプロパティをリセット */
  filter: none;    /* filterプロパティをリセット */
}

/* --- アニメーションの種類 --- */

/* 下からフェードイン */
.fade-in-bottom {
  transform: translateY(50px);
}

/* 上からフェードイン */
.fade-in-top {
  transform: translateY(-50px);
}

/* 左からフェードイン */
.fade-in-left {
  transform: translateX(-50px);
}

/* 右からフェードイン */
.fade-in-right {
  transform: translateX(50px);
}

/* ズームイン */
.zoom-in {
  transform: scale(0.9);
}

/* ズームアウト */
.zoom-out {
  transform: scale(1.1);
}

/* フォーカスイン */
.text-focus-in {
  filter: blur(10px);
}


/* --- 遅延 (Delay) --- */
.delay-200 { transition-delay: 200ms; }
.delay-400 { transition-delay: 400ms; }
.delay-600 { transition-delay: 600ms; }
.delay-800 { transition-delay: 800ms; }
.delay-1000{ transition-delay: 1000ms; }