@charset "UTF-8";
/* =========================================
   トップHERO：キャッチのタイピング＋サブコピーのワイプ
   JS：public/js/hero-typing.js
   調整：カーソルの太さ = --type-cursor-w
         ワイプの速さ = hero-typing.js の CONFIG
========================================= */

.hero__title {
  --type-cursor-w: 8px;
}

/* JS読み込み前のチラつき防止（html.hero-typing-js は front-page.php で付与） */
.hero-typing-js .hero__title:not(.is-typing-ready) .text-chunk,
.hero-typing-js .hero__lead:not(.is-wipe-ready),
.hero-typing-js .hero__desc:not(.is-wipe-ready) {
  visibility: hidden;
}

/* 文字は場所を確保したまま非表示 → レイアウトがずれない */
.hero__title.is-typing-ready .type-ch {
  visibility: hidden;
}
.hero__title.is-typing-ready .type-ch.is-on {
  visibility: visible;
}

/* ルビ（パートナー）は「伴走者」を打ち終えたらフェードイン */
.hero__title.is-typing-ready rt {
  opacity: 0;
  transition: opacity .6s ease;
}
.hero__title.is-typing-ready rt.is-on {
  opacity: 1;
}

/* カーソル（幅をマイナスマージンで相殺） */
.type-cursor {
  display: inline-block;
  width: var(--type-cursor-w);
  height: 1em;
  margin-right: calc(var(--type-cursor-w) * -1);
  vertical-align: -0.1em;
  background: currentColor;
}
.type-cursor.is-blink {
  animation: typeCursorBlink .56s steps(1) infinite;
}
.type-cursor.is-hide {
  animation: none;
  opacity: 0;
}
@keyframes typeCursorBlink {
  50% { opacity: 0; }
}

/* サブコピー：各チャンクを左→右にワイプ（表示中の1行ごとにJSが順番に実行） */
.hero__lead.is-wipe-ready .text-chunk,
.hero__desc.is-wipe-ready .text-chunk {
  clip-path: inset(0 100% 0 0);
}
.hero__lead.is-wipe-ready .text-chunk.is-on,
.hero__desc.is-wipe-ready .text-chunk.is-on {
  clip-path: inset(0 0 0 0);
  transition-property: clip-path;
  transition-timing-function: linear;
  /* duration / delay はJSが行の長さに合わせて設定 */
}

/* 動きを減らす設定では即表示 */
@media (prefers-reduced-motion: reduce) {
  .hero-typing-js .hero__title .text-chunk,
  .hero-typing-js .hero__lead,
  .hero-typing-js .hero__desc,
  .hero__title.is-typing-ready .type-ch {
    visibility: visible;
  }
  .hero__title.is-typing-ready rt { opacity: 1; }
  .hero__lead.is-wipe-ready .text-chunk,
  .hero__desc.is-wipe-ready .text-chunk { clip-path: none; }
  .type-cursor { display: none; }
}