/* ==========================================================================
   Scroll-reel testimonials — vanilla port of ScrollReelTestimonials.
   Counter-rotating portrait reel + per-character text rise. Portraits are
   LETTER AVATARS (no stock photos of real people); content is driven by
   CONFIG.testimonials. Matches the site's tokens.
   Geometry: cell 121.33px, gap 8px, step = 3*(cell+gap) = 388px.
   ========================================================================== */
.reel{
  --cell:121.33px; --gap:8px; --step:388px;
  position:relative; display:flex; flex-direction:column; align-items:stretch; gap:10px;
  width:100%; max-width:1060px; margin:var(--stack-gap,40px) auto 0;
  border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:var(--bg-soft); box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 30px 70px -30px rgba(17,17,19,.16);
  outline:none;
}
.reel:focus-visible{ box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 0 0 2px var(--blue); }
@media (min-width:768px){ .reel{ flex-direction:row; min-height:340px; gap:10px; } }

/* ── reel section (masked, portraits scroll) ── */
.reel-stage{
  position:relative; width:100%; height:224px; flex:none; align-self:stretch; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
@media (min-width:768px){ .reel-stage{ height:auto; width:380px; } }
.reel-cols{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; }
.reel-col{ display:flex; flex-direction:column; gap:8px; flex:none; will-change:transform; }

.reel-cell{
  flex:none; width:var(--cell); height:var(--cell); border-radius:12px;
  border:1px solid var(--line); background:linear-gradient(to bottom,var(--bg-soft),var(--bg));
  filter:blur(1px); box-shadow:0 1px 2px rgba(0,0,0,.05), inset 0 2px 0 rgba(255,255,255,1);
}
/* featured tile = letter avatar (no real photo), with the sheen overlay from the source */
.reel-featured{
  position:relative; flex:none; width:var(--cell); height:var(--cell); border-radius:12px; overflow:hidden;
  display:grid; place-items:center;
  box-shadow:0 1px .7px -.6px rgba(0,0,0,.18),0 2.4px 1.7px -1.1px rgba(0,0,0,.17),0 4.4px 3px -1.7px rgba(0,0,0,.17),0 7.2px 5px -2.3px rgba(0,0,0,.16),0 11.7px 8.2px -2.8px rgba(0,0,0,.15),0 19.1px 13.4px -3.4px rgba(0,0,0,.13),0 33px 23px -3.9px rgba(0,0,0,.09),0 60px 42px -4.5px rgba(0,0,0,.02),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.6);
}
.reel-featured .av-initial{
  font-family:var(--sans); font-weight:800; font-size:44px; letter-spacing:-.02em;
  color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.reel-featured .av-sheen{
  position:absolute; inset:0; z-index:3; filter:blur(6px); mix-blend-mode:overlay; pointer-events:none;
  background:linear-gradient(220.99deg,rgba(108,92,255,0) 32%,rgb(108,92,255) 41%,rgb(173,177,255) 47%,rgba(130,189,237,.57) 54%,rgba(130,189,237,0) 65%);
}

/* ── content section ── */
.reel-content{ display:flex; flex-direction:column; justify-content:space-between; align-self:stretch; flex:1; min-width:0; padding:28px 22px; }
@media (min-width:768px){ .reel-content{ padding:40px 22px; } }
.reel-mark{ display:block; width:46px; height:46px; color:rgba(17,17,19,.16); margin-bottom:9px; }
.reel-mark svg{ width:100%; height:100%; fill:currentColor; }

.reel-textstage{ position:relative; width:100%; max-width:390px; overflow:hidden; }
.reel-sizer{ visibility:hidden; display:flex; flex-direction:column; gap:19px; min-height:140px; }
.reel-block{ position:absolute; inset:0 0 auto 0; display:flex; flex-direction:column; gap:19px; will-change:transform,opacity; }
.reel-quote{ margin:0; font-family:var(--sans); font-weight:600; font-size:1.15rem; line-height:1.3; letter-spacing:-.02em; color:var(--ink); }
@media (min-width:640px){ .reel-quote{ font-size:1.375rem; } }
.reel-author{ margin:0; font-family:var(--body); font-weight:500; font-size:.9rem; line-height:1.3; color:var(--ink-soft); }

/* per-character rise */
.reel-char{ display:inline-block; opacity:0; transform:translateY(9px); animation:reel-char-rise .5s var(--ease-soft) forwards; }
.reel-word{ display:inline-block; white-space:nowrap; }
@keyframes reel-char-rise{ to{ opacity:1; transform:translateY(0); } }
.reel-block.is-exiting{ animation:reel-block-exit .24s var(--ease) forwards; }
.reel-block.is-exiting .reel-char{ animation:none; }   /* kill in-flight rises while exiting */
@keyframes reel-block-exit{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-12px); } }

/* ── controls ── */
.reel-controls{ display:flex; align-items:center; gap:6px; margin-top:24px; }
@media (min-width:768px){ .reel-controls{ margin-top:0; } }
.reel-btn{
  display:grid; place-items:center; width:26px; height:26px; padding:0; border-radius:50%;
  border:1px solid rgba(17,17,19,.15); background:transparent; color:var(--ink); cursor:pointer;
  transition:opacity .2s var(--ease-soft), transform .2s var(--ease-soft);
}
@media (hover: hover) and (pointer: fine){
  .reel-btn:not(:disabled):hover{ transform:scale(1.08); }
}
.reel-btn:not(:disabled):active{ transform:scale(.94); }
.reel-btn:disabled{ opacity:.4; cursor:default; }
.reel-btn svg{ width:12px; height:12px; opacity:.7; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }

@media (prefers-reduced-motion:reduce){
  .reel-col{ transition:none !important; }
  .reel-char{ animation:none; opacity:1; transform:none; }
  .reel-block.is-exiting{ animation:none; opacity:0; }
}