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

/* Threads background layer.
   Markup: the section gets .rb-threads-host, its content wrapper .rb-threads-content, and an empty
   <div class="rb-threads-bg" aria-hidden="true"></div> goes first inside the section.
   Tokens: --rb-threads-color and --rb-threads-opacity are read once by threads.js at start-up;
   --rb-threads-fade sets how long the canvas takes to fade in. */

.rb-threads-host {
  position: relative;
  isolation: isolate;          /* keeps the layer's z-index local to the section */
}

.rb-threads-content {
  position: relative;
  z-index: 1;
}

.rb-threads-bg {
  --rb-threads-color: var(--copper-light, #e1b48e);
  --rb-threads-opacity: 0.35;
  --rb-threads-fade: 1.4s;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;             /* the canvas never affects layout or paint outside the layer */
}

.rb-threads-bg__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--rb-threads-fade) cubic-bezier(0.22, 1, 0.36, 1);
}

.rb-threads-bg--ready .rb-threads-bg__canvas {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rb-threads-bg__canvas { transition: none; }
}