/* S4 · People trust people (#trust) — THE FEED homepage, design.md Part III.
   FINAL-SPEC §4 S4 / profile slide 4: "UGC" heavy-wide with the rest light, the body
   with the gamble struck out and the #1 format marked, the crowd's UGC bubble typing
   before it says the pull line, and the hand + iPhone cut-out filming you (REC). */

/* ── frame ── */
.trust {
  --slab-h: calc(clamp(128px, 18vw, 300px) * var(--ui-zoom));
  --slab-w: calc(var(--slab-h) * 1.36);
  --pad-end: var(--band-pad);
  padding-block-end: var(--pad-end);
}
@media (min-width: 900px) {
  .trust {
    /* the copy column ends above the yellow corner: no text ever sits on the
       slab (the ink flips light in dark mode) */
    --pad-end: max(var(--band-pad), calc(var(--slab-h) + var(--s-5)));
  }
}

.trust__slab {
  position: absolute;
  z-index: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: var(--slab-w);
  block-size: var(--slab-h);
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.trust__slab:dir(rtl) {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.js-motion .trust__slab {
  transition: clip-path var(--d-xl) var(--ease-wipe);
}
.js-motion .trust__slab:not(.in) {
  clip-path: polygon(0 100%, 0 100%, 0 100%);
}
.js-motion .trust__slab:dir(rtl):not(.in) {
  clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
}

/* ── grid ── */
.trust__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.trust__photo {
  /* the cut-out's forearm leaves through the band's bottom edge, never a cut
     side: the lower 32% of the image (0.52 × its width) hangs below the band */
  --ph-w: min(72vw, 360px);
  justify-self: end;
  inline-size: var(--ph-w);
  margin-block: var(--s-6) calc(-1 * var(--pad-end) - 0.52 * var(--ph-w));
  margin-inline: 0 calc(-0.12 * var(--ph-w));
}
@media (min-width: 900px) {
  .trust__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
  }
  .trust__copy {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  .trust__photo {
    grid-column: 8 / -1;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    --ph-w: min(100% + var(--fg), 600px);
    margin: 0;
    margin-block-end: calc(-1 * var(--pad-end) - 0.52 * var(--ph-w));
    margin-inline-end: calc(-1 * var(--fg));
  }
}

/* ── headline ── */
.trust__head {
  display: grid;
  gap: var(--s-3);
}
.page-home .trust__h2:lang(en) {
  font-size: var(--fs-h2);
  text-transform: none;
  text-wrap: wrap;
  line-height: 1;
}
.trust__ugc {
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.5em;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.trust__light {
  font-weight: 300;
  font-stretch: 100%;
  font-size: 0.74em;
  letter-spacing: -0.01em;
}
/* "UGC performs best" stays one line: the copy column is 7/12, so the
   headline caps where the column stops growing */
@media (min-width: 1280px) {
  .page-home .trust__h2:lang(en) {
    font-size: min(var(--fs-h2), 4.6rem);
  }
}
/* "performs best" never splits ("best" orphaned on its own line) */
.trust__ugc + .trust__light {
  white-space: nowrap;
}
.trust__l2 {
  font-size: 0.74em;
  line-height: 1.05;
}
.trust__l2 .trust__light {
  font-size: 1em;
}
.page-home .trust__h2:lang(ar) {
  line-height: 1.12;
}
@media (min-width: 900px) {
  .trust__ugc {
    font-size: 1.25em;
  }
  .trust__light {
    font-size: 0.62em;
  }
  .trust__l2 {
    font-size: 0.62em;
  }
}

/* ── rule + body ── */
.trust__rule {
  margin-block: clamp(24px, 3vw, 40px);
  border: 0;
  border-block-start: 1px solid var(--ink);
  inline-size: 100%;
}
.trust__body {
  max-inline-size: 60ch;
}
.trust__strike {
  position: relative;
  white-space: nowrap;
  color: var(--ink);
}
.trust__strike::after {
  content: "";
  position: absolute;
  inset-inline: -0.1em;
  inset-block-start: 52%;
  block-size: 3px;
  border-radius: 2px;
  background: var(--red-text);
  transform-origin: left center;
}
/* Readex Pro's Arabic content box is tall (high ascent): at 52% the line runs
   through the dots above the letters. Lower it onto the letter bodies. */
.page-home:lang(ar) .trust__strike::after {
  inset-block-start: 67%;
  block-size: 2px;
}
.trust__strike:dir(rtl)::after {
  transform-origin: right center;
}
.trust__mark {
  white-space: nowrap;
  font-weight: 600;
}
.js-motion .trust__body .trust__strike::after {
  transition: transform 600ms var(--ease-out) 500ms;
}
.js-motion .trust__body .trust__mark::before {
  transition: transform 600ms var(--ease-out) 750ms;
}
.js-motion .trust__body:not(.in) .trust__strike::after,
.js-motion .trust__body:not(.in) .trust__mark::before {
  transform: scaleX(0);
}

/* ── the crowd says it: UGC bubble → typing… → the pull line ── */
.trust__bubble {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  margin: clamp(32px, 4vw, 56px) 0 0;
}
.trust__crowd {
  inline-size: clamp(88px, 8vw, 132px);
  color: var(--ink);
}
.ic-crowd {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}
.ic-crowd__fill {
  fill: var(--yellow);
}
.ic-crowd__ugc {
  fill: var(--on-yellow);
  stroke: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 13px;
  letter-spacing: 0;
}
.ic-crowd__person {
  fill: var(--surface);
}
.ic-crowd__bub,
.ic-crowd__sp {
  transform-box: fill-box;
}
.ic-crowd__bub {
  transform-origin: 50% 100%;
}
.ic-crowd__sp {
  transform-origin: 50% 50%;
}

.trust__card {
  position: relative;
  justify-self: start;
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 28px);
  border-radius: var(--r-md);
  background: var(--yellow);
  color: var(--on-yellow);
  box-shadow: var(--sh-1);
  transform-origin: 0% 60%;
}
.trust__card:dir(rtl) {
  transform-origin: 100% 60%;
}
/* the speech tail, pointing at the crowd */
.trust__card::before {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 9px);
  inset-inline-start: -11px;
  inline-size: 13px;
  block-size: 18px;
  background: var(--yellow);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.trust__card:dir(rtl)::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.trust__pull {
  margin: 0;
}
.trust__pull p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--fs-h3);
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
.page-home:lang(ar) .trust__pull p {
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-stretch: normal;
  font-size: var(--fs-ar-h3);
  line-height: 1.4;
  text-transform: none;
}
.trust__typing {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: clamp(16px, 2vw, 28px);
  display: flex;
  gap: 6px;
  translate: 0 -50%;
  opacity: 0;
  pointer-events: none;
}
.trust__typing i {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--on-yellow);
}

