/* ============================================================
   Testimonials: the Colours Wood Works scrolling strip, ported.
   Same mechanism: one track holding the cards twice over, moved
   from translateX(0) to translateX(-50%) on a 32s linear loop.

   Three defects in the original are fixed here:
   1. It jumped roughly 10px every cycle. The original spaced
      cards with flex `gap`, which leaves no gap after the last
      card, so one set was never exactly half the track. Spacing
      is margin now, so -50% lands perfectly.
   2. Only a mouse could pause it. There is a real pause button,
      so keyboard and touch work too.
   3. Reduced motion showed every quote twice, because the
      duplicate set was still in the scroll area. It is hidden.
   ============================================================ */

.reviews { position: relative; overflow: hidden; }

.reviews__backdrop { position: absolute; inset: 0; z-index: 0; }
.reviews__backdrop img { width: 100%; height: 100%; object-fit: cover; }
.reviews__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* The scrim is positioned, so anything left static paints underneath it.
   Both content layers have to opt in to sitting above it. */
.reviews > .wrap { position: relative; z-index: 2; }
.marquee { position: relative; z-index: 2; overflow: hidden; }

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.marquee__track:hover { animation-play-state: paused; }
.reviews.is-paused .marquee__track { animation-play-state: paused; }

/* fix 1: every card carries its own trailing space, so one full set
   is exactly half the track and the loop is seamless. */
.review { margin-right: 16px; }

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

.review {
  flex: 0 0 auto;
  width: 380px;
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}

.review__quote { color: var(--text); font-size: var(--step--1); line-height: 1.6; margin: 0; }.review__quote p { margin: 0; }

.review__who {
  display: flex; align-items: center; gap: 11px;
  margin-top: auto; padding-top: 4px;
}
.review__who img {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border-glow);
  background: var(--card-2);
}
/* Fallback when a reviewer has no photo yet */
.review__initial {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--border-glow);
  font-weight: 800; font-size: 15px; color: var(--text);
}

.review__name { display: block; font-weight: 700; font-size: var(--step--1); font-style: normal; }
.review__role { display: block; font-size: 12.5px; font-weight: 700; color: var(--cyan); }
.review__country { display: block; font-size: 12px; color: var(--muted-2); }

.reviews__foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; flex-wrap: wrap;
  margin-top: 22px;
}

/* Edge fade, so cards enter and leave instead of being chopped */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@media (max-width: 640px) {
  .review { width: 290px; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* fix 3 */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; }
  .review[data-dupe] { display: none; }
  .reviews__pause { display: none; }
}

/* Built and shipped follows straight on, so the gap between the two
   sections is one short step rather than two full section paddings. */
.reviews.sec { padding-bottom: clamp(24px, 3vw, 40px); }
.reviews + #built { padding-top: clamp(28px, 3vw, 44px); }