/* 1. .imgAnimation */
.imgAnimation {
    opacity: 0;
    filter: blur(10px);
    /* transformを追加してGPUレイヤーに強制的に乗せます */
    transform: translateZ(0); 
    transition: opacity 0.8s ease, filter 1s ease;
    /* ブラウザに最適化を促す */
    will-change: opacity, filter;
}

.imgAnimation.is-visible {
    opacity: 1;
    filter: blur(0);
}

/* 2. .titAnimation */
.titAnimation {
    opacity: 0;
    filter: blur(20px);
    transform: translateZ(0);
    will-change: opacity, filter;
}

.titAnimation.is-visible {
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/* 3. .textAnimation */
.textAnimation {
    opacity: 0;
    filter: blur(20px);
    transform: translateZ(0);
    will-change: opacity, filter;
}

.textAnimation.is-visible {
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.8s ease, filter 1s ease;
}