/* Adapted from React Bits "BlurText" – https://reactbits.dev – Copyright (c) 2026 David Haz.
   MIT + Commons Clause (see react-bits/LICENSE.md). Ported to vanilla JS for Amergin Commerce; not for redistribution as a component. */

/* BlurText sets no colour, font or size: the heading it runs on keeps its own styles
   (in the site: petrol ink, Archivo at font-stretch 122%). The custom properties below
   only tune the motion and may be set on the heading or any ancestor, e.g. from theme.json.
   JS options take precedence over them.

     --rb-blur-text-blur:     start blur        (default 0.12em; px or em)
     --rb-blur-text-distance: start offset      (default 0.22em; px or em)
     --rb-blur-text-duration: time per word     (default 0.9s)
     --rb-blur-text-stagger:  time between words (default 80ms)

   Words stay in normal inline flow, separated by the original spaces, so line breaking,
   letter-spacing and text-wrap: balance behave as for the unsplit heading. */

.rb-blur-text__word,
.rb-blur-text__char {
  display: inline-block;
}

/* An inline-block wider than the line would overflow on a small phone; capped at the line,
   a long German compound still breaks inside (overflow-wrap and hyphens are inherited). */
.rb-blur-text__word {
  max-width: 100%;
}

/* Letters of one word must not wrap apart */
.rb-blur-text__word--letters {
  white-space: nowrap;
}

/* Windows High Contrast / forced colours: filter and opacity are meaningless there, show text at once */
@media (forced-colors: active) {
  .rb-blur-text__word,
  .rb-blur-text__char {
    filter: none !important;
    opacity: 1 !important;
  }
}