/* motion: the card pops from its tail, dots type for ~1.1s, then the line */
.js-motion .trust__bubble .trust__card {
  transition:
    opacity 360ms var(--ease-pop) 200ms,
    transform 360ms var(--ease-pop) 200ms;
}
.js-motion .trust__bubble .trust__pull {
  transition: opacity 200ms linear 1500ms;
}
.js-motion .trust__bubble .ic-crowd__bub {
  transition:
    opacity 360ms var(--ease-pop),
    transform 360ms var(--ease-pop);
}
.js-motion .trust__bubble:not(.in) .trust__card,
.js-motion .trust__bubble:not(.in) .ic-crowd__bub {
  opacity: 0;
  transform: scale(0.4);
}
.js-motion .trust__bubble:not(.in) .trust__pull {
  opacity: 0;
}
.js-motion .trust__bubble.in .trust__typing {
  animation: trust-typing 1500ms linear both;
}
.js-motion .trust__bubble.in .trust__typing i {
  animation: trust-dot 900ms ease-in-out 400ms 2;
}
.js-motion .trust__bubble.in .trust__typing i:nth-child(2) {
  animation-delay: 550ms;
}
.js-motion .trust__bubble.in .trust__typing i:nth-child(3) {
  animation-delay: 700ms;
}
.js-motion .trust__bubble.in .ic-crowd__sp {
  animation: trust-spark 1.4s ease-in-out 3;
}
.js-motion .trust__bubble.in .ic-crowd__sp--2 {
  animation-delay: 300ms;
}
.js-motion .trust__bubble.in .ic-crowd__sp--3 {
  animation-delay: 600ms;
}
@keyframes trust-typing {
  0%,
  20% {
    opacity: 0;
  }
  28%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes trust-dot {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
}
@keyframes trust-spark {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.7);
  }
}

/* ── the hand + iPhone, filming you ── */
.trust__photo {
  position: relative;
}
.trust__shot {
  position: relative;
  display: block;
}
.trust__img {
  inline-size: 100%;
  block-size: auto;
}
.trust__rec {
  position: absolute;
  inset-block-start: 3.5%;
  inset-inline-end: 47%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--scrim);
  color: var(--on-slab);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
}
.trust__rec i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: trust-rec 1s steps(2, jump-none) infinite;
  animation-play-state: var(--play, paused);
}
@keyframes trust-rec {
  to {
    opacity: 0.25;
  }
}
.js-motion .trust__photo .trust__shot {
  transition:
    opacity var(--d-xl) var(--ease-out),
    transform var(--d-xl) var(--ease-out);
}
.js-motion .trust__photo:not(.in) .trust__shot {
  opacity: 0;
  transform: translateY(40px) rotate(calc(6deg * var(--dir)));
}

/* base.css gives every :lang(ar) element line-height 1.85; the mask lines must
   inherit the headline's own leading instead */
.trust__h2 .line,
.trust__h2 .line > span,
.trust__h2 .line span {
  line-height: inherit;
}