/**
 * スクロールアニメーション共通CSS
 * 各種アニメーションパターンを定義
 */

/* 基本設定 - アニメーション前の状態 */
[data-scroll-animation] {
    opacity: 0;
    transition: none;
}

/* アニメーション実行時の共通設定 */
.is-visible {
    opacity: 1;
}

/* ==========================================================================
   フェードイン系アニメーション
   ========================================================================== */

/* フェードイン（上から） */
.scroll-animation--fadeInUp {
    transform: translateY(30px);
}

.scroll-animation--fadeInUp.is-visible {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* フェードイン（下から） */
.scroll-animation--fadeInDown {
    transform: translateY(-30px);
}

.scroll-animation--fadeInDown.is-visible {
    animation: fadeInDown 0.6s ease forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* フェードイン（左から） */
.scroll-animation--fadeInLeft {
    transform: translateX(-30px);
}

.scroll-animation--fadeInLeft.is-visible {
    animation: fadeInLeft 0.6s ease forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* フェードイン（右から） */
.scroll-animation--fadeInRight {
    transform: translateX(30px);
}

.scroll-animation--fadeInRight.is-visible {
    animation: fadeInRight 0.6s ease forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   スケール系アニメーション
   ========================================================================== */

/* ズームイン */
.scroll-animation--zoomIn {
    transform: scale(0.8);
}

.scroll-animation--zoomIn.is-visible {
    animation: zoomIn 0.6s ease forwards;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ズームアウト */
.scroll-animation--zoomOut {
    transform: scale(1.2);
}

.scroll-animation--zoomOut.is-visible {
    animation: zoomOut 0.6s ease forwards;
}

@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   回転系アニメーション
   ========================================================================== */

/* 回転フェードイン */
.scroll-animation--rotateIn {
    transform: rotate(-180deg) scale(0.8);
}

.scroll-animation--rotateIn.is-visible {
    animation: rotateIn 0.8s ease forwards;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* ==========================================================================
   特殊アニメーション
   ========================================================================== */

/* バウンス */
.scroll-animation--bounce {
    transform: translateY(30px);
}

.scroll-animation--bounce.is-visible {
    animation: bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounce {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* ==========================================================================
   メニューハブ専用設定（既存のアニメーションを移行）
   ========================================================================== */

.menu-hub-block--default .ark-block-column {
    opacity: 0;
    transform: translateY(20px);
}

.menu-hub-block--default .ark-block-column.is-visible {
    animation: fadeInUp 0.6s ease forwards;
}