/* =========================================
   XCS Fade In
   ※縦方向のフェイドインが発火→反映での動きが速い為、独自クラスで実装
   使い方１：jsフォルダにxcs-fadein.jsをいれる
   使い方２：my-snow-monkey.phpで読み込み
   使い方３：対象要素に class="xcs-fadein"
   オプション：--xcs-の4箇所で設定（→変数で反映される）
========================================= */

.xcs-fadein {
    --xcs-distance: 24px;
    --xcs-move-duration: 1200ms;
    /* 移動は長め */
    --xcs-fade-duration: 1800ms;
    /* 透明度は短め */
    --xcs-delay: 250ms;

    opacity: 0;
    transform: translate3d(0, var(--xcs-distance), 0);
    transition:
        opacity var(--xcs-fade-duration) linear var(--xcs-delay),
        transform var(--xcs-move-duration) cubic-bezier(0.22, 1, 0.36, 1)
            var(--xcs-delay);
    will-change: opacity, transform;
    /* ブラウザに対して変化を予告 */
}

.xcs-fadein.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.xcs-fadein.is-done {
    opacity: 1;
    transform: none;
    will-change: auto;
}