/* ===== Scroll reveal text (Ali) ===== */
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt {
  --ali-srt-off: #d8cfc4;
  --ali-srt-on: #2b2218;
}

/* Tall track = the scroll distance the fill scrubs over. Taller → slower, more
   luxurious reveal. The sticky child pins centre-screen while the track scrolls
   past underneath. */
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__track {
  position: relative;
  min-height: 230vh;
}
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 4vw, 44px);
}

@media (max-width: 767px) {
  .cc_xqaduz1e_BZiaZHDLW0 .ali-srt__track {
    min-height: 180vh;
  }
}

.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--ali-weight-strong);
  color: var(--ali-srt-on);
}
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__text {
  margin: 0;
  max-width: 16ch;
}
@media (min-width: 768px) {
  .cc_xqaduz1e_BZiaZHDLW0 .ali-srt__text {
    max-width: 22ch;
  }
}

/* Leading highlight is always the active ink colour */
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__lead {
  color: var(--ali-srt-on);
}

/* Each word fills left→right via a gradient clipped to its glyphs. The fill
   fraction `--f` is derived PURELY in CSS from the section's scroll progress
   `--p` (0→1), the word's index `--i`, and the total word count `--wc`: as the
   reveal head (`--p * --wc`) sweeps across the line, each word fills 0→1 in turn
   for a liquid wavefront. Because only `--p` changes per frame (one DOM write,
   no Preact re-render), this stays buttery for long headlines. The small feather
   softens the wavefront edge. */
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__text {
  --p: 0;
  --wc: 1;
}
.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__word {
  --i: 0;
  --f: clamp(0, calc(var(--p) * var(--wc) - var(--i)), 1);
  display: inline;
  color: transparent;
  /* Two-stop fill: solid ink LEFT of the wavefront, muted RIGHT of it, with a
     short feather softening the edge. The feather sits just BEFORE the wavefront
     (f·100% − feather → f·100%), so at f=0 both stops are at/left of 0% and the
     whole word resolves to the muted colour — no stray ink smudge at the start
     of each word (the old gradient anchored an `on` stop at 0%, which painted a
     grey feather at every word's left edge). */
  background-image: linear-gradient(
    90deg,
    var(--ali-srt-on) calc(var(--f) * 100% - 0.14em),
    var(--ali-srt-off) calc(var(--f) * 100%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cc_xqaduz1e_BZiaZHDLW0 .ali-srt__cta {
  margin-top: 4px;
  height: 50px;
  padding-inline: 30px;
  background: transparent;
  color: var(--ali-srt-on);
  border: 1px solid currentColor;
  border-radius: var(--ali-radius-full);
}

/* Reduced motion: skip the scrub entirely — show solid, readable ink. */
@media (prefers-reduced-motion: reduce) {
  .cc_xqaduz1e_BZiaZHDLW0 .ali-srt__word {
    background: none;
    color: var(--ali-srt-on);
    -webkit-text-fill-color: var(--ali-srt-on);
  }
}