/* Kadence Advanced Heading: vertical/stacked orientation stacks inline children per word */
.fade-words {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/*
 * Inline wrapper for flex / vertical-text fixes.
 * Do NOT set font-size, weight, or color here — Kadence outputs those on
 * .kt-adv-heading* / .kb-adv-text-inner; fixed px in this file was overriding the block.
 * Inherit so editor typography, colors, and responsive sizes apply.
 */
.fade-words-inner {
  display: inline;
  font: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  font-feature-settings: inherit;
  word-spacing: inherit;
  color: inherit;
  -webkit-text-fill-color: inherit;
  text-decoration: inherit;
  text-align: inherit;
}

/* Text is always visible, dimmed; scroll (where supported) brings it to full strength */
.fade-words-inner .fade-words-char {
  font: inherit;
  color: inherit;
  -webkit-text-fill-color: inherit;
  background-image: inherit;
  background-size: inherit;
  background-clip: inherit;
  -webkit-background-clip: inherit;
  opacity: 0.3;
  display: inline-block;
}

/* animation, animation-timeline, animation-range applied inline per word when supported */

/* Optional: add this class to the same element as .fade-words for more scroll “runway” */
.fade-words.fade-words-scroll-section {
  min-height: min(70vh, 520px);
}

.fade-words-inner.fade-words-no-timeline .fade-words-char {
  opacity: 1;
}

@keyframes gotb-fade-words-scroll {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}