/* --- ここからがアニメーションのCSS --- */

/*
 * 表示する状態（.is-visible クラスが親に追加されたら）
 */
.titAnimation.is-visible span {
    opacity: 1;
    filter: blur(0px); /* ブラーを解除 */
}

/* 1. .imgAnimation の初期状態（非表示時） */
.imgAnimation {
    opacity: 0;
    filter: blur(10px); /* ご要望のブラー */
    
    /* 変化を滑らかにするためのトランジション設定 */
    /* (0.8秒かけて変化。この値はお好みで調整してください) */
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/* 2. 表示する状態（.is-visible クラスが追加されたら） */
.imgAnimation.is-visible {
    opacity: 1;
    filter: blur(0px);
}

/* 1. .imgAnimation の初期状態（非表示時） */
.textAnimation {
    opacity: 0;
    filter: blur(20px);
}

.gjs-dashed .textAnimation {
    opacity: 1;
    filter: blur(0);
}

.gjs-dashed .imgAnimation {
    opacity: 1;
    filter: blur(0);
}

/* 2. 表示する状態（.is-visible クラスが追加されたら） */
.textAnimation.is-visible {
    opacity: 1;
    filter: blur(0px);
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.isPlay:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #1F1F1F;
}

.isPlay.is-visible:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
}

/* --- 遅延用のクラス --- */
/* 0.3秒遅らせる */
.delay-300 {
    /* transitionで作った動き（imgAnimationなど）を遅らせる */
    transition-delay: 0.3s !important;
    
    /* animationで作った動き（keyframesなど）を遅らせる */
    animation-delay: 0.3s !important;
}

/* 0.6秒遅らせる */
.delay-600 {
    transition-delay: 0.6s !important;
    animation-delay: 0.6s !important;
}

@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}