/* ==========================================================================
   hero-wipe.css — 見出しの登場アニメーション
   --------------------------------------------------------------------------
   紺の帯が文字の上を左から右へ通り過ぎ、通ったあとに文字が現れる。
   帯は ::after で作り、scaleX の transform-origin を左→右に切り替えて
   「通り過ぎ」を作っている。

   文字は opacity ではなく color で出している。
   opacity を親に掛けると子である ::after の帯まで一緒に薄くなるため。

   使い方：h1 に .hero-title--wipe を足す。CSS は $extra_css で読む
   （全ページ共通の head では読まない。使う案だけに載せる）。

   文字色はページ側で --hero-text-color を上書きする。
   案C は紺、案B は映像の上なので白。
   ========================================================================== */

.hero-title--wipe .hero-title__lead,
.hero-title--wipe .hero-title__main {
  --hero-text-color: var(--color-text-strong);
  --hero-wipe-color: var(--navy-800);

  position: relative;
  width: fit-content;
  color: transparent;
  animation: hero-text-in 1ms linear both;
}

/* 中央寄せの案（案C）では帯も中央に来るように */
.hero-title--wipe.hero-title--center .hero-title__lead,
.hero-title--wipe.hero-title--center .hero-title__main {
  margin-inline: auto;
}

.hero-title--wipe .hero-title__lead {
  animation-delay: 430ms;
}

.hero-title--wipe .hero-title__main {
  animation-delay: 610ms;
}

.hero-title--wipe .hero-title__lead::after,
.hero-title--wipe .hero-title__main::after {
  content: "";
  position: absolute;
  inset: -0.04em -0.06em;
  background-color: var(--hero-wipe-color);
  transform: scaleX(0);
  transform-origin: left center;
  animation: hero-wipe 860ms var(--ease-in-out) both;
}

.hero-title--wipe .hero-title__main::after {
  animation-delay: 180ms;
}

@keyframes hero-wipe {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  50.01% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}

/* 帯が文字を覆いきった瞬間（wipe の 50% 地点）に文字を出す */
@keyframes hero-text-in {
  to {
    color: var(--hero-text-color);
  }
}

/*
  抑制設定では帯を出さず、文字を最初から表示する。
  color: transparent を基底に置いているので、ここで戻さないと文字が消える。
*/
@media (prefers-reduced-motion: reduce) {
  .hero-title--wipe .hero-title__lead,
  .hero-title--wipe .hero-title__main {
    color: var(--hero-text-color);
    animation: none;
  }

  .hero-title--wipe .hero-title__lead::after,
  .hero-title--wipe .hero-title__main::after {
    display: none;
  }
}