/* Adapted from React Bits "ScrollReveal" – 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. */

/* The script adds .rb-scroll-reveal to the element it runs on and wraps each word in
   .rb-scroll-reveal__word. Nothing here changes how the text looks until you opt into the
   --statement preset, so it can sit on an existing class such as .intro__statement. */

.rb-scroll-reveal__word {
  /* Plain inline (the original uses inline-block): line breaks, hyphen breaks such as
     "Online-|Marktplätze", text-wrap and link underlines stay exactly as in the unsplit text */
  display: inline;
}

/* Layer hints only while ScrollTrigger is scrubbing the words (toggled by the script) */
.rb-scroll-reveal--active .rb-scroll-reveal__word { will-change: opacity, filter; }

/* Screen-reader copy of the original text (the script also sets this inline) */
.rb-scroll-reveal__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* Optional preset: the original's large statement type, set in the Amergin voice.
   Every value is a custom property, so a section can pass in its own tokens, e.g. on petrol:
   style="--rb-scroll-reveal-color: #fff" */
.rb-scroll-reveal--statement {
  font-family: var(--rb-scroll-reveal-font, "Archivo", "Helvetica Neue", Arial, sans-serif);
  font-size: var(--rb-scroll-reveal-size, clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem));
  font-stretch: var(--rb-scroll-reveal-stretch, 112%);
  font-weight: var(--rb-scroll-reveal-weight, 480);
  line-height: var(--rb-scroll-reveal-leading, 1.28);
  letter-spacing: var(--rb-scroll-reveal-tracking, -0.01em);
  color: var(--rb-scroll-reveal-color, #102a33);
  max-width: var(--rb-scroll-reveal-measure, 30ch);
  text-wrap: pretty;
}
.rb-scroll-reveal--statement a {
  color: var(--rb-scroll-reveal-link, #894b1f);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}
.rb-scroll-reveal--statement a:focus-visible {
  outline: 2px solid var(--rb-scroll-reveal-focus, #894b1f);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Belt and braces: if the visitor asks for less motion, words are always fully shown */
@media (prefers-reduced-motion: reduce) {
  .rb-scroll-reveal__word { opacity: 1 !important; filter: none !important; }
}