<div class="scd-test">
  <div class="scd-test__stage">
    <input type="radio" name="scd-test-t" id="scd-test-t1" class="scd-test__radio scd-test__radio--r1" checked>
    <input type="radio" name="scd-test-t" id="scd-test-t2" class="scd-test__radio scd-test__radio--r2">
    <input type="radio" name="scd-test-t" id="scd-test-t3" class="scd-test__radio scd-test__radio--r3">
    <div class="scd-test__slider">
      <div class="scd-test__quote scd-test__quote--q1"><p>&ldquo;This completely changed how our team ships. We cut launch time in half.&rdquo;</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#ff9a3c,#ff5e62)"></span><div><h4>Maya Chen</h4><span>Head of Product, Loop</span></div></div></div>
      <div class="scd-test__quote scd-test__quote--q2"><p>&ldquo;Beautiful, fast, and genuinely a joy to use every single day.&rdquo;</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#43cea2,#185a9d)"></span><div><h4>Theo Marsh</h4><span>Founder, Northbeam</span></div></div></div>
      <div class="scd-test__quote scd-test__quote--q3"><p>&ldquo;The support alone is worth it. Best decision we made this year.&rdquo;</p><div class="scd-test__who"><span class="scd-test__av" style="background:linear-gradient(135deg,#c471f5,#7f53ac)"></span><div><h4>Lena Ortiz</h4><span>CTO, Brightside</span></div></div></div>
    </div>
    <div class="scd-test__dots">
      <label for="scd-test-t1"></label><label for="scd-test-t2"></label><label for="scd-test-t3"></label>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,400&family=Geist:wght@400;500;600&display=swap');

.scd-test, .scd-test *, .scd-test *::before, .scd-test *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-test {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg,#fef6ee,#f4e4d4);
  font-family: 'Geist', sans-serif;
}
.scd-test__stage { position: relative; }
.scd-test__radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.scd-test__slider { position: relative; width: 330px; height: 300px; }
.scd-test__quote {
  position: absolute; inset: 0;
  background: #fffdfa;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 18px 40px rgba(120,80,50,.18);
  border: 1px solid #f0e2d2;
  transition: transform .6s cubic-bezier(.3,.9,.3,1), opacity .6s;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(28px) scale(.88);
  opacity: 0;
  z-index: 1;
}
.scd-test__quote p {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #3a2e24;
}
.scd-test__who { display: flex; align-items: center; gap: 12px; }
.scd-test__av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: block; }
.scd-test__who h4 { font-size: .9rem; font-weight: 600; color: #2a201a; }
.scd-test__who span { font-size: .78rem; color: #9b7d5f; }

.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q3 { transform: translateY(0) scale(1); opacity: 1; z-index: 4; }

.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q2,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q1 { transform: translateY(14px) scale(.94); opacity: .55; z-index: 3; }

.scd-test__radio--r1:checked ~ .scd-test__slider .scd-test__quote--q3,
.scd-test__radio--r2:checked ~ .scd-test__slider .scd-test__quote--q1,
.scd-test__radio--r3:checked ~ .scd-test__slider .scd-test__quote--q2 { transform: translateY(28px) scale(.88); opacity: .3; z-index: 2; }

.scd-test__dots { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.scd-test__dots label {
  width: 11px; height: 11px; border-radius: 50%;
  background: #d8c3aa; cursor: pointer;
  transition: background .3s, transform .3s;
}
.scd-test__dots label:hover { background: #c9a98a; }
.scd-test__radio--r1:checked ~ .scd-test__dots label[for="scd-test-t1"],
.scd-test__radio--r2:checked ~ .scd-test__dots label[for="scd-test-t2"],
.scd-test__radio--r3:checked ~ .scd-test__dots label[for="scd-test-t3"] { background: #b8553f; transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .scd-test__quote,
  .scd-test__dots label { transition: none !important; }
}