/* ============================================================
   44-marquee-trust-strip.css — auto-scrolling trust badges

   A horizontal strip that loops endlessly, showing trust signals
   (5★ Facebook · 100% recommended · 10+ years · NSW licensed ·
   HBCF insured · Northern Beaches · etc.). Looks like the
   sponsor reel at the bottom of a sports broadcast — adds
   movement to the page without competing with anything.

   Implementation: a flex row of `<li>` items, doubled in JS or
   markup so the loop is seamless. The CSS animates
   `transform: translateX(-50%)` over 30 seconds, then loops.
   On hover, the marquee pauses so visitors can read.

   HTML snippet to drop wherever (typically between sections
   or in the footer):

   <div class="trust-marquee" aria-label="At a glance">
     <ul>
       <li>★★★★★ on Facebook</li>
       <li>•</li>
       <li>100% recommended</li>
       <li>•</li>
       <li>10+ years on the tools</li>
       <li>•</li>
       <li>NSW Builders Licence 362701C</li>
       <li>•</li>
       <li>HBCF insured</li>
       <li>•</li>
       <li>Northern Beaches NSW</li>
       <li>•</li>
       <li>Owner-built · never sub-contracted</li>
     </ul>
   </div>
   ============================================================ */

.trust-marquee {
  background: var(--c-blue);
  color: var(--c-white);
  padding: var(--s-3) 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--c-blue-dark);
  border-bottom: 1px solid var(--c-blue-dark);
  /* Soft fade on the left and right edges so the strip doesn't
     read as a hard rectangle. Looks like the items are emerging
     from / disappearing into the background. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.trust-marquee ul {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: btb-marquee 30s linear infinite;
  /* will-change keeps the animation on its own compositor layer
     so it never causes layout thrash on the rest of the page */
  will-change: transform;
}

.trust-marquee li {
  flex-shrink: 0;
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
}

/* Yellow bullet separators */
.trust-marquee li.dot {
  color: var(--c-yellow);
  font-size: 1.4rem;
  line-height: 1;
}

/* Highlight pieces — star ratings in gold */
.trust-marquee .star {
  color: var(--c-yellow);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-right: 6px;
}

@keyframes btb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause on hover so visitors can read */
@media (hover: hover) {
  .trust-marquee:hover ul {
    animation-play-state: paused;
  }
}

/* Reduce-motion: stop scrolling. Still shows the first row of
   items so the trust signals are visible. */
@media (prefers-reduced-motion: reduce) {
  .trust-marquee ul {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 var(--s-4);
  }
}

/* Mobile: tighter spacing + slightly faster loop */
@media (max-width: 720px) {
  .trust-marquee ul {
    gap: var(--s-4);
    animation-duration: 22s;
  }
  .trust-marquee li {
    font-size: 0.82rem;
  }
}