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

/* Scroll-velocity band. Every value reads a --rb-scroll-velocity-* property first, then the site token,
   then a hard fallback, so the band can be re-themed from the element or any ancestor.
     --rb-scroll-velocity-ink       solid row           (petrol)
     --rb-scroll-velocity-outline   outlined row        (stone)
     --rb-scroll-velocity-accent    separator diamonds  (copper)
     --rb-scroll-velocity-bg        band + button fill  (white)
     --rb-scroll-velocity-line      rules + button edge (line)
     --rb-scroll-velocity-start     where the first word rests (static, reduced motion, before JS); default: after the edge fade
     --rb-scroll-velocity-size / -stretch / -weight / -stroke / -fade / -pad / -gap */

.rb-scroll-velocity {
  position: relative;
  isolation: isolate;           /* keeps the button's z-index local to the band */
  overflow: hidden;
  overflow: clip;
  padding-block: var(--rb-scroll-velocity-pad, clamp(18px, 2.4vw, 36px));
  font-family: var(--rb-scroll-velocity-font, var(--font, "Archivo", "Helvetica Neue", Arial, sans-serif));
  font-size: var(--rb-scroll-velocity-size, clamp(2.125rem, 0.75rem + 4.4vw, 5.5rem));
  font-stretch: var(--rb-scroll-velocity-stretch, 122%);
  font-weight: var(--rb-scroll-velocity-weight, 640);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--rb-scroll-velocity-ink, var(--petrol, #102a33));
  background: var(--rb-scroll-velocity-bg, var(--white, #ffffff));
  border-block: 1px solid var(--rb-scroll-velocity-line, var(--line, #d2dada));
}

/* One sentence for screen readers; the moving rows are aria-hidden */
.rb-scroll-velocity__sr {
  position: absolute !important;
  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;
}

/* Rows fade out towards both edges so words drift in and out rather than being cut.
   With the pause button present the right-hand fade widens so no letters run underneath it. */
.rb-scroll-velocity__row {
  --rb-scroll-velocity-fade-in: var(--rb-scroll-velocity-fade, clamp(28px, 7vw, 150px));
  --rb-scroll-velocity-fade-out: var(--rb-scroll-velocity-fade-in);
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rb-scroll-velocity-fade-in), #000 calc(100% - var(--rb-scroll-velocity-fade-out)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--rb-scroll-velocity-fade-in), #000 calc(100% - var(--rb-scroll-velocity-fade-out)), transparent 100%);
}
.rb-scroll-velocity--controls .rb-scroll-velocity__row {
  --rb-scroll-velocity-fade-out: max(var(--rb-scroll-velocity-fade-in), 88px);
}
.rb-scroll-velocity__row + .rb-scroll-velocity__row { margin-top: var(--rb-scroll-velocity-gap, 0.02em); }

.rb-scroll-velocity__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  /* carrier only: lets the script read the resolved start line in px */
  scroll-margin-left: var(--rb-scroll-velocity-start, var(--rb-scroll-velocity-fade, clamp(28px, 7vw, 150px)));
}
/* Without the script the first word still rests on the start line */
.rb-scroll-velocity:not(.rb-scroll-velocity--js) .rb-scroll-velocity__track {
  margin-left: var(--rb-scroll-velocity-start, var(--rb-scroll-velocity-fade, clamp(28px, 7vw, 150px)));
}
.rb-scroll-velocity--live .rb-scroll-velocity__track { will-change: transform; }

/* A group ends with a separator, so copies placed side by side repeat without a seam */
.rb-scroll-velocity__group {
  display: flex;
  flex: none;
  align-items: center;
}
.rb-scroll-velocity__word { flex: none; }

.rb-scroll-velocity__sep {
  flex: none;
  box-sizing: border-box;
  width: 0.2em;
  height: 0.2em;
  margin-inline: 0.5em;
  background: var(--rb-scroll-velocity-accent, var(--copper, #894b1f));
  transform: translateY(-0.02em) rotate(45deg);
}

/* Outlined row. Variable fonts keep overlapping contours, which a plain text-stroke draws inside
   some letters in some browsers. So the stroke is drawn at double width first and the letter is
   then filled with the band colour on top: only the outer half of the stroke stays visible and
   the overlaps are covered. On a non-solid background set --rb-scroll-velocity-bg to the surface colour. */
.rb-scroll-velocity__row--outline .rb-scroll-velocity__word {
  color: var(--rb-scroll-velocity-bg, var(--white, #ffffff));
  -webkit-text-stroke: calc(2 * var(--rb-scroll-velocity-stroke, 1.25px)) var(--rb-scroll-velocity-outline, var(--stone, #56656b));
  paint-order: stroke fill;
}
.rb-scroll-velocity__row--outline .rb-scroll-velocity__sep {
  background: transparent;
  border: max(1.5px, 0.028em) solid var(--rb-scroll-velocity-accent, var(--copper, #894b1f));
}
@supports not (-webkit-text-stroke: 1px black) {
  .rb-scroll-velocity__row--outline .rb-scroll-velocity__word { color: var(--rb-scroll-velocity-outline, var(--stone, #56656b)); }
}

/* Pause control (added by the script only while the band moves) */
.rb-scroll-velocity__toggle {
  position: absolute;
  z-index: 1;
  right: var(--rb-scroll-velocity-toggle-inset, clamp(10px, 1.6vw, 24px));
  bottom: var(--rb-scroll-velocity-toggle-inset, clamp(10px, 1.6vw, 24px));
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--rb-scroll-velocity-ink, var(--petrol, #102a33));
  background: var(--rb-scroll-velocity-bg, var(--white, #ffffff));
  border: 1px solid var(--rb-scroll-velocity-line, var(--line, #d2dada));
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
@media (pointer: coarse) {
  .rb-scroll-velocity__toggle { width: 44px; height: 44px; }
}
.rb-scroll-velocity__toggle:hover { border-color: currentColor; }
.rb-scroll-velocity__toggle:focus-visible {
  outline: 2px solid var(--rb-scroll-velocity-accent, var(--copper, #894b1f));
  outline-offset: 3px;
}
.rb-scroll-velocity__toggle .rb-scroll-velocity__icon {
  display: block;
  width: 14px;
  height: 14px;
  max-width: none;
  fill: currentColor;
}
.rb-scroll-velocity__toggle[aria-pressed="true"] .rb-scroll-velocity__icon-pause,
.rb-scroll-velocity__toggle:not([aria-pressed="true"]) .rb-scroll-velocity__icon-play { display: none; }

@media print {
  .rb-scroll-velocity__toggle { display: none; }
}
@media (forced-colors: active) {
  .rb-scroll-velocity__row--outline .rb-scroll-velocity__word { color: CanvasText; -webkit-text-stroke: 0; }
  .rb-scroll-velocity__sep { forced-color-adjust: none; }
  .rb-scroll-velocity__toggle { border-color: ButtonText; }
}