/**
 * スクロールアニメーション用CSS
 * 配置: css/scroll-animation.css
 * 
 * 使用方法:
 * HTML要素に以下のクラスを追加:
 * <div class="fade-in">フェードインする要素</div>
 * <div class="slide-in-up">下から上にスライドインする要素</div>
 * <div class="slide-reveal-left">左から右へスライド表示</div>
 * 
 * オプション属性:
 * <div class="fade-in" data-animation-delay="300" data-animation-duration="800">
 */

/* ========================================
   共通設定
   ======================================== */

:root{
    /* CSSカスタムプロパティ（JavaScriptから設定される） */
    --animation-duration: 600ms;
    --animation-delay: 100ms;
}

.fade-in,
.slide-in-up,
.slide-in-down,
.slide-in-left,
.slide-in-right,
.zoom-in,
.rotate-in,
.slide-reveal-left,
.slide-reveal-right,
.slide-reveal-up,
.slide-reveal-down {
    transition: all var(--animation-duration) ease var(--animation-delay);
}

/* アニメーション完了後の状態 */
.animated {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    /* clip-path: none !important; */
}

/* ========================================
   フェードイン
   ======================================== */

.fade-in.before-animation {
    opacity: 0;
    --animation-delay: 100ms;
}

/* ========================================
   スライドイン（下から上）
   ======================================== */

.slide-in-up.before-animation {
    opacity: 0;
    transform: translateY(50px);
}

/* ========================================
   スライドイン（上から下）
   ======================================== */

.slide-in-down.before-animation {
    opacity: 0;
    transform: translateY(-50px);
}

/* ========================================
   スライドイン（右から左）
   ======================================== */

.slide-in-left.before-animation {
    opacity: 0;
    transform: translateX(50px);
}

/* ========================================
   スライドイン（左から右）
   ======================================== */

.slide-in-right.before-animation {
    opacity: 0;
    transform: translateX(-50px);
}

/* ========================================
   スライド表示（要素は動かず、表示領域がスライド）
   ======================================== */

/* 左から右へスライド表示 */
.slide-reveal-left.before-animation {
    display:block;
    clip-path: inset(0 99% 0 0);
    transition: clip-path var(--animation-duration) ease var(--animation-delay);
}

.slide-reveal-left.animated {
    clip-path: inset(0 0 0 0);
}

/* 右から左へスライド表示 */
.slide-reveal-right.before-animation {
    clip-path: inset(0 0 0 99%);
    transition: clip-path var(--animation-duration) ease var(--animation-delay);
}

.slide-reveal-right.animated {
    clip-path: inset(0 0 0 0);
}

/* 下から上へスライド表示 */
.slide-reveal-up.before-animation {
    clip-path: inset(99% 0 0 0);
    transition: clip-path var(--animation-duration) ease var(--animation-delay);
}

.slide-reveal-up.animated {
    clip-path: inset(0 0 0 0);
}

/* 上から下へスライド表示 */
.slide-reveal-down.before-animation {
    clip-path: inset(0 0 99% 0);
    transition: clip-path var(--animation-duration) ease var(--animation-delay);
}

.slide-reveal-down.animated {
    clip-path: inset(0 0 0 0);
}

/* ========================================
   追加バリエーション（オプション）
   ======================================== */

/* ズームイン */
.zoom-in.before-animation {
    opacity: 0;
    transform: scale(0.8);
}

.zoom-in.animated {
    transform: scale(1) !important;
}

/* 回転フェードイン */
.rotate-in.before-animation {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
}

.rotate-in.animated {
    transform: rotate(0deg) scale(1) !important;
}

/* ========================================
   組み合わせパターン
   ======================================== */

/* スライド + ズーム */
.slide-zoom-in.before-animation {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
}

.slide-zoom-in.animated {
    transform: translateY(0) scale(1) !important;
}

/* スライド表示 + フェード */
.slide-reveal-fade-left.before-animation {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: 
        clip-path var(--animation-duration) ease var(--animation-delay),
        opacity var(--animation-duration) ease var(--animation-delay);
}

.slide-reveal-fade-left.animated {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
}

.slide-reveal-fade-right.before-animation {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transition: 
        clip-path var(--animation-duration) ease var(--animation-delay),
        opacity var(--animation-duration) ease var(--animation-delay);
}

.slide-reveal-fade-right.animated {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
}

/* ========================================
   特殊効果
   ======================================== */

/* ぼかし効果付きフェードイン */
.fade-blur-in.before-animation {
    opacity: 0;
    filter: blur(10px);
    transition: 
        opacity var(--animation-duration) ease-out var(--animation-delay),
        filter var(--animation-duration) ease-out var(--animation-delay);
}

.fade-blur-in.animated {
    filter: blur(0) !important;
}

/* ========================================
   順次表示用のクラス
   複数の要素を順番にアニメーションさせる場合
   ======================================== */

/* 1番目の要素 */
.animation-order-1 {
    --animation-delay: 0ms;
}

/* 2番目の要素 */
.animation-order-2 {
    --animation-delay: 100ms;
}

/* 3番目の要素 */
.animation-order-3 {
    --animation-delay: 200ms;
}

/* 4番目の要素 */
.animation-order-4 {
    --animation-delay: 300ms;
}

/* 5番目の要素 */
.animation-order-5 {
    --animation-delay: 400ms;
}

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

/* 高速 */
.animation-fast {
    --animation-duration: 300ms;
}

/* 通常（デフォルト） */
.animation-normal {
    --animation-duration: 600ms;
}

/* 低速 */
.animation-slow {
    --animation-duration: 1000ms;
}

/* 超低速 */
.animation-slower {
    --animation-duration: 1500ms;
}

/* ========================================
   レスポンシブ対応
   モバイルではアニメーションを簡略化
   ======================================== */

@media (max-width: 768px) {
    .before-animation {
        /* モバイルでは少し速めに */
        --animation-duration: 400ms;
    }
    
    /* スライド距離を短縮 */
    .slide-in-up.before-animation,
    .slide-in-down.before-animation {
        transform: translateY(30px);
    }
    
    .slide-in-left.before-animation,
    .slide-in-right.before-animation {
        transform: translateX(30px);
    }
}

/* ========================================
   アクセシビリティ対応
   モーション感度を下げる設定のユーザー向け
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .before-animation {
        /* アニメーションを無効化 */
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    
    .animated {
        /* 即座に表示 */
        transition: none !important;
    }
}

/* ========================================
   デバッグ用（開発時のみ使用）
   ======================================== */

/* アニメーション境界を可視化 */
.debug-animation .before-animation {
    outline: 2px dashed red;
}

.debug-animation .animated {
    outline: 2px solid green;
}