/* ============================================================
   TESTIMONIAL STRIP — kwizzbit/testimonial-strip
   Centred pull-quote in coral semimono (matched to the
   How-it-works title size beneath it), bookended by quote
   marks, with a small avatar + name/title credit underneath.
   ============================================================ */
.testimonial-strip {
  background: #F0E3D9;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  padding-inline: var(--wp--custom--layout--gutter);
}

.pull-quote {
  max-width: 630px;
  margin-inline: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Floating avatar — sits left of the name/title credit ── */

/* Outer wrap: owns the float loop; no position/opacity here */
.pull-quote__avatar-wrap {
  flex-shrink: 0;
}
/* Float loop — starts after pop-in (0.6s delay + 0.4s anim ≈ 1s) */
.testimonial-strip.is-visible .pull-quote__avatar-wrap {
  animation: pq-float 5s ease-in-out 1s infinite;
}
@keyframes pq-float {
  0%   { transform: translate(0px,  0px); }
  25%  { transform: translate(2px, -5px); }
  50%  { transform: translate(-2px, -8px); }
  75%  { transform: translate(3px, -4px); }
  100% { transform: translate(0px,  0px); }
}

/* Inner image: owns pop-in — scale + opacity only */
.pull-quote__avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid #fff;
  box-shadow: 0px 13px 4px 0px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: scale(0.65);
  transition:
    opacity   0.4s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.6s;
}
.testimonial-strip.is-visible .pull-quote__avatar {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .pull-quote__avatar-wrap { animation: none; }
  .pull-quote__avatar { opacity: 1; transform: none; transition: none; }
}

/* ── The quote — matches hiw-step__title exactly ────────── */
.pull-quote__text {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.8125rem); /* 45px desktop — same as step titles */
  line-height: 1;
  letter-spacing: -0.091em;
  color: var(--wp--preset--color--ink);
  margin: 0;
}

/* ── Hand-drawn swoosh underline on "fastest" ────────────── */
.pull-quote__highlight {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.pull-quote__swoosh {
  position: absolute;
  left: 0;
  bottom: 0.05em;   /* overlaps into the text so it underlays the letters */
  width: 100%;
  height: 0.45em;
  overflow: visible;
  pointer-events: none;
  opacity: 0.55;    /* text shows through — brushstroke, not blocker */
  z-index: -1;
}
.pull-quote__swoosh path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.35s;
}
.testimonial-strip.is-visible .pull-quote__swoosh path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pull-quote__swoosh path { stroke-dashoffset: 0; transition: none; }
}

/* ── Inline coral quote marks — flow naturally with the text */
.pull-quote__text::before {
  content: '\201C'; /* " */
  color: var(--wp--preset--color--coral);
}
.pull-quote__text::after {
  content: '\201D'; /* " */
  color: var(--wp--preset--color--coral);
}

/* ── Credit — avatar left, name/title stacked right ─────── */
.pull-quote__cite {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--wp--preset--font-family--body);
  line-height: 1.2;
}
.pull-quote__credit {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}
.pull-quote__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--wp--preset--color--ink);
}
.pull-quote__venue {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--wp--preset--color--coral);
}

/* ── Mobile — quote narrowed so it feels more composed ────── */
@media (max-width: 640px) {
  .pull-quote { max-width: calc(100% - 10px); }
}

/* ── Scroll reveal — the quote lifts in ──────────────────── */
.pull-quote {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.65s var(--wp--custom--motion--ease-out),
    transform 0.65s var(--wp--custom--motion--ease-out);
}
.testimonial-strip.is-visible .pull-quote {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .pull-quote { opacity: 1; transform: none; transition: none; }
}