<div class="acc-curt">
  <input type="radio" name="curt" id="curt-1" checked />
  <input type="radio" name="curt" id="curt-2" />
  <input type="radio" name="curt" id="curt-3" />
  <div class="acc-curt__tabs">
    <label for="curt-1">ONE</label>
    <label for="curt-2">TWO</label>
    <label for="curt-3">THREE</label>
  </div>
  <div class="acc-curt__stage">
    <div class="acc-curt__p" data-i="0">
      <h4>First Act</h4>
      <p>The curtain rises slowly. Light spills across the boards.</p>
    </div>
    <div class="acc-curt__p" data-i="1">
      <h4>Second Act</h4>
      <p>Tension builds. The rhythm tightens. We lean forward.</p>
    </div>
    <div class="acc-curt__p" data-i="2">
      <h4>Third Act</h4>
      <p>Resolution arrives. The audience exhales. Lights dim.</p>
    </div>
  </div>
</div>

.acc-curt {
  display: flex; flex-direction: column; height: 220px;
  border-radius: 12px; overflow: hidden;
  background: #1a1a24; border: 1px solid rgba(240,238,255,0.06);
}
.acc-curt > input { display: none; }
.acc-curt__tabs {
  display: flex; background: #15151d;
  border-bottom: 1px solid rgba(240,238,255,0.06);
}
.acc-curt__tabs label {
  flex: 1; padding: 11px; cursor: pointer;
  font: 700 11px/1 system-ui; letter-spacing: 0.14em; text-align: center;
  color: rgba(240,238,255,0.5); transition: color .2s, background .2s;
}
.acc-curt__tabs label:hover { color: #f0eeff; }
.acc-curt__stage { position: relative; flex: 1; overflow: hidden; }
.acc-curt__p {
  position: absolute; inset: 0; padding: 18px;
  transform: translateX(100%); opacity: 0;
  transition: transform .5s cubic-bezier(.3,1,.3,1), opacity .35s;
}
.acc-curt__p h4 { margin: 0 0 8px; font: 700 14px/1.2 system-ui; color: #d49a5c; }
.acc-curt__p p { margin: 0; font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7); }
#curt-1:checked ~ .acc-curt__tabs label[for="curt-1"],
#curt-2:checked ~ .acc-curt__tabs label[for="curt-2"],
#curt-3:checked ~ .acc-curt__tabs label[for="curt-3"] {
  color: #f0eeff; background: rgba(156,123,214,0.18);
}
#curt-1:checked ~ .acc-curt__stage [data-i="0"],
#curt-2:checked ~ .acc-curt__stage [data-i="1"],
#curt-3:checked ~ .acc-curt__stage [data-i="2"] {
  transform: translateX(0); opacity: 1;
}