@charset "UTF-8";

/* テキストアニメーション */
.flicker-heading{
  text-transform: uppercase;
  white-space: pre-wrap;
  visibility: hidden;
}
.gjs-dashed .flicker-heading,
.flicker-heading.is-ready{
  visibility: visible;
}

.flicker-heading .ch{
  display:inline-block;
  opacity: 1;
  will-change: opacity;
}

.flicker-heading .spacer{
  display:inline-block!important;
  width: .35em;
}

/* 発火中だけアニメーションを付ける（JSが文字ごとにCSS変数を入れる） */
.flicker-heading.is-flickering .ch{
  animation-name: letterFlicker;
  animation-duration: var(--dur, 700ms);
  animation-delay: var(--delay, 0ms);
  animation-iteration-count: infinite;     /* ← JS側で“切りの良い所”で止める */
  animation-timing-function: ease-in-out;  /* 参考は緩やか */
  animation-fill-mode: both;
}

/* JSが停止させた文字（待機状態） */
.flicker-headingflickerTxt .ch.is-hold{
  animation: none !important;
  opacity: 1 !important;
}

/* 0→1→0→1 の2往復風。最後は1で終わる */
@keyframes letterFlicker{
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  50%  { opacity: 0; }
  75%  { opacity: 1; }
  100% { opacity: 1; }
}

/* 動き軽減 */
@media (prefers-reduced-motion: reduce){
  .flicker-heading .ch{
    opacity: 1 !important;
    animation: none !important;
  }
}