/**
 * 見出し：スクロールインで上下の横線が中央から左右へ伸びる（縦線なしの枠の印象）
 * ブロックの「追加 CSS クラス」に tbt-heading-reveal-frame を指定
 * 線は文字色（currentColor）を薄めにしたヘアラインで、本文の下線系と馴染む
 */

.tbt-heading-reveal-frame {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  /* スタック（縦 flex）の子で幅100%に引き伸ばされない */
  align-self: flex-start;
  justify-self: start;
}

/* 中央揃え見出しは従来どおり中央に */
.wp-block-heading.tbt-heading-reveal-frame.has-text-align-center,
h1.tbt-heading-reveal-frame.has-text-align-center,
h2.tbt-heading-reveal-frame.has-text-align-center,
h3.tbt-heading-reveal-frame.has-text-align-center,
h4.tbt-heading-reveal-frame.has-text-align-center,
h5.tbt-heading-reveal-frame.has-text-align-center,
h6.tbt-heading-reveal-frame.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-self: center;
}

p.tbt-heading-reveal-frame.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-self: center;
}

.tbt-heading-reveal-frame::before,
.tbt-heading-reveal-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
  opacity: 0.42;
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.tbt-heading-reveal-frame::before {
  top: 0;
}

.tbt-heading-reveal-frame::after {
  bottom: 0;
}

.tbt-heading-reveal-frame.is-inview::before,
.tbt-heading-reveal-frame.is-inview::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .tbt-heading-reveal-frame::before,
  .tbt-heading-reveal-frame::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* ブロックエディター：JS が動かないため横線は常に展開 */
.editor-styles-wrapper .tbt-heading-reveal-frame::before,
.editor-styles-wrapper .tbt-heading-reveal-frame::after,
.block-editor-block-list__layout .tbt-heading-reveal-frame::before,
.block-editor-block-list__layout .tbt-heading-reveal-frame::after {
  transform: scaleX(1);
  transition: none;
}

/**
 * tbt-heading-reveal-underline
 *
 * 下線の伸びるアニメーションのみ（背景 1px）。幅は文字列（max-content）＝下線も文字幅。
 * ブロックの位置・幅・alignwide 等はこのファイルでは触らず、テーマ・エディタの既定に任せる。
 *
 * 固定ページ上部の英字（.entry-eyebrow）は page.php の .entry-header 側。
 * 本文では .tbt-heading-with-eyebrow 内の英字に tbt-heading-reveal-fade-up を併用し、
 * underline / frame 等の見出しと同様にスクロールインする。
 */
.tbt-heading-reveal-underline {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  /* line-height が大きいと下線が文字から離れて見えるため詰める */
  line-height: 1.28;
  padding-bottom: 0.06em;
  align-self: flex-start;
  justify-self: start;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 1px;
  transition: background-size 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 中央・右寄せ見出し：下線幅を文字列に合わせ、枠内で中央配置（英字ラッパーと位置を揃える） */
.wp-block-heading.tbt-heading-reveal-underline.has-text-align-center,
h1.tbt-heading-reveal-underline.has-text-align-center,
h2.tbt-heading-reveal-underline.has-text-align-center,
h3.tbt-heading-reveal-underline.has-text-align-center,
h4.tbt-heading-reveal-underline.has-text-align-center,
h5.tbt-heading-reveal-underline.has-text-align-center,
h6.tbt-heading-reveal-underline.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-self: center;
}

.wp-block-heading.tbt-heading-reveal-underline.has-text-align-right,
h1.tbt-heading-reveal-underline.has-text-align-right,
h2.tbt-heading-reveal-underline.has-text-align-right,
h3.tbt-heading-reveal-underline.has-text-align-right,
h4.tbt-heading-reveal-underline.has-text-align-right,
h5.tbt-heading-reveal-underline.has-text-align-right,
h6.tbt-heading-reveal-underline.has-text-align-right {
  margin-left: auto;
  margin-right: 0;
  align-self: flex-end;
  justify-self: end;
}

.tbt-heading-reveal-underline.is-inview {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .tbt-heading-reveal-underline {
    background-size: 100% 1px;
    transition: none;
  }
}

.editor-styles-wrapper .tbt-heading-reveal-underline,
.block-editor-block-list__layout .tbt-heading-reveal-underline {
  background-size: 100% 1px;
  transition: none;
}

/**
 * 左の縦アクセントのみ（横線なし。frame・underline と併用ページで線が多くならない）
 * 追加 CSS クラス: tbt-heading-reveal-accent-left
 */
