@charset "utf-8";

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

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

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

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

/* --- グループ (.fadein-bottom-group) --- */
.fadein-group > * {
  opacity: 0;
  filter: blur(20px);
  transform: translateZ(0);
  /* transition-delay もアニメーションの対象に含める */
  transition: opacity 0.8s ease, filter 1s ease, transition-delay 0s;
  will-change: opacity, filter;
}

/* 子要素自身に active クラスがついたら表示 */
.fadein-group > *.active {
  opacity: 1;
  filter: blur(0);
}