/*
 * scroll-title-anim.css  v2.1
 * 初期状態: 下にオフセット・clip-pathで隠れている
 * 発火後  : 定位置に戻る
 * color は一切変更しない
 */

/* ---- 初期状態（未発火）---- */
.js-scroll-title {
  translate: 0 22%;
  clip-path: inset(-10% 0 130% 0);
  opacity: 0.3;
  transition:
    translate    .9s cubic-bezier(.16, 1, .3, 1),
    clip-path    1.1s cubic-bezier(0, .55, .45, 1),
    opacity      .3s ease-in;
}

/* ---- バウンスアニメーション定義 ---- */
/*
@keyframes title-bounce {
  0%   { translate: 0 0;    }  /* 定位置に到着 *//*
  40%  { translate: 0 -2px; }  /* 2px上に *//*
  100% { translate: 0 3px;  }  /* 3px下に止まる *//*
}
*/
/* ---- 発火後（.is-visible が付いた状態）---- */
.js-scroll-title.is-visible {
  clip-path: inset(-10% 0 -10% 0);
  opacity: 1;
  /*animation: title-bounce 0 cubic-bezier(.16, 1, .3, 1) forwards;*/
  animation: title-bounce 0 cubic-bezier(.25, 1, .25, 1) forwards;
  animation-delay: 0; /*transitionが終わってから開始 */
}




/* ---- 初期状態（未発火）---- */
.js-scroll-txt {
  translate: 0 130%;
  opacity: 0.3;
  transition:
    translate    .8s cubic-bezier(.6, 1, .4, 1),
    opacity      .5s ease-in;
}

/* ---- 発火後（.is-visible が付いた状態）---- */
.js-scroll-txt.is-visible {
  translate: 0 0;
  opacity: 1;
}