/**
 * スクロールアニメーション スタイル
 * 説明: スクロール時にセクションをふわっと表示させる
 * 
 * 【使用方法】
 * 以下のクラスはそれぞれ独立して使用します（併用しません）：
 * - 下からフェードイン: .scroll-fade クラスのみを要素に追加
 * - 左からフェードイン: .scroll-fade-l クラスのみを追加
 * - 右からフェードイン: .scroll-fade-r クラスのみを追加
 * - 拡大しながらフェードイン: .scroll-fade-z クラスのみを追加
 * - 子要素連続表示: .scroll-fade-seq クラスのみを親要素に追加
 *   （子要素が順番に表示されます、例：<ul class="scroll-fade-seq"><li>項目1</li><li>項目2</li>...</ul>）
 * - 子孫liタグ連続表示: .scroll-fade-li クラスのみを親要素に追加
 *   （子孫要素のliタグが順番に表示されます、例：<div class="scroll-fade-li"><div><ul><li>項目1</li><li>項目2</li>...</ul></div></div>）
 */

/* カスタムプロパティ - アニメーション共通設定 */
:root {
    --fade-duration    : 0.8s;        /* アニメーション時間 */
    --fade-delay       : 0.1s;        /* 遅延時間 */
    --fade-distance    : 30px;        /* 移動距離 */
    --fade-easing      : ease-out;    /* イージング関数 */
}

/* スクロールアニメーション - 基本（下からフェードイン） */
.scroll-fade {
    opacity           : 0;
    transform         : translateY(var(--fade-distance));
    transition        : opacity var(--fade-duration) var(--fade-easing),
                        transform var(--fade-duration) var(--fade-easing);
    transition-delay  : var(--fade-delay);
    will-change       : opacity, transform;
    
    &.is-visible {
        opacity           : 1;
        transform         : translateY(0);
    }
}

/* バリエーション: 左からフェードイン */
.scroll-fade-l {
    opacity           : 0;
    transform         : translateX(calc(-1 * var(--fade-distance)));
    transition        : opacity var(--fade-duration) var(--fade-easing),
                        transform var(--fade-duration) var(--fade-easing);
    transition-delay  : var(--fade-delay);
    will-change       : opacity, transform;
    
    &.is-visible {
        opacity           : 1;
        transform         : translateX(0);
    }
}

/* バリエーション: 右からフェードイン */
.scroll-fade-r {
    opacity           : 0;
    transform         : translateX(var(--fade-distance));
    transition        : opacity var(--fade-duration) var(--fade-easing),
                        transform var(--fade-duration) var(--fade-easing);
    transition-delay  : var(--fade-delay);
    will-change       : opacity, transform;
    
    &.is-visible {
        opacity           : 1;
        transform         : translateX(0);
    }
}

/* バリエーション: フェードイン拡大 */
.scroll-fade-z {
    opacity           : 0;
    transform         : scale(0.9);
    transition        : opacity var(--fade-duration) var(--fade-easing),
                        transform var(--fade-duration) var(--fade-easing);
    transition-delay  : var(--fade-delay);
    will-change       : opacity, transform;
    
    &.is-visible {
        opacity           : 1;
        transform         : scale(1);
    }
}

/* バリエーション: 子要素の連続アニメーション */
.scroll-fade-seq {
    /* 親要素自体はアニメーションしない */
    opacity           : 1;
    transform         : none;
    
    > * {
        opacity           : 0;
        transform         : translateY(var(--fade-distance));
        transition        : opacity var(--fade-duration) var(--fade-easing),
                            transform var(--fade-duration) var(--fade-easing);
        will-change       : opacity, transform;
    }
    
    &.is-visible {
        > * {
            opacity           : 1;
            transform         : translateY(0);
            
            &:nth-child(1) { transition-delay: calc(var(--fade-delay) + 0.0s); }
            &:nth-child(2) { transition-delay: calc(var(--fade-delay) + 0.1s); }
            &:nth-child(3) { transition-delay: calc(var(--fade-delay) + 0.2s); }
            &:nth-child(4) { transition-delay: calc(var(--fade-delay) + 0.3s); }
            &:nth-child(5) { transition-delay: calc(var(--fade-delay) + 0.4s); }
            &:nth-child(6) { transition-delay: calc(var(--fade-delay) + 0.5s); }
            &:nth-child(7) { transition-delay: calc(var(--fade-delay) + 0.6s); }
            &:nth-child(8) { transition-delay: calc(var(--fade-delay) + 0.7s); }
        }
    }
}

/**
 * バリエーション: 子孫liタグの連続アニメーション
 * 説明: 親要素に付与すると、その内部にある全てのliタグが階層に関係なく順番にフェードイン
 */
.scroll-fade-li {
    /* 親要素自体はアニメーションしない */
    opacity           : 1;
    transform         : none;
    
    li {
        opacity           : 0;
        transform         : translateY(var(--fade-distance));
        transition        : opacity var(--fade-duration) var(--fade-easing),
                            transform var(--fade-duration) var(--fade-easing);
        will-change       : opacity, transform;
    }
    
    &.is-visible {
        li {
            opacity           : 1;
            transform         : translateY(0);
            
            &:nth-child(1) { transition-delay: calc(var(--fade-delay) + 0.0s); }
            &:nth-child(2) { transition-delay: calc(var(--fade-delay) + 0.1s); }
            &:nth-child(3) { transition-delay: calc(var(--fade-delay) + 0.2s); }
            &:nth-child(4) { transition-delay: calc(var(--fade-delay) + 0.3s); }
            &:nth-child(5) { transition-delay: calc(var(--fade-delay) + 0.4s); }
            &:nth-child(6) { transition-delay: calc(var(--fade-delay) + 0.5s); }
            &:nth-child(7) { transition-delay: calc(var(--fade-delay) + 0.6s); }
            &:nth-child(8) { transition-delay: calc(var(--fade-delay) + 0.7s); }
        }
    }
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    :root {
        --fade-distance: 20px;
        --fade-duration: 0.6s;
    }
}