/* Testimonial cards — editorial pull-quote style */

.testimonial {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
  overflow: hidden;
}
@media (max-width: 640px) {
  .testimonial {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    border-radius: var(--radius-md);
  }
}
/* Oversized serif opening quote mark, bleeding off the top-left */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -0.25em;
  left: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 7rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.18;
  font-weight: 700;
  pointer-events: none;
  font-variation-settings: "opsz" 144;
}

.testimonial__stars {
  color: var(--color-accent-bright);
  font-size: var(--fs-md);
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}

.testimonial__quote {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0;
  flex-grow: 1;
}
.testimonial__quote strong {
  background: linear-gradient(transparent 60%, rgba(242, 102, 24, 0.35) 60%);
  font-weight: var(--fw-medium);
}

.testimonial__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.testimonial__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-lg);
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
  box-shadow: 0 3px 8px rgba(242, 102, 24, 0.32),
              inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  font-variation-settings: "opsz" 144;
}
.testimonial__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial__name {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.testimonial__detail {
  color: var(--color-muted);
  font-size: var(--fs-xs);
}

/* Hover: card rises subtly, quote mark brightens.
   Transform composes via vars (same pattern as .card) so JS-driven tilt
   can coexist with the hover lift and the scroll-reveal slide-in. */
.testimonial {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  --reveal-x: 0px;
  --reveal-y: 0px;
  --reveal-scale: 1;
  transform: perspective(900px)
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y))
             translate3d(var(--reveal-x), calc(var(--tilt-lift) + var(--reveal-y)), 0)
             scale(var(--reveal-scale));
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.testimonial:hover {
  --tilt-lift: -2px;
  box-shadow: var(--shadow-lg);
}
.testimonial:hover::before { opacity: 0.28; }
/* Snappy linear transition while the cursor is inside (see card.css for the
   same trick). The .reveal-group variant matches stagger specificity (0,3,0). */
.testimonial.is-tilting,
.reveal-group > .testimonial.is-tilting {
  transition: box-shadow var(--dur-slow) var(--ease),
              transform var(--dur-fast) linear;
  transition-delay: 0s;
}