/**
 * =========================================================
 * QuantumMesh Common Scroll Animations
 * =========================================================
 *
 * 共通スクロールアニメーション
 * - IntersectionObserver専用
 * - GPUアクセラレーション対応
 * - JavaScript無効時でもコンテンツは表示される
 * - prefers-reduced-motion対応
 *
 * =========================================================
 */

/* =========================================================
   Base
========================================================= */

.qm-animation-ready .qm-fade-up,
.qm-animation-ready .qm-fade-left,
.qm-animation-ready .qm-fade-right,
.qm-animation-ready .qm-scale-up {
    --qm-animation-duration: 1.05s;
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity var(--qm-animation-duration) cubic-bezier(0.22, 1, 0.36, 1),
        transform var(--qm-animation-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.qm-animation-ready .qm-animation-fast {
    --qm-animation-duration: 0.85s;
}

/* =========================================================
   Fade Up
========================================================= */

.qm-animation-ready .qm-fade-up {
    transform: translate3d(0, 22px, 0);
}

/* =========================================================
   Fade Left
========================================================= */

.qm-animation-ready .qm-fade-left {
    transform: translate3d(-24px, 0, 0);
}

/* =========================================================
   Fade Right
========================================================= */

.qm-animation-ready .qm-fade-right {
    transform: translate3d(24px, 0, 0);
}

/* =========================================================
   Scale Up
========================================================= */

.qm-animation-ready .qm-scale-up {
    transform: scale3d(.96, .96, 1);
}

/* =========================================================
   Visible
========================================================= */

.qm-animation-ready .qm-fade-up.is-visible,
.qm-animation-ready .qm-fade-left.is-visible,
.qm-animation-ready .qm-fade-right.is-visible,
.qm-animation-ready .qm-scale-up.is-visible {

    opacity: 1;
    transform: translate3d(0,0,0) scale3d(1,1,1);
    will-change: auto;

}

/* =========================================================
   Stagger
========================================================= */

.qm-animation-ready .qm-stagger > * {

    opacity: 0;
    transform: translate3d(0,22px,0);

    will-change: opacity, transform;

    transition:
        opacity 1s cubic-bezier(0.22,1,0.36,1),
        transform 1s cubic-bezier(0.22,1,0.36,1);

}

.qm-animation-ready .qm-stagger.is-visible > * {

    opacity:1;
    transform:translate3d(0,0,0);

}

.qm-animation-ready .qm-stagger.is-visible > *:nth-child(1){transition-delay:0s;}
.qm-animation-ready .qm-stagger.is-visible > *:nth-child(2){transition-delay:.10s;}
.qm-animation-ready .qm-stagger.is-visible > *:nth-child(3){transition-delay:.20s;}
.qm-animation-ready .qm-stagger.is-visible > *:nth-child(4){transition-delay:.30s;}
.qm-animation-ready .qm-stagger.is-visible > *:nth-child(5){transition-delay:.40s;}
.qm-animation-ready .qm-stagger.is-visible > *:nth-child(6){transition-delay:.50s;}
.qm-animation-ready .qm-stagger.is-visible > *:nth-child(7){transition-delay:.60s;}
.qm-animation-ready .qm-stagger.is-visible > *:nth-child(8){transition-delay:.70s;}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:768px){

    .qm-animation-ready .qm-fade-up{
        transform:translate3d(0,24px,0);
    }

    .qm-animation-ready .qm-fade-left{
        transform:translate3d(-24px,0,0);
    }

    .qm-animation-ready .qm-fade-right{
        transform:translate3d(24px,0,0);
    }

    .qm-animation-ready .qm-stagger>*{
        transform:translate3d(0,20px,0);
    }

}

/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion:reduce){

    .qm-animation-ready .qm-fade-up,
    .qm-animation-ready .qm-fade-left,
    .qm-animation-ready .qm-fade-right,
    .qm-animation-ready .qm-scale-up,
    .qm-animation-ready .qm-stagger>*{

        opacity:1 !important;
        transform:none !important;
        transition:none !important;
        will-change:auto;

    }

}