/* ==========================================================================
   NetrAI — Reviews
   --------------------------------------------------------------------------
   Ported from the React <TestimonialsColumn> component. Three columns of
   quotes drifting upward at different speeds behind a soft top-and-bottom
   fade.

   WHAT THE PORT CHANGES, AND WHY

   · framer-motion -> CSS keyframes. The component animates
     `translateY: "-50%"` on an infinite linear loop. Each column's list is
     emitted twice in the markup, so -50% lands exactly on the start of the
     duplicate and the loop has no seam. A keyframe does the same job with no
     JS, no rAF, and no 40KB of animation library on a static page.

   · The data is NOT the component's. It shipped with invented ERP quotes and
     Unsplash headshots attached to made-up names. The eight cards here are
     the site's own reviews, moved across verbatim — the section header still
     says they are held back until each client signs off, and that stays true.

   · Tailwind classes -> the site's tokens. `bg-white dark:bg-neutral-900`
     becomes the frosted-glass material, so the reviews match every other
     card on the page rather than importing a second visual system.

   · Durations are unequal (28 / 34 / 31s) and deliberately not multiples of
     each other. Equal speeds make three columns read as one moving block;
     the offset is what makes it feel like drift rather than a conveyor.
   ========================================================================== */

.reviews-marquee {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-content: center;
  margin-top: 40px;

  /* The fade top and bottom. This is the component's
     [mask-image:linear-gradient(...)] — it is what stops cards appearing to
     be cut in half by the section edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);

  max-height: 740px;
  overflow: hidden;
}

@media (min-width: 768px)  { .reviews-marquee { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (min-width: 1024px) { .reviews-marquee { grid-template-columns: repeat(3, minmax(0, 320px)); } }

/* The third column only exists once there is room for it; the second only
   above the phone breakpoint. Hidden rather than removed so the markup stays
   one shape at every width. */
.rv-col:nth-child(2) { display: none; }
.rv-col:nth-child(3) { display: none; }
@media (min-width: 768px)  { .rv-col:nth-child(2) { display: block; } }
@media (min-width: 1024px) { .rv-col:nth-child(3) { display: block; } }

.rv-col { overflow: hidden; }

.rv-scroll {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
  animation: rv-drift var(--rv-dur, 40s) linear infinite;
  will-change: transform;
}

@keyframes rv-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* The hover pause is deliberately gone: the brief is that this never stops on
   its own account. Focus-within stays, and is not the same thing — a keyboard
   user who has tabbed into a card cannot chase it up the screen while reading,
   and that is a correctness issue rather than a preference. A mouse user can
   simply stop moving; a keyboard user cannot. */
.reviews-marquee:focus-within .rv-scroll {
  animation-play-state: paused;
}

/* ---- The card ----------------------------------------------------------
   Same frosted material as every other card on the site. */
.review-card {
  position: relative;
  padding: 32px 30px;
  border-radius: 22px;
  background: var(--glass-tint, var(--surface-white));
  -webkit-backdrop-filter: blur(var(--glass-blur-amt, 18px)) saturate(var(--glass-sat, 165%));
  backdrop-filter: blur(var(--glass-blur-amt, 18px)) saturate(var(--glass-sat, 165%));
  border: 1px solid var(--glass-hairline, var(--line));
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-edge-dim),
    var(--glass-drop);
  isolation: isolate;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease,
    background var(--transition);
}

.review-card:hover,
.review-card:focus-visible {
  transform: translateY(-6px) scale(1.02);
  background: var(--glass-tint-strong);
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-edge-dim),
    0 10px 20px -8px rgba(17, 17, 26, 0.10),
    0 24px 48px -16px rgba(17, 17, 26, 0.18);
}
[data-theme="dark"] .review-card:hover,
[data-theme="dark"] .review-card:focus-visible {
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-edge-dim),
    0 10px 20px -8px rgba(0, 0, 0, 0.55),
    0 24px 52px -16px rgba(0, 0, 0, 0.8);
}
.review-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.review-heading {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}

.review-card blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--mist);
  text-align: left;
  text-wrap: pretty;
}
.review-card blockquote strong { color: var(--ink); font-weight: var(--font-weight-semibold); }

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-hairline, var(--line));
}

/* Initials, not a stock photograph. The component used Unsplash portraits of
   people who never said any of this; a monogram makes no claim it cannot
   keep. */
.review-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px var(--glass-hairline);
}

.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-sm);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.review-role {
  font-size: 13px;
  line-height: 1.35;
  color: var(--mist);
  margin-top: 2px;
}
.review-company { color: var(--mist); }

/* ---- Reduced motion ----------------------------------------------------
   The drift stops entirely and the mask comes off, because a fade that hides
   the ends of a list nobody can scroll is just hidden content. The columns
   become a plain stacked grid of the eight real reviews; the duplicate set is
   removed from the layout so nothing reads twice. */
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    align-items: start;
  }
  .rv-scroll { animation: none; }
  .rv-col:nth-child(2), .rv-col:nth-child(3) { display: block; }
  .review-card[aria-hidden="true"] { display: none; }
  .review-card:hover, .review-card:focus-visible { transform: none; }
}

/* Print: the drift is meaningless on paper. */
@media print {
  .reviews-marquee { max-height: none; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .rv-scroll { animation: none; }
  .review-card[aria-hidden="true"] { display: none; }
}