/* 
=== スクロールアニメーションシステム v2.0 ===

使用方法:
<div data-scroll="fadeUp" data-delay="200" data-speed="slow" data-once>

基本エフェクト: fadeIn, fadeUp, fadeDown, fadeLeft, fadeRight, scale, rotate, slideUp
紙芝居エフェクト: slideInLeft, slideInRight, slideInTop, slideInBottom
紙風エフェクト: paperSlideLeft, paperSlideRight, paperFlipIn, cardSlideUp, stackSlide
パララックス: parallaxUp, parallaxDown, parallaxZoom, parallaxRotate

グループアニメーション:
<div data-slide-group="sequence|wave|random">
    <div data-scroll="fadeUp">要素1</div>
    <div data-scroll="fadeUp">要素2</div>
</div>

オプション:
- data-delay="100~500" : 遅延時間
- data-speed="fast|slow" : 速度調整
- data-once : 一度だけ実行
- data-parallax-speed="0.1~1" : パララックス速度
*/

/* ========== 基本設定 ========== */
[data-scroll] {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-scroll].animate {
    opacity: 1;
}

/* ========== 基本エフェクト ========== */
[data-scroll="fadeIn"] { opacity: 0; }
[data-scroll="fadeIn"].animate { opacity: 1; }

[data-scroll="fadeUp"] {
    opacity: 0;
    transform: translateY(30px);
}
[data-scroll="fadeUp"].animate {
    opacity: 1;
    transform: translateY(0);
    animation-fill-mode: forwards;
}

[data-scroll="fadeDown"] {
    opacity: 0;
    transform: translateY(-30px);
}
[data-scroll="fadeDown"].animate {
    opacity: 1;
    transform: translateY(0);
}

[data-scroll="fadeLeft"] {
    opacity: 0;
    transform: translateX(-30px);
}
[data-scroll="fadeLeft"].animate {
    opacity: 1;
    transform: translateX(0);
}

[data-scroll="fadeRight"] {
    opacity: 0;
    transform: translateX(30px);
}
[data-scroll="fadeRight"].animate {
    opacity: 1;
    transform: translateX(0);
}

[data-scroll="scale"] {
    opacity: 0;
    transform: scale(0.8);
}
[data-scroll="scale"].animate {
    opacity: 1;
    transform: scale(1);
}

[data-scroll="rotate"] {
    opacity: 0;
    transform: rotate(-10deg);
}
[data-scroll="rotate"].animate {
    opacity: 1;
    transform: rotate(0deg);
}

[data-scroll="slideUp"] {
    opacity: 0;
    transform: translateY(50px);
}
[data-scroll="slideUp"].animate {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 画面全体スライドエフェクト ========== */
[data-scroll^="slideIn"] {
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

[data-scroll="slideInLeft"] {
    opacity: 0;
    transform: translateX(-100vw);
}
[data-scroll="slideInLeft"].animate {
    opacity: 1;
    transform: translateX(0);
}

[data-scroll="slideInRight"] {
    opacity: 0;
    transform: translateX(100vw);
}
[data-scroll="slideInRight"].animate {
    opacity: 1;
    transform: translateX(0);
}

[data-scroll="slideInTop"] {
    opacity: 0;
    transform: translateY(-100vh);
}
[data-scroll="slideInTop"].animate {
    opacity: 1;
    transform: translateY(0);
}

[data-scroll="slideInBottom"] {
    opacity: 0;
    transform: translateY(100vh);
}
[data-scroll="slideInBottom"].animate {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 紙風エフェクト ========== */
[data-scroll^="paper"] {
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-scroll="paperSlideLeft"] {
    opacity: 0;
    transform: translateX(-120%) rotateY(-15deg);
}
[data-scroll="paperSlideLeft"].animate {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
}

[data-scroll="paperSlideRight"] {
    opacity: 0;
    transform: translateX(120%) rotateY(15deg);
}
[data-scroll="paperSlideRight"].animate {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
}

[data-scroll="paperFlipIn"] {
    opacity: 0;
    transform: perspective(600px) rotateY(-90deg);
    transform-origin: left center;
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-scroll="paperFlipIn"].animate {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg);
}

/* ========== カード&スタックエフェクト ========== */
[data-scroll="cardSlideUp"] {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
[data-scroll="cardSlideUp"].animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

[data-scroll="stackSlide"] {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s ease-out;
    position: relative;
    z-index: 1;
}
[data-scroll="stackSlide"].animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}
[data-scroll="stackSlide"]:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: -5px;
    bottom: -5px;
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
    border-radius: inherit;
    transition: all 0.6s ease-out;
}
[data-scroll="stackSlide"].animate:before {
    top: 10px;
    left: 10px;
}

/* ========== パララックスエフェクト ========== */
[data-scroll^="parallax"] {
    transition: none;
    will-change: transform;
}

[data-scroll="parallaxUp"] {
    opacity: 0;
}
[data-scroll="parallaxUp"].animate {
    opacity: 1;
}

[data-scroll="parallaxDown"] {
    opacity: 0;
}
[data-scroll="parallaxDown"].animate {
    opacity: 1;
}

[data-scroll="parallaxZoom"] {
    opacity: 0;
    transform: scale(0.8);
}
[data-scroll="parallaxZoom"].animate {
    opacity: 1;
}

[data-scroll="parallaxRotate"] {
    opacity: 0;
}
[data-scroll="parallaxRotate"].animate {
    opacity: 1;
}

/* ========== 設定オプション ========== */

/* 遅延設定 */
[data-scroll][data-delay="100"].animate { transition-delay: 0.1s; }
[data-scroll][data-delay="200"].animate { transition-delay: 0.2s; }
[data-scroll][data-delay="300"].animate { transition-delay: 0.3s; }
[data-scroll][data-delay="400"].animate { transition-delay: 0.4s; }
[data-scroll][data-delay="500"].animate { transition-delay: 0.5s; }

/* 速度設定 */
[data-scroll][data-speed="fast"] { transition-duration: 0.4s; }
[data-scroll][data-speed="slow"] { transition-duration: 1.2s; }

/* ========== グループアニメーション ========== */
[data-slide-group] [data-scroll] {
    transition-delay: 0s;
}
[data-slide-group] [data-scroll]:nth-child(1).animate { transition-delay: 0s; }
[data-slide-group] [data-scroll]:nth-child(2).animate { transition-delay: 0.2s; }
[data-slide-group] [data-scroll]:nth-child(3).animate { transition-delay: 0.4s; }
[data-slide-group] [data-scroll]:nth-child(4).animate { transition-delay: 0.6s; }
[data-slide-group] [data-scroll]:nth-child(5).animate { transition-delay: 0.8s; }
[data-slide-group] [data-scroll]:nth-child(6).animate { transition-delay: 1s; }

/* ========== レスポンシブ調整 ========== */
@media (max-width: 768px) {
    [data-scroll^="slideIn"] {
        transition-duration: 0.6s;
    }
    
    [data-scroll^="paper"] {
        transition-duration: 0.8s;
    }
    
    [data-scroll="fadeUp"], 
    [data-scroll="fadeDown"] {
        transform: translateY(20px);
    }
    
    [data-scroll="fadeLeft"], 
    [data-scroll="fadeRight"] {
        transform: translateX(20px);
    }
}

/* ========== アクセシビリティ ========== */
@media (prefers-reduced-motion: reduce) {
    [data-scroll] {
        transition: opacity 0.3s ease;
        transform: none !important;
    }
}