<div class="acc-reel">
  <div class="acc-reel__strip">
    <input type="radio" name="reel" id="reel-1" checked />
    <input type="radio" name="reel" id="reel-2" />
    <input type="radio" name="reel" id="reel-3" />
    <label for="reel-1" class="acc-reel__f"><span>SCENE 01 · Daybreak</span></label>
    <label for="reel-2" class="acc-reel__f"><span>SCENE 02 · Pursuit</span></label>
    <label for="reel-3" class="acc-reel__f"><span>SCENE 03 · Resolve</span></label>
  </div>
</div>

.acc-reel {
  background: #15151d; padding: 12px 0; border-radius: 8px;
  height: 220px; display: flex; align-items: center;
}
.acc-reel__strip {
  display: flex; gap: 4px; width: 100%; padding: 18px 12px;
  background:
    linear-gradient(#0a0a10,#0a0a10) center/100% calc(100% - 24px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) top/100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) bottom/100% 12px no-repeat;
}
.acc-reel__strip > input { display: none; }
.acc-reel__f {
  flex: 1; cursor: pointer; min-height: 130px;
  background: linear-gradient(135deg,#3a2a55,#2a1a45);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 system-ui; letter-spacing: 0.1em; color: rgba(240,238,255,0.4);
  filter: brightness(0.65) contrast(0.85);
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s, color .3s;
}
.acc-reel__f:nth-of-type(2) { background: linear-gradient(135deg,#553a2a,#451a1a); }
.acc-reel__f:nth-of-type(3) { background: linear-gradient(135deg,#2a553a,#1a4530); }
#reel-1:checked ~ [for="reel-1"],
#reel-2:checked ~ [for="reel-2"],
#reel-3:checked ~ [for="reel-3"] {
  flex: 4; filter: brightness(1.1) contrast(1.05);
  color: #f0eeff; font-size: 13px;
}