/*
  BRIX Special Animation - AI Scroll Highlight
  ----------------------------------------------------------------------------
  Native replacement for the Webflow IX2 (GSAP SplitText + ScrollTrigger) text
  reveal in the "Our experience with AI" section. The original splits the
  paragraph into characters dimmed to 0.6 opacity and brightens them to full as
  the block scrolls through the viewport. We reproduce the same effect at the
  word level: each word (and inline logo) starts dimmed and turns on in reading
  order as the reader scrolls past, driven by the section's scroll progress.

  The exported design CSS has no rule for `.scroll-highlight` (it relied on the
  Webflow embed + IX2), so the type styling lives here.
*/

.scroll-highlight {
  color: var(--neutral--100);
  font-size: clamp(22px, 1.1rem + 1.6vw, 38px);
  line-height: 1.9;
  font-weight: 500;
  text-align: left;
}

.scroll-highlight .brix-hl-unit {
  opacity: 0.6;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.scroll-highlight .brix-hl-unit.is-on {
  opacity: 1;
}

/* Before the script runs (or if it fails), keep the text fully legible. */
.scroll-highlight:not(.brix-hl-ready) {
  opacity: 1;
}

.scroll-highlight:not(.brix-hl-ready) .brix-hl-unit {
  opacity: 1;
}

/* Inline logos sized relative to the text (ported from the page's Webflow
   embed <style>, which the migration removes). Sizes are in em so they track
   the responsive font-size above. */
.scroll-highlight .ai-research-image {
  max-width: 2em;
  margin: -0.4em -0.27em;
}

.scroll-highlight .ai-logos-wrapper {
  display: inline-block;
}

.scroll-highlight .ai-logo {
  display: inline-block;
  max-width: 2em;
  margin: -0.4em 0 -0.4em -0.75em;
}

.scroll-highlight .first-logo {
  position: relative;
  z-index: 1;
  margin-left: 0;
}

.scroll-highlight .second-logo {
  position: relative;
  z-index: 2;
}

.scroll-highlight .third-logo {
  position: relative;
  z-index: 3;
}

.scroll-highlight .ai-services-image {
  max-width: 3.2em;
  margin: -0.8em -0.4em;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-highlight .brix-hl-unit,
  .scroll-highlight .brix-hl-unit.is-on {
    opacity: 1;
    transition: none;
  }
}