/* スクロールアニメーション用のスタイル */

/* ベースクラス - すべてのアニメーション要素に適用 */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* アニメーション開始時のクラス */
.animated {
    opacity: 1;
    transform: translateY(0) !important;
}

/* 下から上へのフェードイン */
.fade-up {
    transform: translateY(30px);
}

/* 上から下へのフェードイン */
.fade-down {
    transform: translateY(-30px);
}

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

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

/* 拡大しながらフェードイン */
.fade-scale {
    transform: scale(0.95);
}

/* タイミングの遅延設定用クラス */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ヘッダーのスクロール挙動 */
.site-header {
    transition: transform 0.4s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-hidden {
    transform: translateY(-100%);
}

/* パララックス要素 */
.parallax {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* ヒーローセクションの初期アニメーション */
.hero-content > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-content > *.animated {
    opacity: 1;
    transform: translateY(0);
}

/* スクロールダウンインジケータ */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    z-index: 5;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
    opacity: 1;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-15px) translateX(-50%);
    }
    60% {
        transform: translateY(-7px) translateX(-50%);
    }
}

/* スムーズスクロール設定 - ページ全体 */
html {
    scroll-behavior: smooth;
}