.tbt-heading-reveal-accent-left {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding-left: 0.7rem;
  align-self: flex-start;
  justify-self: start;
}

.wp-block-heading.tbt-heading-reveal-accent-left.has-text-align-center,
h1.tbt-heading-reveal-accent-left.has-text-align-center,
h2.tbt-heading-reveal-accent-left.has-text-align-center,
h3.tbt-heading-reveal-accent-left.has-text-align-center,
h4.tbt-heading-reveal-accent-left.has-text-align-center,
h5.tbt-heading-reveal-accent-left.has-text-align-center,
h6.tbt-heading-reveal-accent-left.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-self: center;
}

p.tbt-heading-reveal-accent-left.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-self: center;
}

.tbt-heading-reveal-accent-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 3px;
  background-color: currentColor;
  opacity: 0.88;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.tbt-heading-reveal-accent-left.is-inview::before {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .tbt-heading-reveal-accent-left::before {
    transform: scaleY(1);
    transition: none;
  }
}

.editor-styles-wrapper .tbt-heading-reveal-accent-left::before,
.block-editor-block-list__layout .tbt-heading-reveal-accent-left::before {
  transform: scaleY(1);
  transition: none;
}

/**
 * 横線・縦線なし：フェード＋わずかに下から（線が重ならない見出し演出）
 * 追加 CSS クラス: tbt-heading-reveal-fade-up
 */
.tbt-heading-reveal-fade-up {
  display: block;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(0.65rem);
  transition:
    opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  align-self: flex-start;
  justify-self: start;
}

.wp-block-heading.tbt-heading-reveal-fade-up.has-text-align-center,
h1.tbt-heading-reveal-fade-up.has-text-align-center,
h2.tbt-heading-reveal-fade-up.has-text-align-center,
h3.tbt-heading-reveal-fade-up.has-text-align-center,
h4.tbt-heading-reveal-fade-up.has-text-align-center,
h5.tbt-heading-reveal-fade-up.has-text-align-center,
h6.tbt-heading-reveal-fade-up.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-self: center;
}

p.tbt-heading-reveal-fade-up.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-self: center;
}

.tbt-heading-reveal-fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 見出し直上の英字は動きをやや弱め（本文ブロック用） */
.tbt-heading-with-eyebrow > .tbt-heading-eyebrow.tbt-heading-reveal-fade-up {
  transform: translateY(0.38rem);
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.tbt-heading-with-eyebrow > .tbt-heading-eyebrow.tbt-heading-reveal-fade-up.is-inview {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tbt-heading-reveal-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tbt-heading-with-eyebrow > .tbt-heading-eyebrow.tbt-heading-reveal-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.editor-styles-wrapper .tbt-heading-reveal-fade-up,
.block-editor-block-list__layout .tbt-heading-reveal-fade-up {
  opacity: 1;
  transform: none;
  transition: none;
}

/*
 * 演出クラス共通：論理幅は文字列（max-content）。下線はその幅にだけ付く。
 * ※ .entry-content 直下の margin:auto との関係は、underline には手を付けずテーマ側のまま。
 */
.tbt-heading-reveal-frame,
.tbt-heading-reveal-underline,
.tbt-heading-reveal-accent-left,
.tbt-heading-reveal-fade-up {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0;
}

/*
 * frame / accent / fade-up：親の margin:auto 中央寄せと has-text-align-* の整合用（underline は含めない）
 */
body:not(.page-staff-only) .site-main .entry-content
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ):not(.has-text-align-center):not(.has-text-align-right),
body:not(.page-staff-only) .tbt-front-content
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ):not(.has-text-align-center):not(.has-text-align-right) {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

body:not(.page-staff-only) .site-main .entry-content
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-center,
body:not(.page-staff-only) .tbt-front-content
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-center {
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}

body:not(.page-staff-only) .site-main .entry-content
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-right,
body:not(.page-staff-only) .tbt-front-content
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-right {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}

/* ブロックエディター（iframe 内） */
.editor-styles-wrapper
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ):not(.has-text-align-center):not(.has-text-align-right),
.block-editor-block-list__layout
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ):not(.has-text-align-center):not(.has-text-align-right) {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

.editor-styles-wrapper
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-center,
.block-editor-block-list__layout
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-center {
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}

.editor-styles-wrapper
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-right,
.block-editor-block-list__layout
  :is(
    .tbt-heading-reveal-frame,
    .tbt-heading-reveal-accent-left,
    .tbt-heading-reveal-fade-up
  ).has-text-align-right {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}