/* ==================================================================
   Reviews — "לקוחות מספרים" (js/reviews.js).

   Without motion (reduced motion, no JS) it's a calm grid of four quotes.
   With it, the section becomes a pinned stage (.is-stage): one review at a
   time in big type, a felt rail with a rolling cue ball as the progress
   bar, and numbered balls drifting behind at their own depths.
   ================================================================== */

.reviews__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 28px; margin-bottom: 40px;
}
.reviews__head .eyebrow { flex-basis: 100%; margin: 0; }
.reviews__head .display { margin: 0; }
.reviews__count { margin: 0; color: var(--dim); }
.reviews__count .num { color: var(--yellow); font-weight: 800; }

/* the stage parts exist only on the stage */
.rv-balls, .rv-mark, .reviews__rail { display: none; }

/* ---- the stage ------------------------------------------------------------ */

.reviews.is-stage { padding: 0; }
.reviews.is-stage .reviews__pin {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  padding: calc(var(--nav-h) + 24px) var(--pad) clamp(28px, 5vh, 56px);
}
.reviews.is-stage .reviews__head { position: relative; z-index: 2; margin: 0; }

/* all four quotes share one cell; the timeline swaps them */
.reviews.is-stage .reviews__list {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; place-items: center;
  min-height: 0;
}
.reviews.is-stage .rv { grid-area: 1 / 1; width: min(1060px, 100%); will-change: transform, opacity; }
.reviews.is-stage .rv blockquote {
  height: auto; padding: 0; border: 0; background: none;
  display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 26px);
  text-align: center;
}
/* The card style in sections.css sets justify-content: space-between (for its flex column). On this
   grid, with one column track, that parks the track at the start edge — Hebrew quotes hugged the
   right, the Russian one the left. Centre the track, and the items in it. */
.reviews.is-stage .rv blockquote { justify-content: center; }
.reviews.is-stage .rv blockquote > p,
.reviews.is-stage .rv blockquote > footer { justify-self: center; }
.reviews.is-stage .rv blockquote p {
  font-size: clamp(46px, 8.6vw, 142px); line-height: .9;
  max-width: 13ch; text-wrap: balance;
  text-shadow: 0 10px 50px rgba(0, 0, 0, .55);
}
.reviews.is-stage .rv blockquote[lang="ru"] p { font-size: clamp(30px, 5.2vw, 80px); line-height: 1.06; max-width: 17ch; }
.reviews.is-stage .rv footer {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--yellow);
}
.reviews.is-stage .rv footer::before {                    /* five stars — a Google review, not a rating claim */
  content: '★★★★★'; letter-spacing: .12em; font-size: 13px; color: var(--yellow); opacity: .85;
}
.rv-word { will-change: opacity; }

/* a giant quote mark behind the words */
.reviews.is-stage .rv-mark {
  display: block; position: absolute; z-index: 1;
  top: 50%; left: 50%; transform: translate(-50%, -58%);
  /* a serif face for the mark itself — Karantina draws ” as a thin sliver */
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; line-height: 1;
  font-size: clamp(280px, 46vw, 680px); color: var(--yellow); opacity: .08;
  pointer-events: none; user-select: none;
}

/* ---- the drifting balls ------------------------------------------------------ */

.reviews.is-stage .rv-balls { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rv-ball {
  --k: 1;
  position: absolute;
  width: calc(var(--s) * var(--k)); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 60% 70%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45) 78%),
    var(--c);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .8);
  will-change: transform;
}
.rv-ball b {
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: #f5f2ea; color: #141414;
  font: 800 calc(var(--s) * var(--k) * .22)/1 var(--body);
}
.rv-ball--1 { --c: #ffcc1a; --s: 92px;  top: 20%; right: 7%; }
.rv-ball--2 { --c: #1d4fd8; --s: 56px;  top: 76%; right: 6%; }   /* clear of the name line under the quote */
.rv-ball--3 { --c: #e3222d; --s: 74px;  top: 30%; left: 9%; }
.rv-ball--5 { --c: #f06d1f; --s: 40px;  top: 74%; left: 24%; }
.rv-ball--8 { --c: #151515; --s: 118px; top: 50%; left: -3%; }

/* ---- the rail: felt between two wooden cushions, a pocket per review, the cue ball rolls it ---- */

.reviews.is-stage .reviews__rail {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 2;
  width: min(760px, 100%); margin-inline: auto;
  height: 38px; padding-inline: 8px;
  border-radius: 999px;
  border: 5px solid #3a2414;
  background: linear-gradient(#0f6e3d, #0a5530 60%, #073d22);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -4px 10px rgba(0, 0, 0, .5), 0 14px 30px -14px rgba(0, 0, 0, .8);
}
.reviews__rail i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(245, 242, 234, .35);
  transition: background-color .3s, box-shadow .3s;
}
.reviews__rail i.is-on { background: var(--yellow); box-shadow: 0 0 10px rgba(255, 204, 26, .8); }
.reviews__cue {
  position: absolute; top: 50%; right: 5px;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #ece8de 45%, #b8b2a5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .55);
  will-change: transform;
}
.reviews__cue::after {                                     /* a red spot, so the roll reads */
  content: ''; position: absolute; top: 5px; left: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}

@media (max-width: 760px) {
  .rv-ball { --k: .62; }
  .rv-ball--8 { left: -9%; }
  .reviews.is-stage .reviews__head { gap: 4px 16px; }
  .reviews.is-stage .reviews__rail { height: 32px; }
}