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

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

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

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