/* ===============================
   typing animation
================================ */
.b-hero__title{
animation:
    tec-typing 2.2s steps(15, end) .2s forwards,
    tec-blink .8s step-end infinite;
}

@keyframes tec-typing{
from{ width: 0; border-right-color: currentColor; }
to{ width: 15ch; border-right-color: transparent; }
}

@keyframes tec-blink{
50%{ border-color: transparent }
}


/* ===============================
   Fade & Slide In (scroll)
================================ */

/* 初期状態：必ず非表示 */
.fadein_right,
.fadein_left,
.fadein_top,
.fadein_bottom {
  opacity: 0;
}

/* 方向指定 */
.fadein_right  { --x: 300px;  --y: 0; }
.fadein_left   { --x: -300px; --y: 0; }
.fadein_top    { --x: 0;      --y: -180px; }
.fadein_bottom { --x: 0;      --y: 180px; }

/* 発火時のみ animation */
.fadein_right.is-active,
.fadein_left.is-active,
.fadein_top.is-active,
.fadein_bottom.is-active {
  animation:
    fadeSlideIn 1s cubic-bezier(0.25, 1, 0.5, 1)
    var(--delay, 0s)
    forwards;
}

/* 遅延ユーティリティ */
.delay-1 { --delay: .15s; }
.delay-2 { --delay: .3s; }
.delay-3 { --delay: .45s; }
.delay-4 { --delay: .6s; }

@keyframes fadeSlideIn {
  0% {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
  40% { opacity: 1; }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce) {
  .fadein_right,
  .fadein_left,
  .fadein_top,
  .fadein_bottom {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}