/* Motion Animations */

/* 初期状態: 透明・少し下に配置 */
.js-motion-target {
    opacity: 0;
    will-change: opacity, filter, translate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 画面内に入ったときの状態: デフォルトはフェードイン */
.js-motion-target.is-in-view {
    animation: fadeInMotion 0.4s ease-out forwards;
}

@keyframes fadeInMotion {
    0% {
        opacity: 0;
        translate: 0 20px;
    }

    100% {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes rabbitHop {
    0% {
        opacity: 0;
        translate: 0 30px;
    }

    40% {
        opacity: 1;
        translate: 0 -12px;
    }

    70% {
        opacity: 1;
        translate: 0 4px;
    }

    100% {
        opacity: 1;
        translate: 0 0;
    }
}

/* 要素ごとの遅延や調整 */

/* 見出しは跳ねるアニメーションで少し早めに */
h1.js-motion-target.is-in-view,
h2.js-motion-target.is-in-view,
h3.js-motion-target.is-in-view,
h4.js-motion-target.is-in-view,
h5.js-motion-target.is-in-view,
h6.js-motion-target.is-in-view,
.wp-block-heading.js-motion-target.is-in-view,
.c-heading.js-motion-target.is-in-view {
    animation: rabbitHop 0.6s ease-out forwards;
}

/* セクション、テーブル、画像等 */
section.js-motion-target.is-in-view,
.wp-block-group.js-motion-target.is-in-view,
.wp-block-table.js-motion-target.is-in-view,
.wp-block-inabapyonpyon-flexible-table.js-motion-target.is-in-view,
.wp-block-image.js-motion-target.is-in-view,
.wp-block-columns.js-motion-target.is-in-view {
    animation-duration: 0.5s;
    animation-delay: 0.05s;
}

/* ユーザーの「減らす」設定への配慮 */
@media (prefers-reduced-motion: reduce) {
    .js-motion-target {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        filter: none !important;
        translate: none !important;
    }
}