/**
 * Text motion for THETA
 * - scroll: BRISK-style flowing background on headings (tx_theta_twist_back)
 * - hover: char twist (Envato / CodePen KKoOyLz)
 * Ref: https://b-risk.jp/blog/2021/01/anim-reference/ （背景色が流れてくる）
 */

[data-theta-twist],
[data-theta-twist] .tx_theta_twist_front,
[data-theta-twist] .tx_theta_twist_back,
[data-theta-twist] .tx_theta_twist_char {
  display: inline-block;
}

/* Stacked catch / lead lines after clone unwrap */
[data-theta-twist-converted] > [data-theta-twist],
.tx_angleIntro_copyText[data-theta-twist] {
  display: block;
}

[data-theta-twist] .tx_theta_twist_inset {
  display: block;
  position: relative;
  overflow: hidden;
}

/* ========== Scroll headings: 背景色が流れてくる ========== */
[data-theta-twist-type="scroll"] .tx_theta_twist_inset.tx_theta_bgFlow {
  display: inline-block;
  position: relative;
  overflow: visible;
  max-width: 100%;
  vertical-align: top;
  /* 行ボックス全体をマーカー面として確保 */
  line-height: inherit;
}

[data-theta-twist-type="scroll"] .tx_theta_bgFlow .tx_theta_twist_back {
  /* 共通ルールの inline-block を打ち消し、親いっぱいまで伸ばす */
  display: block !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  /* 青〜ピンク基準。色の一周は JS で HSL を連続シフト（継ぎ目なし） */
  background-image: linear-gradient(
    35deg,
    hsl(210 92% 58%),
    hsl(250 92% 58%),
    hsl(290 92% 58%),
    hsl(330 92% 58%),
    hsl(345 92% 62%),
    hsl(330 92% 58%),
    hsl(290 92% 58%),
    hsl(250 92% 58%),
    hsl(210 92% 58%)
  );
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

[data-theta-twist-type="scroll"] .tx_theta_bgFlow .tx_theta_twist_front {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 100%;
  /* BRISK寄りに余白を確保（背景が文字より短く見えないように） */
  padding: 0.18em 0.45em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: inherit;
  line-height: inherit;
  transition: color 0.01s linear 0.35s;
}

[data-theta-twist-type="scroll"].is-animated .tx_theta_bgFlow .tx_theta_twist_front {
  color: #fff;
}

[data-theta-twist-type="scroll"].is-animated .tx_theta_bgFlow .tx_theta_twist_back {
  /* 流れ込みのみ CSS。色ループは JS */
  animation: tx-theta-bg-reveal 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tx-theta-bg-reveal {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  30% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ========== Hover: char twist (既存) ========== */
[data-theta-twist-type="hover"] .tx_theta_twist_inset {
  overflow: hidden;
}

[data-theta-twist-type="hover"] .tx_theta_twist_back {
  position: absolute;
  inset: 0;
}

[data-theta-twist] .tx_theta_twist_char {
  transition: opacity 0.4s cubic-bezier(0.2, 0.63, 0.4, 1.02),
    transform 0.4s cubic-bezier(0.2, 0.63, 0.4, 1.02);
  transition-delay: calc(0.015s * var(--index, 0));
}

[data-theta-twist] .tx_theta_twist_char.whitespace {
  transition: none;
  transition-delay: 0s;
}

[data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char {
  opacity: 0;
  transform: translateY(101%) skewX(55deg);
}

[data-theta-twist-type="hover"] .tx_theta_twist_char {
  transition-duration: 0.25s;
}

/* Direct hover + parent hover (buttons / footer links / cursor) */
[data-theta-twist-type="hover"]:hover .tx_theta_twist_back .tx_theta_twist_char,
[data-theta-twist-type="hover"]:focus-visible .tx_theta_twist_back .tx_theta_twist_char,
.tx_act:hover [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
[data-tx-act-hover="target"]:hover [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
.tx_foot_link:hover [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
.tx_foot_subLink:hover [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
[data-tx-mask-hover="target"]:hover [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
[data-tx-cursor="trigger"]:hover [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
.tx_act:focus-visible [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
.tx_foot_link:focus-visible [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char,
.tx_foot_subLink:focus-visible [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char {
  opacity: 1;
  transform: none;
}

[data-theta-twist-type="hover"]:hover .tx_theta_twist_front .tx_theta_twist_char,
[data-theta-twist-type="hover"]:focus-visible .tx_theta_twist_front .tx_theta_twist_char,
.tx_act:hover [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
[data-tx-act-hover="target"]:hover [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
.tx_foot_link:hover [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
.tx_foot_subLink:hover [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
[data-tx-mask-hover="target"]:hover [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
[data-tx-cursor="trigger"]:hover [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
.tx_act:focus-visible [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
.tx_foot_link:focus-visible [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char,
.tx_foot_subLink:focus-visible [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char {
  opacity: 0;
  transform: translateY(-101%) skewX(-55deg);
}

.tx_act_text[data-theta-twist],
.tx_foot_linkText[data-theta-twist],
.tx_foot_subLinkText[data-theta-twist],
[data-tx-cursor="text"][data-theta-twist] {
  overflow: hidden;
  vertical-align: top;
}

/* Keep icons / media outside the skew layers visually stable */
[data-theta-twist] .tx_glyph,
[data-theta-twist] img {
  display: inline-block;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  [data-theta-twist] .tx_theta_twist_char {
    transition: none !important;
  }

  [data-theta-twist-type="scroll"] .tx_theta_bgFlow .tx_theta_twist_back {
    opacity: 1;
    transform: none;
    animation: none;
    background-position: 0% 50%;
  }

  [data-theta-twist-type="scroll"] .tx_theta_bgFlow .tx_theta_twist_front {
    color: #fff;
  }

  [data-theta-twist-type="hover"] .tx_theta_twist_back .tx_theta_twist_char {
    opacity: 1;
    transform: none;
  }

  [data-theta-twist-type="hover"] .tx_theta_twist_front .tx_theta_twist_char {
    opacity: 0;
  }
}