/* ─────────────────────────────────────────────────────────────────
   CurvedLoop — infinite SVG textPath marquee with drag interaction
   Text scrolls along a gentle quadratic bezier curve.
   No @keyframes — pure RAF-driven, velocity-smoothed.
   ───────────────────────────────────────────────────────────────── */

/* ── Wrapper section ── */
#trust-marquee {
  background: transparent;
  padding-block: 3rem 2.5rem;
  overflow: hidden;
}

/* ── Container ── */
.curvedloop {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.curvedloop:active {
  cursor: grabbing;
}

/* ── The SVG canvas ── */
.curvedloop__svg {
  display: block;
  width: 100%;
  height: var(--cl-height, 120px);
  overflow: visible;
}

/* ── Text along the path ── */
.curvedloop__text {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: var(--cl-font-size, 4rem);
  font-weight: 400;               /* Bebas Neue has one weight */
  letter-spacing: var(--cl-tracking, 0.04em);
  fill: var(--cl-color, rgba(255,255,255,0.92));
  dominant-baseline: middle;
  will-change: transform;
}

/* ── Hover: text brightens ── */
.curvedloop:hover .curvedloop__text {
  fill: rgba(255,255,255,1);
  transition: fill 0.35s ease;
}

/* ── Reduced motion: freeze ── */
@media (prefers-reduced-motion: reduce) {
  .curvedloop__text {
    transform: none !important;
  }
}