/* curved-loop.css — styles for the curved SVG marquee (curved-loop.js).
   Ported from the React Bits <CurvedLoop /> component. The original was sized
   for a full-screen hero (font-size:6rem, min-height:100vh) which overflows a
   page band. Here it is tuned to sit as a contained strip: the SVG is clipped
   to its box, the text scales with the viewport, and the band has a fixed,
   modest height. Override --curved-loop-fill / --curved-loop-size per use. */

.curved-loop-jacket {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.curved-loop-svg {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  width: 100%;
  /* Short, fixed band instead of a tall aspect-ratio block. */
  height: var(--curved-loop-height, 90px);
  /* Clip the glyphs to the band so they can't bleed into adjacent sections. */
  overflow: hidden;
  display: block;
  /* Scales between phones and desktop; far smaller than the 6rem hero default. */
  font-size: var(--curved-loop-size, clamp(1.4rem, 4.5vw, 3rem));
  fill: var(--curved-loop-fill, #ffffff);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}