/* ============================================================
   TESTIMONIALS · scroll-pinned animated card stack
   Adapted (vanilla) from a 21st.dev "animated cards stack" design, restyled
   to the Tokverse brand theme. As you scroll the pinned region, cards deal off
   the top of the deck (translateY up + rotate to straight) revealing the next,
   with 3D depth (perspective + translateZ). Cards render from data
   (testimonials.js). Requires: base.css
   ============================================================ */

.tst {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 55%, #ffffff 100%);
}
.tst-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 12vh, 130px) clamp(20px, 5vw, 40px) 0; }

.tst-head { text-align: center; max-width: 720px; margin: 0 auto; }
.tst-label {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.tst-head h2 {
  font-family: 'Cabinet Grotesk','Satoshi',sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; font-weight: 800;
  letter-spacing: -1.4px; color: var(--ink); text-wrap: balance;
}
.tst-head h2 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tst-head p { margin-top: 16px; font-size: 1.06rem; line-height: 1.6; color: var(--slate); text-wrap: pretty; }

.tst-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(18px, 4vw, 46px); margin: clamp(28px, 4vh, 44px) auto 0;
}
.tst-stat { text-align: center; }
.tst-stat .n {
  font-family: 'Cabinet Grotesk','Satoshi',sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -1px; color: var(--ink); line-height: 1;
}
.tst-stat .l { margin-top: 7px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.tst-strip .divider { width: 1px; height: 38px; background: var(--line); }

/* ---- the pinned scroll region ---- */
.tst-scroll { position: relative; height: 300vh; }
.tst-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}
.tst-stack {
  position: relative;
  width: min(360px, 86vw); height: 460px;
  transform-style: preserve-3d;
}

/* ---- a card ---- */
.tst-c {
  position: absolute; inset: 0; will-change: transform, opacity;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 32px 28px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 70px rgba(8,40,90,0.16), 0 8px 24px rgba(0,212,255,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  backface-visibility: hidden;
}
.tst-c .stars { color: #f5a623; font-size: 1.05rem; letter-spacing: 3px; }
.tst-c blockquote { margin: 0; font-size: 1.14rem; line-height: 1.55; color: var(--ink); font-weight: 600; }
.tst-c blockquote b { color: var(--ink); font-weight: 800; }
.tst-who { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.tst-avatar {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem; color: #fff; letter-spacing: .3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.tst-name { font-weight: 800; font-size: .95rem; color: var(--ink); line-height: 1.2; text-align: left; }
.tst-role { font-size: .8rem; color: var(--muted); margin-top: 2px; text-align: left; }

/* head/strip reveal (testimonials.js adds .in) */
.tst-head, .tst-strip { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s var(--ease-film); }
.tst-head.in, .tst-strip.in { opacity: 1; transform: none; }

/* ---- static fallback (mobile + reduced-motion): a plain vertical list ---- */
.tst.tst-static .tst-scroll { height: auto; }
.tst.tst-static .tst-pin { position: static; height: auto; overflow: visible; perspective: none; display: block; padding: clamp(30px,6vh,60px) clamp(20px,5vw,40px) clamp(70px,10vh,110px); }
.tst.tst-static .tst-stack { width: 100%; max-width: 620px; height: auto; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.tst.tst-static .tst-c { position: relative; inset: auto; transform: none !important; opacity: 1 !important; box-shadow: var(--shadow-sm); }

@media (prefers-reduced-motion: reduce) {
  .tst-head, .tst-strip { opacity: 1; transform: none; transition: none; }
}