@charset "UTF-8";

/* 共通 */
.charfx-char{
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

/* -------------------------------
   既存 fade up
------------------------------- */
.charfx-fade .charfx-char{
  transform: translateY(0.9em);
  filter: blur(0px);
}

.charfx-ready .charfx-char{
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
}

.charfx-in.charfx-fade .charfx-char{
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------
   waving
------------------------------- */
.charfx-wave .charfx-char{
  transform: translate3d(0, var(--charfx-y-start, 0.9em), 0) rotate(0deg) scale(var(--charfx-scale-from, 0.96));
}

.charfx-in.charfx-wave .charfx-char{
  animation-name: charfx-waving-in;
  animation-duration: var(--charfx-duration, 1400ms);
  animation-delay: var(--charfx-delay, 0ms);
  animation-timing-function: cubic-bezier(.22,.8,.2,1);
  animation-fill-mode: forwards;
}

@keyframes charfx-waving-in{
  0%{
    opacity: 0;
    transform: translate3d(0, var(--charfx-y-start, 0.9em), 0) rotate(calc(var(--charfx-rotate, 8deg) * -1)) scale(var(--charfx-scale-from, 0.96));
  }
  18%{
    opacity: 1;
    transform: translate3d(0, calc(var(--charfx-wave, 0.28em) * -0.55), 0) rotate(var(--charfx-rotate, 8deg)) scale(1.02);
  }
  38%{
    opacity: 1;
    transform: translate3d(0, calc(var(--charfx-wave, 0.28em) * 0.40), 0) rotate(calc(var(--charfx-rotate, 8deg) * -0.75)) scale(0.995);
  }
  58%{
    opacity: 1;
    transform: translate3d(0, calc(var(--charfx-wave, 0.28em) * -0.22), 0) rotate(calc(var(--charfx-rotate, 8deg) * 0.45)) scale(1.01);
  }
  78%{
    opacity: 1;
    transform: translate3d(0, calc(var(--charfx-wave, 0.28em) * 0.10), 0) rotate(calc(var(--charfx-rotate, 8deg) * -0.2)) scale(0.998);
  }
  100%{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--charfx-scale-to, 1));
  }
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce){
  .charfx-char{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}