/* Homepage reviews: two rows of review cards drifting in opposite directions.
   Markup from build/build-reviews.js (data in data/reviews.json). Each row's
   track holds the real cards once (.rv-set) and two aria-hidden, inert copies
   (.rv-clone); it moves left by exactly one set's width and repeats, so the
   loop is seamless, and three sets cover even a 2560px screen.

   Sizes are unitless custom properties so the loop distance and the duration
   come from the same numbers: one set is n x (card + gap) px, and the time is
   that distance over the speed in px/s. Change --w, --g or --speed and both
   follow. Only transform animates, so it stays on the compositor. */

body.hp .rv{position:relative;isolation:isolate;overflow:hidden;background:#0D0B18;color:#fff;padding:64px 0 52px}
body.hp .rv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 380px at 50% 38%,rgba(118,75,162,.28),transparent 70%),
    radial-gradient(520px 320px at 12% 100%,rgba(102,126,234,.14),transparent 70%)}

body.hp .rv-head{text-align:center;max-width:960px;margin:0 auto 32px}
body.hp .rv-kicker{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B9ADFF;margin-bottom:12px}
body.hp .rv-head h2{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;color:#fff;text-wrap:balance}
body.hp .rv-lead{margin-top:10px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.66)}

/* ── rows ─────────────────────────────────────────────────────────────── */
body.hp .rv-rows{display:grid;gap:18px}
body.hp .rv-row{--w:400;--g:18;--speed:34;position:relative;overflow:hidden;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
body.hp .rv-right{--speed:29}
body.hp .rv-row:focus-visible{box-shadow:inset 0 0 0 2px #A99BFF;border-radius:4px;-webkit-mask-image:none;mask-image:none}
body.hp .rv-track{display:flex;gap:calc(var(--g) * 1px);width:max-content;will-change:transform;
  animation:rv-drift calc(var(--n) * (var(--w) + var(--g)) / var(--speed) * 1s) linear infinite}
body.hp .rv-right .rv-track{animation-direction:reverse}
@keyframes rv-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--n) * (var(--w) + var(--g)) * -1px),0,0)}
}
/* Hover, keyboard focus, the pause button, and being off screen all hold it. */
body.hp .rv-row:hover .rv-track,
body.hp .rv-row:focus-within .rv-track,
body.hp .rv.is-paused .rv-track,
body.hp .rv.is-offscreen .rv-track{animation-play-state:paused}

body.hp .rv-set{display:flex;gap:calc(var(--g) * 1px);list-style:none;margin:0;padding:0}

/* ── cards ────────────────────────────────────────────────────────────── */
body.hp .rv-card{flex:none;width:calc(var(--w) * 1px);display:flex;margin:0}
body.hp .rv-card figure{display:flex;flex-direction:column;width:100%;margin:0;padding:20px 22px 18px;
  border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09)}
body.hp .rv-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;min-height:16px}
body.hp .rv-stars{display:flex;gap:2px}
body.hp .rv-stars svg{fill:#FBBC04;display:block}
body.hp .rv-src{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;font-weight:600;color:rgba(255,255,255,.55)}
body.hp .rv-src svg{display:block;flex:none}
body.hp .rv-card blockquote{margin:0 0 16px}
body.hp .rv-card blockquote p{margin:0;font-size:15px;line-height:1.58;color:rgba(255,255,255,.86);text-wrap:pretty}
body.hp .rv-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
body.hp .rv-mark{flex:none;width:40px;height:40px;border-radius:11px;overflow:hidden;background:#fff;display:grid;place-items:center}
body.hp .rv-mark img{width:100%;height:100%;object-fit:contain;display:block}
body.hp .rv-initials{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em}
body.hp .rv-id{display:flex;flex-direction:column;min-width:0}
body.hp .rv-name{font-size:14.5px;font-weight:700;color:#fff;line-height:1.3}
body.hp .rv-sub{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.4}

/* ── footer: pause control and links ─────────────────────────────────── */
body.hp .rv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:26px}
body.hp .rv-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  transition:background .18s ease,border-color .18s ease}
body.hp .rv-toggle:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
body.hp .rv-toggle:focus-visible,body.hp .rv-link:focus-visible{outline:2px solid #C4B5FD;outline-offset:3px}
body.hp .rv-toggle svg{fill:currentColor;display:block}
body.hp .rv-toggle .rv-i-play{display:none}
body.hp .rv.is-paused .rv-toggle .rv-i-play{display:block}
body.hp .rv.is-paused .rv-toggle .rv-i-pause{display:none}
body.hp .rv-link{font-size:14px;font-weight:600;color:#C4B5FD;text-decoration:none}
body.hp .rv-link:hover{color:#fff}

/* ── smaller screens ─────────────────────────────────────────────────── */
@media (max-width:980px){
  body.hp .rv-head h2{font-size:32px}
}
@media (max-width:768px){
  body.hp .rv{padding:56px 0 48px}
  body.hp .rv-head{margin-bottom:28px}
  body.hp .rv-head h2{font-size:27px}
  body.hp .rv-lead{font-size:16px}
  body.hp .rv-rows{gap:14px}
  /* Narrower cards and a much lighter fade, so no review text sits under it. */
  body.hp .rv-row{--w:290;--g:14;--speed:28;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
  body.hp .rv-right{--speed:24}
  body.hp .rv-card figure{padding:20px 18px 16px}
  body.hp .rv-card blockquote p{font-size:14.5px}
  body.hp .rv-foot{flex-direction:column;gap:14px;margin-top:24px;padding:0 20px;text-align:center}
}

/* ── reduced motion: no drift; each row scrolls by hand instead ──────── */
@media (prefers-reduced-motion:reduce){
  body.hp .rv-track{animation:none;width:auto}
  body.hp .rv-clone{display:none}
  body.hp .rv-row{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 12px;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
    -webkit-mask-image:none;mask-image:none}
  body.hp .rv-card{scroll-snap-align:start}
  body.hp .rv-toggle{display:none}
}