/* testimonials.css — Home "GOOD WORDS" section (sections/testimonials.njk; D16 reversed 2026-10-15).
   framer.css owns the lifted layout (450vh track, sticky header + sticky card stack, card box,
   type presets). This file holds: the height rule that follows the number of quotes, the brand
   fixes (Bingo Dilan title, monochrome avatar), the phone card padding, and the static layout the
   section falls back to with JavaScript off or prefers-reduced-motion (html:not(.hwg-reveal)), where
   the sticky/absolute choreography would otherwise leave every card piled on top of the first. */

/* ---------- scroll track: (quotes + 1.5) × 100vh — the mirror's 450vh for its 3 quotes ---------- */
[data-section="testimonials"].framer-1djhmw8 {
  height: calc((var(--hwg-quotes, 3) + 1.5) * 100vh);
}

/* ---------- title: same clamp()-sized Bingo Dilan recipe as section-title.njk (R3), with the mirror's
   bottom fade (framer-14u52so's mask) kept on the wrapper. framer-bosayp's overflow:hidden would clip
   Bingo Dilan's tall glyphs, so it is opened up here. ---------- */
[data-section="testimonials"] .hwg-quotes-headline {
  overflow: visible;
  z-index: 3; /* above the Overlay Blur (z-index 2), as section-title.njk places its title: in the mirror the
                 headline sits under the blur (z-index 1) and reads half-blurred at rest */
}
[data-section="testimonials"] .section-title__wrap {
  -webkit-mask: linear-gradient(#000 0%, #0000 100%);
  mask: linear-gradient(#000 0%, #0000 100%);
}

/* ---------- cards ---------- */
.hwg-quote {
  margin: 0;
}
.hwg-quote-card {
  margin: 0;
}
.hwg-quote-card blockquote {
  margin: 0;
}
html.hwg-reveal .hwg-quote,
html.hwg-reveal .hwg-quotes-headline {
  will-change: transform;
}
.hwg-word {
  display: inline-block;
}

/* ---------- choreography the template plays in time (measured on the original Framer template site, 2026-10-15) ----------
   reveal.js arms these states (html.hwg-reveal) and adds the classes; nothing applies with JS off or
   under prefers-reduced-motion, where the headline and every word are simply visible.
   Headline: one-shot spring when the header is 20 % into view — opacity 0 → 1, translateY 240 → 0,
   scale .7 → 1, overshooting to −32 px / 1.04 before settling.
   Words: each word fades and unblurs over ≈400 ms, 50 ms after the previous one, over the 10 % ghost
   copy underneath; replayed whenever the card comes back up from below. */
@media (prefers-reduced-motion: no-preference) {
  html.hwg-reveal .hwg-quotes-headline {
    opacity: 0;
    transform: translateY(240px) scale(0.7);
  }
  html.hwg-reveal .hwg-quotes-headline.hwg-head-in {
    animation: hwg-head-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  html.hwg-reveal .hwg-quote .hwg-word {
    opacity: 0;
    filter: blur(10px);
  }
  html.hwg-reveal .hwg-quote.hwg-words-in .hwg-word {
    animation: hwg-word 400ms cubic-bezier(0.22, -0.08, 0.44, 0.9) both;
    animation-delay: calc(var(--i, 0) * 50ms);
  }
}
@keyframes hwg-head-in {
  0% { opacity: 0; transform: translateY(240px) scale(0.7); }
  65% { opacity: 1; transform: translateY(-32px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes hwg-word {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}

/* avatar: the mirror shows a photo; without one the circle carries the first letter of the name */
.hwg-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hwg-black, #000);
  color: var(--hwg-white, #fff);
}
/* an image avatar is usually a client logo, not a face: contain it on white with a hairline ring and
   greyscale it like the Clients grid (strict monochrome), instead of cropping it to a circle */
.hwg-avatar:has(img) {
  background-color: var(--hwg-white, #fff);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.hwg-avatar img {
  object-fit: contain !important;
  box-sizing: border-box;
  padding: 7px;
  filter: grayscale(1);
}
.hwg-avatar__initial {
  font-family: "Bingo Dilan", Georgia, serif;
  font-size: 22px;
  line-height: 1;
  transform: translateY(0.06em); /* optical centre for the tall glyphs */
}

/* quote size follows the viewport height. The card box is 100vh − 192px tall (framer.css), and the
   template's quotes are ~23 words; HWG's run to ~75, which at the preset's fixed 36px (22px phone)
   overrun the card on a 768px-tall desktop and crowd the author on a phone. The clamp keeps the
   template size on tall viewports (36px from ≈1125px tall, 22px from ≈865px on a phone) and shrinks
   below that so a 75-word quote still fits above the author block. All three copies of the quote
   share the rule, so the spacer, ghost and word copy keep wrapping identically. */
[data-section="testimonials"] p.framer-styles-preset-wzifxz {
  font-size: clamp(20px, 3.2vh, 36px) !important; /* framer.css derives the size from a preset variable that wins the cascade; override the property itself */
}
/* phone: the mirror keeps the card's 48px padding at 390 wide, which leaves 270px for the text.
   28px gives long quotes room without changing the desktop card. */
@media (max-width: 809.98px) {
  [data-section="testimonials"] .framer-HDZGH.framer-18oslqp {
    padding: 28px;
  }
  [data-section="testimonials"] p.framer-styles-preset-wzifxz {
    font-size: clamp(16px, 2.55vh, 22px) !important;
  }
}

/* ---------- static fallback: JS off or prefers-reduced-motion (reveal.js never sets html.hwg-reveal) ----------
   The 100vh anchors go, the header and the card stack sit in normal flow, and the cards become a
   column so every quote is readable. Nothing here applies while reveal.js drives the choreography. */
html:not(.hwg-reveal) [data-section="testimonials"].framer-1djhmw8 {
  height: auto;
  padding-bottom: 96px;
}
html:not(.hwg-reveal) [data-section="testimonials"] .framer-1uphgbl {
  display: none;
}
html:not(.hwg-reveal) [data-section="testimonials"] .framer-a2n5iz {
  height: auto;
  flex: none;
}
html:not(.hwg-reveal) [data-section="testimonials"] .framer-1a1sc6m {
  position: relative;
  height: auto;
  padding-top: 120px;
  padding-bottom: 48px;
}
html:not(.hwg-reveal) [data-section="testimonials"] .framer-3fi0ur {
  display: none;
}
html:not(.hwg-reveal) [data-section="testimonials"] .hwg-quotes-headline {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.hwg-reveal) [data-section="testimonials"] .framer-1ffdq8c {
  position: relative;
  height: auto;
  overflow: visible;
  gap: 24px;
}
html:not(.hwg-reveal) [data-section="testimonials"] .hwg-quote {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: 100%;
  max-width: 640px;
  transform: none !important;
}
html:not(.hwg-reveal) [data-section="testimonials"] .framer-1ouuve8-container {
  flex: none;
  height: auto;
}
html:not(.hwg-reveal) [data-section="testimonials"] .framer-HDZGH.framer-18oslqp {
  height: auto !important;
  gap: 48px;
}