/* ==========================================================================
   EWD Site — "We Have Completed 2,500+" client testimonials
   A drag-to-browse, infinitely-looping carousel: the up/down zigzag is a
   property of each *slot* (1st, 2nd, 3rd…), not of any one card, so as
   cards drag past one another they visibly rise and fall into their new
   slot's height — the 2nd card lifts into the 1st slot's "up" position,
   the 3rd eases down into the 2nd slot's "down" position, and so on, in
   one continuous wave driven every frame by testimonials.js (see
   Carousel.prototype.updateCardWave). Grabbing a card locks the track
   1:1 to the pointer (translateX only, so the wave keeps its normal
   shape while dragging); releasing rounds to the nearest card and
   springs there with an overshoot ease. A few clones of the
   first/last cards sit off-screen at each end so the loop never shows a
   seam. Self-contained; reuses the design tokens declared on :root in
   style.css (colors, easing, fonts).
   ========================================================================== */

.testimonials {
  --section-pad-x: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  padding: 50px 0 100px;
  /* background: var(--bg); */
  overflow: hidden;
}

.testimonials__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.testimonials__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}

.testimonials__orb--a {
  top: -10%;
  left: 8%;
  width: 32vw;
  height: 32vw;
  background: radial-gradient(circle, rgba(73, 46, 159, 0.35), transparent 70%);
  animation: testimonials-drift-a 22s ease-in-out infinite;
}

.testimonials__orb--b {
  bottom: -15%;
  right: 6%;
  width: 34vw;
  height: 34vw;
  background: radial-gradient(circle, rgba(44, 59, 108, 0.3), transparent 70%);
  animation: testimonials-drift-b 26s ease-in-out infinite;
}

@keyframes testimonials-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.12); }
}

@keyframes testimonials-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7%, -6%) scale(1.1); }
}

.testimonials__inner {
  position: relative;
  z-index: 1;
}

.testimonials__header {
  text-align: center;
  /* margin: 0 auto clamp(2.5rem, 6vw, 4rem); */
  margin-bottom: -35px;
}

.testimonials__kicker {
    margin-bottom: 39px;
    font-family: var(--font-heading);
    color: var(--text);
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: -0.36px;
    text-transform: capitalize;
}

.testimonials__count {
    margin: 0;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s var(--ease-out);
    color: rgba(255, 255, 255, 0.87);
    font-size: 176px;
    font-weight: 800;
    line-height: 130px;
    letter-spacing: -1.76px;
    text-transform: capitalize;
}

.testimonials__count.is-settling {
  animation: testimonials-count-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes testimonials-count-pop {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(73, 46, 159, 0)); }
  45% { transform: scale(1.06); filter: drop-shadow(0 0 26px rgba(73, 46, 159, 0.55)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(73, 46, 159, 0)); }
}

/* .testimonials__count-plus {
  font-size: 0.55em;
  margin-top: 0.15em;
  color: var(--cyan);
} */

/* ---------- Carousel ---------- */

/* Full-bleed: the carousel is a sibling of .testimonials__inner (not
   nested inside its max-width box), so it already spans the full width
   of the section — this just cancels the section's own horizontal
   padding so it reaches the true edges. Deliberately not a 100vw/negative-
   margin trick: that approach measures against the *window* rather than
   this element's actual containing block, so it drifts out of sync with
   the real edge whenever a scrollbar is present, which read as a
   lopsided shadow and cards not lining up cleanly at rest. Calc'ing
   against the section's own padding is exact regardless of scrollbars. */
.t-carousel {
  --t-zigzag: 18px;
  position: relative;
  z-index: 1;
  outline: none;
  width: calc(100% + var(--section-pad-x) * 2);
  margin-left: calc(-1 * var(--section-pad-x));
  margin-right: calc(-1 * var(--section-pad-x));
}

.t-carousel__viewport {
  position: relative;
  overflow: hidden;
  padding: 2.5rem var(--section-pad-x) 1.5rem;
}

/* A light shadow the carousel fades into on both sides — tinting the
   edge cards rather than fully cutting them off, so they stay faintly
   readable all the way to the edge. */
.t-carousel__viewport::before,
.t-carousel__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 6vw, 130px);
  z-index: 2;
  pointer-events: none;
}

.t-carousel__viewport::before {
  left: 0;
  background: linear-gradient(to right, rgba(5, 6, 10, 0.6), transparent);
}

.t-carousel__viewport::after {
  right: 0;
  background: linear-gradient(to left, rgba(5, 6, 10, 0.6), transparent);
}

.t-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  width: max-content;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}

.t-carousel__track.is-dragging {
  cursor: grabbing;
}

.t-card {
  --tw: clamp(280px, 27vw, 406px);
  flex: 0 0 var(--tw);
  width: var(--tw);
  min-height: 234px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 42px;
  padding: 56px 30px 31px 40px;
  border-radius: 15px;
  border: 1px solid #492E9F;
  background: rgba(25, 14, 61, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;
  transform-origin: 50% 50%;
  /* transform is driven every frame by JS (testimonials.js updateCardWave) —
     a CSS transition here would fight the per-frame updates and lag/judder. */
  transition: opacity 0.4s var(--ease-out), border-color 0.3s var(--ease-out);
}

/* Static fallback so cards still read as a zigzag before JS runs (or if it
   fails); testimonials.js overrides this with an inline transform on every
   frame once it boots, which always wins over this class-based value. */
.t-card--up {
  transform: translateY(calc(-1 * var(--t-zigzag)));
}

.t-card--down {
  transform: translateY(var(--t-zigzag));
}

.t-card.is-far {
  opacity: 0.4;
}

.t-card.is-near {
  border-color: var(--purple);
}

.t-card__quote {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 300;
  line-height: 35px;
  letter-spacing: -0.21px;
  text-transform: capitalize;
}

.t-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.t-card__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
}

.t-card__id {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.t-card__name {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.t-card__role {
  font-family: var(--font-body);
  color: rgba(217, 217, 217, 0.79);
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
}

/* ---------- Controls ---------- */

/* Arrows are for touch/tablet/small-desktop only — at 1200px and up the
   deck drifts on its own (see testimonials.js) and doesn't need them. */
.t-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
}

@media (min-width: 1200px) {
  .t-carousel__controls {
    display: none;
  }
}

.t-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.t-nav:hover {
  color: var(--text);
  border-color: var(--purple);
  background: var(--panel-bg-soft);
  transform: translateY(-1px);
}

.t-nav:active {
  transform: translateY(0) scale(0.94);
}

/* ---------- Responsive ---------- */

/* The flat multi-card slider sizing below 1200px (3/2/1 cards per the
   1199/991/479 breakpoints, zigzag disabled) lives in responsive.css,
   which is linked after this file and already owns every other
   breakpoint override on this site — keeping it there avoids two files
   fighting over the same .t-card { --tw } declaration. */

@media (max-width: 700px) {
  .t-carousel__viewport {
    padding: 1.75rem 1.25rem 1.25rem;
  }

  .t-carousel__viewport::before,
  .t-carousel__viewport::after {
    width: clamp(20px, 8vw, 44px);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .testimonials__orb {
    animation: none !important;
  }

  .t-card {
    transition: none !important;
  }

  .testimonials__count {
    transition: none !important;
  }

  .testimonials__count.is-settling {
    animation: none !important;
  }
}