/* Wolves and Warriors — animated testimonial marquee
   Doorlopende referentieband. Los bestand zodat style.css onaangeroerd blijft. */

.tmarquee{
  position:relative;
  margin-top:44px;
  overflow:hidden;
  --tcard-w:380px;
  --tgrow:34px;
  /* fade aan beide randen */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.tmarquee + .tmarquee{margin-top:var(--tgrow)}

.tmarquee__track{
  display:flex;
  gap:var(--tgrow);
  width:max-content;
  padding-block:6px;
  animation:tmarquee-scroll var(--dur,70s) linear infinite;
  will-change:transform;
}
.tmarquee--reverse .tmarquee__track{animation-direction:reverse}

/* pauzeer bij hover of toetsenbordfocus */
.tmarquee:hover .tmarquee__track,
.tmarquee:focus-within .tmarquee__track{animation-play-state:paused}

@keyframes tmarquee-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - (var(--tgrow) / 2)),0,0)}
}

/* ---------- kaart ---------- */
.tcard{
  position:relative;
  width:var(--tcard-w);
  flex:0 0 var(--tcard-w);
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:32px 32px 28px;
  border:1px solid var(--line,#e6dccb);
  background:#fbf8f2;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tcard::before{
  content:"\201C";
  font-family:var(--serif,Georgia,serif);
  font-size:3.4rem;
  line-height:.6;
  color:var(--gold,#c9a24b);
  opacity:.55;
  display:block;
}
.tcard:hover{
  transform:translateY(-4px);
  border-color:rgba(224,116,58,.45);
  box-shadow:0 18px 40px -28px rgba(20,18,16,.55);
}

.tcard__text{
  font-family:var(--serif,Georgia,serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.55;
  color:#2c2820;
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:pre-line;
}

.tcard__meta{
  margin-top:auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding-top:6px;
  border-top:1px solid rgba(230,220,203,.85);
}
.tcard__name{
  font-family:var(--sans,system-ui,sans-serif);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fire,#e0743a);
}
.tcard__date{
  font-family:var(--sans,system-ui,sans-serif);
  font-size:11px;
  letter-spacing:.1em;
  color:#8a8275;
  white-space:nowrap;
}

/* donkere secties (optioneel) */
.tmarquee--on-dark .tcard{background:rgba(255,255,255,.03);border-color:rgba(244,239,231,.14)}
.tmarquee--on-dark .tcard__text{color:rgba(244,239,231,.86)}
.tmarquee--on-dark .tcard__meta{border-top-color:rgba(244,239,231,.14)}

/* ---------- mobiel ---------- */
@media(max-width:760px){
  .tmarquee{--tcard-w:280px;--tgrow:20px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent);
    mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent);}
  .tcard{padding:24px 22px 20px;gap:14px}
  .tcard__text{font-size:.98rem;-webkit-line-clamp:5}
  .tcard::before{font-size:2.6rem}
}

/* ---------- respecteer reductie van beweging ---------- */
@media(prefers-reduced-motion:reduce){
  .tmarquee{
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .tmarquee__track{animation:none}
  .tcard{scroll-snap-align:start}
}