/* Section 8, Testimonials: "Real moments, real people." Built by testimonials.js.
   Like Wispr's "From the first people to use it": a dark section, cards of different
   colours and shapes zig-zagging down, tilting as they pass. Ours are shaped like
   clips, each wearing its size tag. Real, approved quotes only. */

.testimonials {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto 120px;
  padding: clamp(80px, 9vw, 120px) clamp(16px, 4vw, 48px) clamp(96px, 11vw, 150px);
  border-radius: 32px;
  background: var(--ink);
  color: #fff;
  overflow: hidden; /* the tilt never pushes anything sideways off the page */
}
.tm-head { text-align: center; margin-bottom: clamp(48px, 7vw, 88px); }
.testimonials .eyebrow { color: #A49DBF; }

/* The stream: two staggered columns (testimonials.js deals the cards left, right,
   left…), the right one starting lower, so they zig-zag without ever overlapping. */
.tm-stream { display: flex; justify-content: center; gap: 40px; max-width: 960px; margin: 0 auto; }
.tm-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.tm-col:first-child { align-items: flex-end; }
.tm-col:last-child { align-items: flex-start; padding-top: 180px; }
.tm-item { position: relative; max-width: 100%; }
.tm { margin: 0; max-width: 100%; }

/* The reflection: a huge, deeply blurred copy of the card's photo and colour behind
   it, lightening the dark background, so the section takes on the testimonials'
   colours. It drifts slowly, and brightens when the card is touched. */
.tm-glow {
  position: absolute;
  inset: -30%;
  z-index: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  filter: blur(70px) saturate(1.4);
  opacity: 0.42;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.5s ease;
  animation: tm-drift 14s ease-in-out infinite alternate;
}
.tm-item.hot .tm-glow { opacity: 0.75; }
@keyframes tm-drift {
  from { transform: translate(-4%, 3%) scale(1); }
  to { transform: translate(4%, -3%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .tm-glow { animation: none; } }

/* ---------- the card ---------- */
.tm {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  color: var(--ink);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 50%;
  will-change: transform;
  /* the scroll tilt (--tilt, --drop, from the script), combined with the touch:
     straighten (--straight), lift, lean towards the cursor (--rx, --ry), grow */
  transform: perspective(1000px) translateY(calc(var(--drop, 0px) + var(--lift, 0px))) rotate(calc(var(--tilt, 0deg) * var(--straight, 1))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--grow, 1));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.tm-item.hot .tm { --lift: -10px; --straight: 0.15; --grow: 1.03; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: reduce) { .tm-item.hot .tm { --lift: 0px; --grow: 1; } }
/* the light gliding over a touched card, following the cursor */
.tm::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.45), transparent 50%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tm-item.hot .tm::after { opacity: 1; }
.tm-tag { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(27, 21, 48, 0.82); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }
.tm-body { padding: 22px 22px 20px; }
.tm blockquote { margin: 0; font: 500 clamp(19px, 1.8vw, 22px)/1.3 var(--display); letter-spacing: -0.01em; }
.tm figcaption { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.tm figcaption b { display: block; font-size: 14px; font-weight: 600; }
.tm figcaption small { display: block; font-size: 12px; opacity: 0.7; }
.tm-face { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: rgba(27, 21, 48, 0.12); font-size: 13px; font-weight: 700; }
.tm-face img, .tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-photo { display: grid; place-items: center; overflow: hidden; background: rgba(27, 21, 48, 0.1); font-size: 12px; font-weight: 600; opacity: 1; }
.tm-clipped { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(27, 21, 48, 0.12); font-size: 12px; font-weight: 500; opacity: 0.75; }

/* Shapes: one per Vclip size */
.tm-916 { width: 290px; }                                    /* Status: photo on top */
.tm-916 .tm-photo { aspect-ratio: 4 / 5; margin: 10px 10px 0; border-radius: 14px; }
.tm-45 { width: 360px; }                                     /* Feed: big quote, small photo */
.tm-45 .tm-body { padding-top: 46px; } /* clear of the size tag */
.tm-45 blockquote { font-size: clamp(22px, 2.1vw, 26px); }
.tm-11 { width: 320px; aspect-ratio: 1; display: flex; }     /* Square: a short line */
.tm-11 .tm-body { display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding-top: 48px; }
.tm-11 blockquote { font-size: clamp(24px, 2.4vw, 30px); }
.tm-169 { width: 460px; display: grid; grid-template-columns: 170px minmax(0, 1fr); } /* Wide: photo beside */
.tm-169 .tm-photo { margin: 10px 0 10px 10px; border-radius: 14px; }
.tm-169 .tm-body { padding-top: 40px; }

/* Colours */
.tm-lilac { background: #E3DAFF; }
.tm-violet { background: var(--violet); color: #fff; }
.tm-violet .tm-tag { background: rgba(255, 255, 255, 0.2); }
.tm-violet .tm-face { background: rgba(255, 255, 255, 0.2); }
.tm-violet .tm-clipped { border-color: rgba(255, 255, 255, 0.25); }
.tm-peach { background: #FFD9C7; }
.tm-mint { background: #C9F2DD; }
.tm-cream { background: #F6F1E7; }
.tm-sky { background: #D4E4FF; }

/* Preview slots: obviously not real */
.tm-slot blockquote, .tm-slot .tm-clipped { font-style: italic; opacity: 0.6; }
.tm-slot .tm-photo { border: 2px dashed rgba(27, 21, 48, 0.25); background: transparent; color: rgba(27, 21, 48, 0.5); }
.tm-preview .tm-head::after {
  content: "Preview: these are empty slots, waiting for real quotes. Visitors don't see this section yet.";
  display: block;
  max-width: 420px;
  margin: 20px auto 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 233, 160, 0.15);
  border: 1px dashed rgba(255, 233, 160, 0.5);
  color: #FFE9A0;
  font-size: 13px;
}
.tm-samples .tm-head::after { content: "Preview with SAMPLE testimonials (made-up people, for design feedback). Replace with real ones before launch. Visitors don't see this section yet."; }

@media (max-width: 1023px) {
  .testimonials { margin-bottom: 96px; }
  /* narrower columns: the wide card puts its photo on top, so the words keep room */
  .tm-169 { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .tm-169 .tm-photo { aspect-ratio: 16 / 9; margin: 10px 10px 0; }
  .tm-169 .tm-body { padding-top: 22px; }
}

/* phones: one card after another, centred, a gentler tilt (set in the script) */
@media (max-width: 760px) {
  .testimonials { border-radius: 22px; }
  .tm-stream { flex-direction: column; align-items: center; gap: 22px; }
  .tm-col { display: contents; } /* one column, in reading order (each card carries its order) */
  .tm-glow { inset: -20%; filter: blur(50px) saturate(1.4); }
  .tm-916 { width: min(290px, 100%); }
  .tm-45, .tm-11 { width: min(340px, 100%); }
  .tm-169 { width: min(340px, 100%); }
}