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

/*
 * p.test 自体は単なるコンテナです。
 * アニメーションは子要素の <span> に適用します。
 */

/*
 * 1. <span> の初期状態（非表示時）
 */
.titAnimation span {
    /* display: inline-block; filterやtransformを適用するため */
    opacity: 0;
    filter: blur(30px); /* ご要望のブラー */
    display: inline-block;
    white-space:pre-wrap;
    /* 変化を滑らかにするためのトランジション設定 */
    /* opacityとfilterが 0.8秒かけて変化する */
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/*
 * 2. 表示する状態（.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);
}

/* 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);
}
@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

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