/**
 * フェードインアニメーション用CSS
 * 固定ページ専用のアニメーション効果
 *
 * @package RIFF
 */

/* ==========================================================================
   フェードアニメーション基本設定
   ========================================================================== */

/* アニメーション用のCSS変数 */
:root {
  --fade-duration: 0.8s;
  --fade-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fade-distance: 60px;
  --fade-distance-mobile: 30px;
}

/* 基本的なフェード要素のスタイル */
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
  transition: all var(--fade-duration) var(--fade-easing);
  will-change: opacity, transform;
}

/* ==========================================================================
   上から下へのフェードイン（fadeUpTrigger）
   ========================================================================== */

.fadeUpTrigger {
  transform: translateY(var(--fade-distance));
}

.fadeUpTrigger.fade-in-active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   下から上へのフェードイン（fadeDownTrigger）
   ========================================================================== */

.fadeDownTrigger {
  transform: translateY(calc(-1 * var(--fade-distance)));
}

.fadeDownTrigger.fade-in-active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   左から右へのフェードイン（fadeLeftTrigger）
   ========================================================================== */

.fadeLeftTrigger {
  transform: translateX(calc(-1 * var(--fade-distance)));
}

.fadeLeftTrigger.fade-in-active {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   右から左へのフェードイン（fadeRightTrigger）
   ========================================================================== */

.fadeRightTrigger {
  transform: translateX(var(--fade-distance));
}

.fadeRightTrigger.fade-in-active {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   遅延アニメーション（複数要素用）
   ========================================================================== */

/* 遅延クラス（オプション） */
.fade-delay-1 {
  transition-delay: 0.1s;
}
.fade-delay-2 {
  transition-delay: 0.2s;
}
.fade-delay-3 {
  transition-delay: 0.3s;
}
.fade-delay-4 {
  transition-delay: 0.4s;
}
.fade-delay-5 {
  transition-delay: 0.5s;
}

/* ==========================================================================
   アニメーション速度のバリエーション（オプション）
   ========================================================================== */

.fade-slow {
  transition-duration: 1.2s;
}

.fade-fast {
  transition-duration: 0.5s;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --fade-duration: 0.7s;
    --fade-distance: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --fade-duration: 0.6s;
    --fade-distance: var(--fade-distance-mobile);
  }

  .fadeUpTrigger,
  .fadeDownTrigger,
  .fadeLeftTrigger,
  .fadeRightTrigger {
    transform: translateY(var(--fade-distance-mobile));
  }

  .fadeLeftTrigger {
    transform: translateX(calc(-1 * var(--fade-distance-mobile)));
  }

  .fadeRightTrigger {
    transform: translateX(var(--fade-distance-mobile));
  }

  .fadeDownTrigger {
    transform: translateY(calc(-1 * var(--fade-distance-mobile)));
  }
}

@media (max-width: 480px) {
  :root {
    --fade-duration: 0.5s;
    --fade-distance: 20px;
    --fade-distance-mobile: 20px;
  }
}

/* ==========================================================================
   アクセシビリティ配慮
   ========================================================================== */

/* モーション削減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .fadeUpTrigger,
  .fadeDownTrigger,
  .fadeLeftTrigger,
  .fadeRightTrigger {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }

  .fadeUpTrigger.fade-in-active,
  .fadeDownTrigger.fade-in-active,
  .fadeLeftTrigger.fade-in-active,
  .fadeRightTrigger.fade-in-active {
    transform: none !important;
  }

  .fade-delay-1,
  .fade-delay-2,
  .fade-delay-3,
  .fade-delay-4,
  .fade-delay-5 {
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   パフォーマンス最適化
   ========================================================================== */

/* GPU加速の有効化 */
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* アニメーション完了後のwill-changeをリセット */
.fade-in-active {
  will-change: auto;
}

/* ==========================================================================
   特別なエフェクト（オプション）
   ========================================================================== */

/* スケールエフェクト付きフェード */
.fade-scale {
  transform: scale(0.9);
}

.fade-scale.fade-in-active {
  transform: scale(1);
}

/* 回転エフェクト付きフェード */
.fade-rotate {
  transform: rotate(-5deg);
}

.fade-rotate.fade-in-active {
  transform: rotate(0deg);
}

/* ブラーエフェクト付きフェード */
.fade-blur {
  filter: blur(5px);
}

.fade-blur.fade-in-active {
  filter: blur(0px);
}

/* ==========================================================================
   ダークモード対応（オプション）
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* ダークモードでの特別な設定が必要な場合はここに追加 */
}

/* ==========================================================================
   印刷時の調整
   ========================================================================== */

@media print {
  .fadeUpTrigger,
  .fadeDownTrigger,
  .fadeLeftTrigger,
  .fadeRightTrigger {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   デバッグ用スタイル（開発時のみ）
   ========================================================================== */

/* 開発時にアニメーション要素を視覚的に確認するためのスタイル */
.fade-debug .fadeUpTrigger,
.fade-debug .fadeDownTrigger,
.fade-debug .fadeLeftTrigger,
.fade-debug .fadeRightTrigger {
  outline: 2px dashed rgba(30, 115, 190, 0.3);
  outline-offset: 2px;
}

.fade-debug .fade-in-active {
  outline-color: rgba(76, 175, 80, 0.5);
}

/* ==========================================================================
   高DPIディスプレイ対応
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 高解像度ディスプレイでの調整が必要な場合はここに追加 */
}